@layer components {

    .split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        margin-top: var(--s-10);
        background: var(--c-surface);
    }

    .split__media {
        min-height: clamp(380px, 46vw, 760px);
        background: var(--c-tile);
    }

    .split__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .split__body {
        display: grid;
        align-content: center;
        justify-items: start;
        gap: var(--s-4);
        padding: var(--s-9) clamp(24px, 7vw, 128px);
    }

    .split__title {
        max-width: 16ch;
        font-size: var(--t-2xl);
    }

    .split__text {
        max-width: 46ch;
        font-size: var(--t-md);
        color: var(--c-muted);
    }

    .split__list {
        display: grid;
        gap: var(--s-2);
        margin-block: var(--s-1) var(--s-2);
    }

    .split__list li {
        display: flex;
        align-items: baseline;
        gap: var(--s-3);
    }

    .split__list .icon {
        position: relative;
        top: 3px;
    }

    .split__steps {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-2);
        margin-block: var(--s-1) var(--s-2);
    }

    .split__steps li {
        display: flex;
        align-items: center;
        gap: var(--s-2);
        min-height: 40px;
        padding-inline: var(--s-3) var(--s-4);
        border: 1px solid var(--c-line-strong);
        border-radius: var(--r-pill);
        font-size: var(--t-sm);
    }

    .split__n {
        font-family: var(--f-display);
        font-size: var(--t-md);
        color: var(--c-accent);
    }

    .split .btn {
        margin-top: var(--s-3);
    }

    .split--flip .split__media {
        order: 2;
    }

    .split--dark {
        background: var(--c-dark);
        color: var(--c-dark-ink);
    }

    .split--dark .eyebrow,
    .split--dark .split__text {
        color: var(--c-dark-muted);
    }

    @media (max-width: 899px) {
        .split {
            grid-template-columns: minmax(0, 1fr);
        }

        .split__media {
            min-height: 0;
            aspect-ratio: 4 / 3;
        }

        .split--flip .split__media {
            order: 0;
        }

        .split__body {
            padding: var(--s-8) var(--gutter);
        }
    }

}

@layer components {

    .quotes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--s-5);
    }

    .quote {
        display: grid;
        grid-template-rows: auto 1fr auto auto;
        gap: var(--s-4);
        padding: var(--s-6);
        border-radius: var(--r-1);
        background: var(--c-page);
    }

    .quote__text {
        font-size: var(--t-lg);
        line-height: 1.32;
    }

    .quote__by {
        display: grid;
        font-size: var(--t-sm);
    }

    .quote__name {
        font-weight: 500;
    }

    .quote__meta {
        color: var(--c-muted);
    }

    .quote__product {
        display: flex;
        align-items: center;
        gap: var(--s-3);
        padding-top: var(--s-4);
        border-top: 1px solid var(--c-line);
        font-size: var(--t-sm);
        font-weight: 500;
    }

    .quote__product:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .quote__thumb {
        flex: none;
        width: 48px;
        height: 48px;
        overflow: hidden;
        border-radius: var(--r-1);
        background: var(--c-tint, var(--c-tile));
    }

    .quote__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    @media (max-width: 1023px) {
        .quotes {
            display: flex;
            margin-inline: calc(var(--gutter) * -1);
            padding-inline: var(--gutter);
            overflow-x: auto;
            scroll-padding-inline: var(--gutter);
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
        }

        .quote {
            flex: none;
            width: min(82vw, 380px);
            scroll-snap-align: start;
        }
    }

}