/* Hover overlay effect: black box at bottom showing title */
.image-hover {
position: relative;
overflow: hidden;
}
.image-hover .item-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 8px;
text-align: center;
opacity: 0;
transition: opacity 0.3s ease;
font-size: 1rem;
}
.image-hover:hover .item-overlay {
opacity: 1;
}

/* Top Section */
.first-item {
background-color: #fff;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.first-item img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.section-title, .section-subtitle {
text-align: center;
}
@media (min-width: 768px) {
.section-title {
    padding-top: 4rem;
}
}

/* Masonry Gallery */
.grid {
margin: 0 auto;
}
.grid-sizer,
.grid-item {
width: 30%; /* Desktop: approx. three columns */
}
.grid-item--double {
width: 60% !important;
}
.grid-item {
background-color: #fff;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.grid-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Responsive: Two columns on mobile/tablet */
@media (max-width: 768px) {
.grid-sizer,
.grid-item {
    width: 48%;
}
.grid-item--double {
    width: 98% !important;
}
}
@media (max-width: 576px) {
.grid-sizer,
.grid-item {
    width: 48%;
}
.grid-item--double {
    width: 98% !important;
}
}

/* Medium Zoom Customization:
    When zoomed, force the image to appear on a white background */
.medium-zoom-image {
background: white;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}