@media (max-width: 1024px) {
    .gallery .row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body {
        font-size: 16px;
    }

    #wrapper {
        padding-block: var(--space-12);
    }

    #wrapper > a {
        margin-bottom: var(--space-8);
    }

    .gallery .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .gallery .row .col {
        gap: var(--space-4);
    }

    .overlay {
        padding: var(--space-3);
    }

    .overlay .viewer {
        padding: var(--space-3);
    }
}

@media (max-width: 520px) {
    :root {
        --page-gutter: 18px;
    }

    #wrapper > h1 {
        font-size: clamp(2.5rem, 13vw, 3.7rem);
    }

    .gallery .row {
        grid-template-columns: minmax(0, 1fr);
    }

    .gallery .row .col,
    .gallery .row .col .fluid-container .item {
        border-radius: var(--radius);
    }
}