@layer components {
    .card {
        display: flex;
        flex-direction: column;
        border-radius: var(--radius-card);
    }

    .card--md {
        gap: 10px;
        padding: 24px;
    }

    .card--sm {
        gap: 8px;
        padding: 22px;
    }

    .card--lg {
        gap: 12px;
        padding: 26px;
    }

    .card--xl {
        gap: 16px;
        padding: clamp(24px, 3vw, 36px);
    }

    .card--white {
        border: 1px solid var(--color-line);
        background: var(--color-white);
    }

    .card--tinted {
        border: 1px solid var(--color-line);
        background: var(--color-page);
    }

    .card__badge {
        align-self: flex-start;
    }

    .card__title {
        font-size: 20px;
        line-height: 1.3;
    }

    .card--sm .card__title {
        font-size: 19px;
    }

    .card--lg .card__title {
        font-size: 22px;
    }

    .icon-tile + .card__title {
        margin-top: 4px;
    }

    .card > p {
        font-size: 16px;
    }

    .card.dark > p {
        color: var(--fg-muted);
    }

    .card__link {
        margin-top: auto;
        padding-top: 6px;
        font-size: 15px;
        font-weight: 500;
    }

    .note-bar {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 18px 22px;
        border-radius: var(--radius-card);
        background: var(--color-mint);
    }

    .note-bar .icon-tile {
        color: var(--color-accent);
    }

    .panel {
        display: flex;
        flex-direction: column;
        border-radius: var(--radius-card);
    }

    .panel--sm {
        gap: 12px;
        padding: 22px;
    }

    .panel--md {
        gap: 14px;
        padding: clamp(22px, 3vw, 30px);
    }

    .panel--lg {
        gap: 16px;
        padding: clamp(22px, 3vw, 32px);
    }

    .panel--white {
        border: 1px solid var(--color-line);
        background: var(--color-white);
    }

    .panel--mint {
        background: var(--color-mint);
    }

    .panel--tinted {
        border: 1px solid var(--color-line);
        background: var(--color-page);
    }

    .panel__title {
        font-size: 20px;
        font-weight: 600;
    }

    .panel--sm .panel__title {
        font-size: 18px;
    }

    .panel--lg .panel__title {
        font-size: 22px;
    }

    .link-card {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 22px;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-card);
        background: var(--color-white);
        color: var(--color-ink);
        text-decoration: none;
    }

    .link-card:hover {
        color: var(--color-ink);
    }

    .link-card__title {
        font-size: 19px;
        font-weight: 600;
    }

    a.link-card .link-card__title {
        color: var(--color-accent-dark);
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .link-card__text {
        font-size: 16px;
    }

    .dark .link-card {
        gap: 10px;
        border: 0;
        background: var(--color-slate);
        color: var(--color-white);
    }

    .dark .link-card .icon-tile--mint {
        background: var(--color-ink);
    }

    .dark a.link-card .link-card__title {
        color: inherit;
        text-decoration: none;
    }

    .dark a.link-card:hover {
        color: var(--color-aqua);
    }

    .dark .link-card__text {
        color: var(--fg-muted);
    }
}