.image-gallery {
width: 100%;
margin: 0;
padding: 0;
}  .gallery-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
} @media (min-width: 768px) {
.gallery-grid {
grid-template-columns: 1fr;
}
} @media (min-width: 992px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
} @media (min-width: 1200px) {
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
} .gallery-item {
position: relative;
overflow: hidden;
background: #f5f5f5;
} .gallery-item img {
display: block;
width: 100%;
height: auto;
transition: transform 0.3s ease;
object-fit: cover;
} .gallery-item .zoom:hover img {
transform: scale(1.05);
} .gallery-item .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
opacity: 0;
transition: opacity 0.3s ease;
} .gallery-item .zoom:hover .overlay {
opacity: 1;
} .gallery-item .title {
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
background: rgba(0,0,0,0.3);
color: #fff;
padding: 4px 8px;
font-size: 0.9rem;
line-height: 1.2;
opacity: 0;
transition: opacity 0.3s ease;
} .gallery-item:hover .title {
opacity: 1;
} .image-gallery ul,
.image-gallery li {
margin: 0;
padding: 0;
list-style: none;
}