.gallery-container {

}

.gallery-container .gallery-container-row.alt-bg {
    background: #eff1f7;
}

.gallery-container .gallery-container-row.alt-bg .gallery-group {
    padding: 48px 0;
}

.gallery-container .gallery-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 48px auto;
    max-width: 1232px;
}

@media (max-width: 767px) {
    .gallery-container .gallery-group {
        justify-content: center !important;
    }
}

.gallery-group .gallery-item {
    display: block;
}

.gallery-container .divider {
    margin: 28px 0;
    width: 100%;
    height: 0;
}

.gallery-container .divider.slate {
    height: 4px;
    background: #eff1f7;
}

/* Wrapper <a> styles */
.gallery-group a {
    position: relative; /* Needed for positioning the shimmer effect */
    display: inline-block; /* Wrap the image tightly */
    text-decoration: none; /* Remove underline */
    overflow: visible; /* Allow box-shadow to render outside bounds */
    border: none !important; /* Ensure no border on the <a> element */
    background-color: lightgrey;
}

/* Shimmer effect applied via ::before */
.gallery-group a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3; /* Place above the image for visibility */
    background: rgba(255, 255, 255, 0.5); /* Base background for the mask */
    mask: linear-gradient(-45deg, transparent 40%, white 50%, transparent 60%) right/150% 100%;
    -webkit-mask: linear-gradient(-45deg, transparent 40%, white 50%, transparent 60%) right/150% 100%;
    mask-size: 150% 100%; /* Narrower shimmer band */
    -webkit-mask-size: 150% 100%;
    opacity: 0; /* Initially hidden */
    pointer-events: none; /* Prevent interference with interactions */
    transition: opacity 0.15s ease-in-out; /* Smooth shimmer appearance */
}


/* Show shimmer effect on hover */
.gallery-group a:hover::before {
    opacity: 1; /* Make shimmer visible on hover */
    animation: shimmer 0.15s linear 1 forwards; /* Ensure shimmer animation is applied */
}

/* Styling for the <img> */
.gallery-group a img {
    display: block; /* Prevent inline gaps */
    position: relative; /* Ensure it respects z-index */
    z-index: 2; /* Keep the image and box-shadow below the shimmer */
    transition: box-shadow ease-in-out 0.15s; /* Smooth hover effect */
}

/* Hover effect for the box-shadow */
.gallery-group a:hover img {
    box-shadow: 0 0 0 2px #949db8; /* Outline effect on hover */
}

/* Proportional mode: same overflow behaviour as fixed */
.ig-thumb--proportional {
    overflow: hidden;
}

/* On small screens let thumbnails fill the available width */
@media screen and (max-width: 565px) {
    .ig-thumb--fixed,
    .ig-thumb--proportional {
        width: 100% !important;
        height: auto !important;
    }
}

/* Keyframes for the shimmer animation */
@keyframes shimmer {
    0% {
        mask-position: right;
        -webkit-mask-position: right;
        opacity: 1; /* Fully visible at the start */
    }
    100% {
        mask-position: left;
        -webkit-mask-position: left;
        opacity: 0; /* Fully disappear at the end */
    }
}

.ig-thumb--contain {
    background-size: contain;
    background-color: #f8f9fa;
}

.ig-thumb--fixed {
    overflow: hidden
}

.ig-thumb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* same behaviour as background-size: cover */
    object-position: center;   /* like background-position: center */
    display: block;
}