@layer components {

    .checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
        gap: var(--s-7) clamp(40px, 6vw, 104px);
        align-items: start;
        max-width: 1280px;
        margin-inline: auto;
        padding: var(--s-7) var(--gutter) 0;
    }

    .checkout__main {
        display: grid;
        justify-items: start;
        gap: var(--s-4);
    }

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

    .checkout__text {
        display: grid;
        gap: var(--s-4);
        max-width: 60ch;
        font-size: var(--t-md);
        color: var(--c-muted);
    }

    .checkout__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-3);
        margin-top: var(--s-3);
    }

    .checkout .summary {
        margin-top: 0;
    }

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

}