/* ====================
MUSIC PROJECTS 2x2 GRID CONTAINER
==================== */

.grid-container { 
width: 100%;
max-width: 1100px;
margin: 0 auto;
}

.grid-2x2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 100%;
margin: 0 auto;
gap: 5px;
}

.grid-2x2 a {
display: block;
overflow: hidden;
}

.grid-2x2 a img {
width: 100%;
height: auto;
display: block;
transition: transform 0.2s ease;
}

.grid-btn {
position: relative;
display: block;
overflow: hidden;
}

.grid-btn img {
width: 100;
display: block;
transition: transform .25s ease, opacity .25s ease;
}

.grid-btn .btn-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
}

/* ====================
MOBILE RESPONSIVE
==================== */
@media (max-width: 768px) {

.grid-container { 
width: 100%;
max-width: 100%;
margin: 0 auto;
}

.grid-2x2 {
grid-template-columns: 1fr;
margin: 0 auto;
width: 100%;
gap: 5px;
}

.grid-2x2 a {
width: 100%;
flex: none;
}

.grid-2x2 a img {
width: 100%;
height: auto;
display: block;
}

.grid-btn .btn-hover {
display: none;
}

.grid-btn img {
width: 100%;
display: block;
transition: transform 0.2s ease;
}

.grid-btn: active img {
transform: scale(1.03);
}
}

@media (min-width: 769px) {
.grid-2x2 a:hover img {
transform: scale(1.01);
}

.grid-btn:hover .btn-default {
transform: scale(1.01);
}

.grid-btn:hover .btn-hover {
opacity: 1;
transform: scale(1.01);
}
}