/*========== MUSICA ==========*/

.musica-panel{
position:relative;
overflow:hidden;
}


.musica-panel .contenido-story{

width:100%;
height:100%;

display:grid;
grid-template-columns:40% 60%;

align-items:center;

padding:0 6vw;

}



.musica-panel .texto-lado{

z-index:5;

}



.musica-panel .texto-lado h2{

font-size:6vw;
line-height:.9;
text-transform:uppercase;

}



.musica-panel .texto-lado p{

max-width:350px;
margin-top:25px;
line-height:1.6;

}




.musica-panel .imagen-lado{

height:80vh;
position:relative;

}



.musica-panel .galeria-fotos{

position:relative;
width:100%;
height:100%;

}



.musica-panel .marco-foto{

position:absolute;
overflow:hidden;

}



.musica-panel .marco-foto:nth-child(1){

width:60%;
height:75%;

right:10%;
top:5%;

z-index:3;

}



.musica-panel .marco-foto:nth-child(2){

width:35%;
height:40%;

left:0;
bottom:10%;

z-index:2;

}



.musica-panel .marco-foto:nth-child(3){

width:30%;
height:35%;

right:0;
bottom:0;

z-index:4;

}



.musica-panel .marco-foto:nth-child(4){

width:25%;
height:30%;

left:20%;
top:0;

z-index:1;

}



.musica-panel img{

width:100%;
height:100%;

object-fit:cover;

filter:grayscale(.2);

transition:
transform 1s cubic-bezier(.22,1,.36,1),
filter .8s ease;

}



.musica-panel .marco-foto:hover img{

transform:scale(1.12);

filter:grayscale(0);

}



/* MOBILE */

@media(max-width:768px){

.musica-panel .contenido-story{

grid-template-columns:1fr;
padding:100px 6vw 40px;

}


.musica-panel .texto-lado h2{

font-size:2.5rem;

}


.musica-panel .imagen-lado{

height:60vh;

}

}