.gallery-container {

}

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

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

.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 */
}

/* 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 {
    max-width: 300px; /* Ensure correct size for the image */
    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 */
}

/* Media query for responsiveness */
@media screen and (max-width: 565px) {
    .gallery-group a img {
        max-width: 100%;
        max-height: 100%;
    }
}

/* 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 */
    }
}