.photo-grid {
    --_photo-grid-cols: var(--photo-grid-cols, 4);
    --_photo-grid-gutter: var(--photo-grid-gutter, 2rem);

    display: grid;
    grid-template-columns: repeat(var(--_photo-grid-cols), 1fr);
    grid-auto-flow: dense;
    width: 100%;
    gap: var(--_photo-grid-gutter);

    @media (max-width: 1050px) {
        --photo-grid-cols: 2;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--radius-normal);
    }

    img[data-ratio="horizontal"] {
        grid-column: span 2;
    }

    scrollbar-width: none;

    &::webkit-scrollbar {
        width: none;
    }
}

@media (max-width: 768px) {
    .photo-grid-section {
        padding-inline: 0;
    }

    .photo-grid {
        display: flex;
        overflow-x: scroll;
        height: 600px;
        padding-inline: var(--site-padding);
        padding-block: 2rem;

        img {
            width: auto;
            max-width: none;
            flex: 0 0 auto;
        }
    }

    .photo-grid-section::before {
        position: sticky;
        content: '';
        aspect-ratio: 757 / 325;
        transform: scalex(-1) translatey(60%);
        background-image: url('/wp-content/themes/frontlinetheme/assets/img/Arrow.png');
        width: 100px;
        bottom: 100%;
        left: 0;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
        display: flex;
    }

    .photo-grid-section::after {
        position: sticky;
        content: '';
        aspect-ratio: 514 / 331;
        background-image: url('/wp-content/themes/frontlinetheme/assets/img/Loopy-arow.png');
        width: 100px;
        top: 100%;
        left: 100%;
        transform: translatex(calc(var(--site-padding) - 20px)) translatey(-100%);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
        display: flex;
    }
}