.photo-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 37px 40px;
}
.photo-gallery > * {
    grid-column: auto / span 6;
    transition: transform 250ms var(--easingPrinciple);
}
.photo-gallery > *:hover {
    transform: translateY(-5px);
    cursor: pointer;
}
@media (min-width: 768px) {
    .photo-gallery > * {
        grid-column: auto / span 4;
    }
}
@media (min-width: 1024px) {
    .photo-gallery > * {
        grid-column: auto / span 3;
    }
}
.photo-gallery button {
    appearance: none;
    border: none;
    padding: 0;
}
.photo-gallery figure {
    margin: 0;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.photo-gallery img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.photo-gallery-viewer {

}

.photo-gallery-viewer .fancybox__content img {
    box-shadow: 0 0 0 10px white;
    border-radius: 2px;
}
.photo-gallery-viewer .carousel__button {
    border-radius: 50%;
}
.photo-gallery-viewer--circular-light {
    --fancybox-bg: rgba(var(--c-2-c-blue-100-rgb),.6);
    --carousel-button-bg: var(--c-2-c-blue-100);
    --carousel-button-svg-width: 18px;
    --carousel-button-svg-height: 18px;
    --carousel-button-height: 40px;
    --carousel-button-width: 40px;
}
.photo-gallery-viewer--circular-light .fancybox__slide {
    --carousel-button-width: 40px;
    --carousel-button-height: 40px;
    --carousel-button-svg-width: 18px;
    --carousel-button-svg-height: 18px;
}

.photo-gallery-viewer .carousel__button.is-close {
    top: 0;
    right: 0;
}
.photo-gallery-viewer .fancybox__slide {
    margin: 1rem;
}
@media (min-width: 1024px) {
    .photo-gallery-viewer .carousel__button.is-close {
        top: -30px;
        right: -30px;
    }
}