*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body,html{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.gallery1{
    display: flex;
}
.gallery1 img{
    object-fit: contain;
    width: 100%;
}

.iner-img{
    display: flex;
}
.gallery {
display: flex;
gap: 10px;
position: relative;
}
.red{
/* background-color: rgb(116, 114, 114); */
width: 300px;
display: block;
}
.red div ,.yellow div{
display: block;
margin: 10px auto;
}
.yellow{
/* background-color: rgb(122, 122, 121); */
width: 300px;
}
.green{
/* background-color: rgb(128, 131, 128); */
width: 600px;
display:block;
position: relative;
}
.image-container {
width: 120px;
height: 120px;
overflow: hidden;
position: relative;
}

.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.gallery-image:hover,.gallery-image:active {
transform: scale(1.1);
}

.abc {
display: block;
position:relative;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
z-index: 100;
width: 300px;
height: 300px;
}
.hover-display {
display:none;
position:relative;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
z-index: 100;
width: 300px;
height: 300px;
}

#hover-img {
width: 300px;
height: 300px;
object-fit:contain;
position:absolute;
top: 0;
left:0;
display: block;
/* margin: auto; */
}
.abc img{
    width: 100%;
    object-fit: contain;
    height:100%;
}
.gl2{
/* margin: auto; */
display: flex;
position:absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
gap: 50px;
justify-content: center;
padding-bottom: 10px;
}
h1{
text-align: center;
font-size: 2rem;
font-style: italic;
margin: 15px 0;
color:#8F0C11;
}
@media(max-width:912px){

.gl2{
gap: 10px;
}

}
@media(max-width:576px){
.gallery{
width:100%;
display: block;
}
.red{
width:100%;
display:flex;
flex-wrap: wrap;
}
.green{
width: 100%;
height: 500px;
}
.yellow{
width:100%;
display:flex;
flex-wrap: wrap;
margin-top: 20px;
}
.abc{
top:40%;
}
.gl2{
gap: 10px;
}
.hover-display{
top:40%;
}
}

@media(max-width:360px){
.image-container {
width: 110px;
height: 110px;
}
}