img{
    max-width: 100;
    height: auto ;

}
.gallery {
    margin: 0 0.65rem;
}
.gallery-item{
    height: auto;
    margin: 0.5rem;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width:640px){
    .gallery {
display: grid;
grid-template-columns: repeat(2, 1fr) ;
grid-template-rows: repeat(5, 300px);
grid-auto-flow: row dense;
    }
    .gallery-item{
        margin: 0.7rem;
    }
    .gallery-item:first-child{
        grid-row: span 1;
    }
    .gallery-item:nth-child(2){
        grid-column: 2/3;
        grid-row: span 2;
    }
    .gallery-item:nth-child(6),
    .gallery-item:nth-child(8){
        grid-row: span 2;
    }
   }
   @media(min-width: 960px){
    .gallery{
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(3, auto-flow);
    }
    .gallery-item:first-child,
    .gallery-item:nth-child(7),
    .gallery-item:nth-child(8){
        grid-column: span 2;
        grid-row: span 1;

    }
    .gallery-item:nth-child(2){
        grid-column: span 2;
        grid-row: span 2;
    }
   }

   
.gallery-item .img:hover img{
    transform: scale(1.2);
    z-index: 2;
}
.gallery-item .img:hover img{
    transition: 1s;
}