@media (max-width: 2560px) {
}
@media (max-width: 1440px) {
}
@media (max-width: 1290px) {
}
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
   .foto{
      grid-template-rows: 30% 10% 15% 1fr;
   }
}
@media (max-width: 600px) {
    .foto{
        display: grid;   
        background-image: linear-gradient(rgb(51, 43, 58), rgb(45, 34, 55));
        width: 100vw;
        height: 100vh;
        grid-template-rows: repeat(6, 1fr);
     }
     .foto.izquierda, .foto.derecha {
        grid-template-columns: 1fr, 1fr;
      }
      .foto-cantante{
        grid-column: 1/3;
        grid-row: 1;
        height: 70vh;
        background-position: 80%;
      }

     .titulo.izquierda, .titulo.derecha{
        display: flex;
        justify-content: flex-start;
        grid-row: 2/3;
        grid-column: 1/3;
        margin-top: 5vh;
        margin-left: 6vw;
     }
     
     .subtitulo{
        grid-row: 3/4;
        margin-top: 5px;        
     }
     
     .subtitulo.izquierda, .subtitulo.derecha{
        display: flex;
        justify-content: flex-start;
        grid-column: 1/3;
        margin-left: 6vw;
     }
     button{
        width: 120px;
     }

     footer .contacto h2{
        font-family: 'Montserrat', sans-serif;
        color: white;
        font-size: 14px;
        margin-bottom: 10px;
      }
     
      .botones-foto.izquierda{
         margin-left: 6vw;
      }
      .foto-michelle, .foto-cristina{
         background-position-x: 40% ;
     }
     .foto-julie{
      background-position-x: 60%;
      background-position-y: 4% ;
   
     }
}


@media (min-width: 2560px) {

}
@media (min-width: 1440px) {
 
   .foto{
      height: 52vh;
      grid-template-rows: 17vh 7vh 7vh 1fr 15vh ;
   }

    .foto-paulina, .foto-daniela, .foto-david{
        background-position-y: 10%;
     }
    .foto-stela, .foto-michelle, .foto-gustavo{
        background-position-y: 1%;
     }
    

     .foto-javier, .foto-julie{
        background-position-y: 30%;
     }

     
}
@media (min-width: 1290px) {
}
@media (min-width: 1024px) {

}

@media (min-width: 769px) {
   .foto{
      grid-template-rows: 30% 15% 20% 1fr;
   }

}
@media (min-width: 600px) {
}