@layer layout {
    .nur-container {
        width: 100%;
        max-width: 1200px;
        margin-inline: auto;
        padding-inline: var(--nur-gutter);
    }

    .nur-section {
        padding-block: var(--nur-space-7);
    }

    .nur-section--alt {
        background: var(--nur-surface-alt);
    }

    .nur-section--dark {
        background: var(--nur-primary-strong);
        color: #fff;
    }

    .nur-section--dark h2,
    .nur-section--dark h3 {
        color: #fff;
    }

    .nur-section__head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--nur-space-4);
        margin-bottom: var(--nur-space-5);
    }

    .nur-eyebrow {
        display: block;
        margin-bottom: var(--nur-space-2);
        color: var(--nur-gold-600);
        font-size: var(--nur-text-xs);
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .nur-container--pt {
        padding-top: var(--nur-space-4);
    }

    .nur-eyebrow--light {
        color: var(--nur-gold-300);
    }

    .nur-stack > * + * {
        margin-top: var(--nur-space-4);
    }

    .nur-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--nur-space-4);
    }

    /* horizontal swipe row: the mobile-first answer to carousels */
    .nur-rail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        gap: var(--nur-space-3);
        margin-inline: calc(var(--nur-gutter) * -1);
        padding-inline: var(--nur-gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--nur-gutter);
        scrollbar-width: none;
    }

    .nur-rail::-webkit-scrollbar {
        display: none;
    }

    .nur-rail > * {
        scroll-snap-align: start;
    }

    /* always a swipe row, even on desktop, for long lists such as reviews */
    .nur-rail--scroll {
        padding-bottom: var(--nur-space-2);
    }

    .nur-carousel {
        position: relative;
    }

    .nur-carousel__nav {
        position: absolute;
        top: 50%;
        z-index: 2;
        display: none;
        place-items: center;
        width: 48px;
        height: 48px;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        color: var(--nur-primary-strong);
        box-shadow: var(--nur-shadow);
        transform: translateY(-50%);
    }

    .nur-carousel__nav svg {
        width: 24px;
        height: 24px;
    }

    .nur-carousel__nav--prev {
        left: calc(var(--nur-space-3) * -1);
    }

    .nur-carousel__nav--next {
        right: calc(var(--nur-space-3) * -1);
    }

    @media (min-width: 768px) {
        .nur-section {
            padding-block: var(--nur-space-8);
        }

        .nur-grid--2,
        .nur-grid--3 {
            grid-template-columns: repeat(2, 1fr);
        }

        .nur-rail {
            grid-auto-columns: 46%;
        }
    }

    @media (min-width: 1024px) {
        .nur-grid--3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .nur-rail {
            grid-auto-flow: row;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-columns: auto;
            overflow: visible;
            margin-inline: 0;
            padding-inline: 0;
        }

        .nur-rail--scroll {
            grid-auto-flow: column;
            grid-template-columns: none;
            grid-auto-columns: calc((100% - var(--nur-space-3) * 2) / 3);
            overflow-x: auto;
            margin-inline: 0;
            padding-inline: 0;
        }

        .nur-carousel__nav {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
        }
    }
}