@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300&display=swap'); /*Texto Hover*/

*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}


.container-img{
 width: 100%;    
 max-width: 85%;
 margin: auto;
 margin-top: 90px;
 margin-bottom: 60px;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: 250px;
 grid-gap: 10px;
}

.container-img .box-img figure{
 width: 100%;    
 height: 100%;
}

.container-img .box-img img{
 width: 100%;    
 height: 100%;
 object-fit: cover;
}

.container-img .box-img:nth-child(1){ grid-column-start: span 2;  } /*horizontal*/
.container-img .box-img:nth-child(4){ grid-row-start: span 2;     } /*vertical*/
.container-img .box-img:nth-child(12){ grid-row-start: span 2;    }
.container-img .box-img:nth-child(26){ grid-column-start: span 2; } 
.container-img .box-img:nth-child(31){ grid-row-start: span 2;    }
.container-img .box-img:nth-child(39){ grid-row-start: span 2;    }


/******************************************************RESPONSIVE*/

@media screen and (max-width: 800px){
 .container-img{
    width: 95%;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    grid-template-rows: 200px;
 } 

 .container-img.box-img:nth-child(1){
    grid-column-start: span1;
 }  


}

@media screen and (max-width: 500px){
 .container-img{
    width: 90%;
    grid-template-columns: repeat(1, 1fr);
 }

 .container-img.box-img img{
   height: 200px; 
 }

.container-img .box-img:nth-child(1){ grid-column-start: span 1;  } /*horizontal*/
.container-img .box-img:nth-child(4){ grid-row-start: span 1;     } /*vertical*/
.container-img .box-img:nth-child(12){ grid-row-start: span 1;    }
.container-img .box-img:nth-child(26){ grid-column-start: span 1; } 
.container-img .box-img:nth-child(31){ grid-row-start: span 1;    }
.container-img .box-img:nth-child(39){ grid-row-start: span 1;    }


}/*500PX*/

.bloque{
 width: 90%;
 margin: 120px auto;
 margin-bottom: 70px;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 border: 1px solid #333;}

footer{
 margin-top: 2%;}

 /***************************RESPONSIVE****************************/

@media(max-width:400px){ 
.container-img{ margin-top: 460px; }
}

@media(min-width:480px){ 

}

 @media(min-width:600px){   /*****************************************/
  .hover h2{ margin: 40px; }
  .container-img{ margin-top: 180px; }
 }

 @media(min-width:1024px){  /*****************************************/
 footer{ margin-top: 5%; }
 .container-img{ margin-top: 134px; }
 }


 @media(min-width:1280px){  /*****************************************/
  .foto{max-width: 450px; }
   .container-img{ margin-top: 100px; }
 }