.gallerdiv{
    /* padding: 55px 70px; */
    padding: 55px 70px;
    max-width: 1200px;
    width: 100%;
    margin: auto;
    height:1000px ;
    display: grid;
    gap: 10px;
    grid-template-rows: repeat(10,1fr);
    grid-template-columns:  repeat(10,1fr);
    overflow: hidden;
    background-color: var(--sep);
}

.gallerdiv :hover{
    /* transform: scaleX(1.4) scaleY(1.4); */
    transform: scale(1.2);
    border: 3px solid var(--golden);
    z-index: 10;
}
.gallerdiv img{
    object-fit: fill;
    width: 100%; 
    height: auto; 
    display: block;
}
.gallerdiv div{
    object-fit:contain;
    width: auto; 
    height: 100%; 
    display: block;
}
/* .gallerdiv img:hover{
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit:fill;
    width: auto; 
    height: 100%; 
    display: block;
} */
.gallerdiv img:hover{
    background-color: var(--black);
    object-fit: contain;
    width: 100%; 
    height: 100%; 
    display: block;
}
.galimg1{
    grid-area: 1/1/3/3;
    background-color:var(--black);
    overflow: hidden;
}
.galimg2{
    grid-area: 1/3/3/6;
    background-color: var(--black);
    overflow: hidden;
}
.galimg3{
    grid-area: 1/6/3/8;
    background-color: #5da1d2;
    overflow: hidden;
}
.galimg4{
    grid-area: 1/8/3/11;
    background-color: #51c162;
    overflow: hidden;
}
.galimg5{
    grid-area: 3/1/5/4;
    background-color: #c15198;
    overflow: hidden;
}
.galimg6{
    grid-area: 3/4/5/7;
    background-color: #7551c1;
    overflow: hidden;
}
.galimg7{
    grid-area: 3/7/5/9;
    background-color: #9fc151;
    overflow: hidden;
}
.galimg8{
    grid-area: 3/9/5/11;
    background-color: #7551c1;
    overflow: hidden;
}
.galimg9{
    grid-area: 5/1/7/3;
    background-color: #D2B45D;
    overflow: hidden;
}
.galimg10{
    grid-area: 5/3/7/6;
    background-color: #d25d5d;
    overflow: hidden;
}
.galimg11{
    grid-area: 5/6/7/8;
    /* background-color: #5da1d2; */
    overflow: hidden;
}
.galimg12{
    grid-area: 5/8/7/11;
    background-color: #51c162;
    overflow: hidden;
}
.galimg13{
    grid-area: 7/1/9/4;
    background-color: #c15198;
    overflow: hidden;
}
.galimg14{
    grid-area: 7/4/9/6;
    background-color: #7551c1;
    overflow: hidden;
}
.galimg15{
    grid-area: 7/6/9/9;
    background-color: #9fc151;
    overflow: hidden;
}
.galimg16{
    grid-area: 7/9/9/11;
    background-color: #7551c1;
    overflow: hidden;
}
.galimg17{
    grid-area: 9/1/11/3;
    background-color: #D2B45D;
    overflow: hidden;
}
.galimg18{
    grid-area: 9/3/11/5;
    background-color: #d25d5d;
    overflow: hidden;
}
.galimg19{
    grid-area: 9/5/11/8;
    background-color: #5da1d2;
    overflow: hidden;
}
.galimg20{
    grid-area: 9/8/11/11;
    background-color: #51c162;
    overflow: hidden;
}

/* for 2*2 images */

.galimg1:hover,
.galimg3:hover,
.galimg7:hover,
.galimg8:hover,
.galimg9:hover,
.galimg11:hover,
.galimg14:hover,
.galimg16:hover,
.galimg17:hover,
.galimg18:hover{
    transform: scaleX(1.4) scaleY(1.4);
}

/* for 3*2 images */

.galimg2:hover,
.galimg4:hover,
.galimg5:hover,
.galimg6:hover,
.galimg10:hover,
.galimg12:hover,
.galimg13:hover,
.galimg15:hover,
.galimg19:hover,
.galimg20:hover{
    transform: scaleX(1.4) scaleY(1.5);
}
/* MEDIA QUERY */
@media screen and (min-width: 1000px) and (max-width: 1300px) {
    .galdiv {
        padding: 55px 50px; 
        max-width: 1110px;
    }
    
    /* for 2*2 images */

.galimg1:hover,
.galimg3:hover,
.galimg7:hover,
.galimg8:hover,
.galimg9:hover,
.galimg11:hover,
.galimg14:hover,
.galimg16:hover,
.galimg17:hover,
.galimg18:hover{
    transform: scaleX(1.2) scaleY(1.2);
}

/* for 3*2 images */

.galimg2:hover,
.galimg4:hover,
.galimg5:hover,
.galimg6:hover,
.galimg10:hover,
.galimg12:hover,
.galimg13:hover,
.galimg15:hover,
.galimg19:hover,
.galimg20:hover{
    transform: scaleX(1.2) scaleY(1.3);
}
}