@layer components {
    .ref-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 16px 16px 28px;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-panel);
    }

    .ref-card--white {
        background: var(--color-white);
    }

    .ref-card--tinted {
        background: var(--color-page);
    }

    .ref-card__media,
    .next-ref__media {
        overflow: hidden;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-frame);
        background: var(--color-mint);
    }

    .ref-card__media {
        aspect-ratio: 16 / 10;
    }

    .ref-card__media img,
    .next-ref__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top left;
    }

    .ref-card__tags,
    .ref-card__title,
    .ref-card__text,
    .ref-card__link {
        padding-inline: 8px;
    }

    .ref-card__title {
        font-size: 22px;
        line-height: 1.25;
    }

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

    .ref-card__link {
        margin-top: auto;
        font-weight: 500;
    }

    .next-ref__head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px 48px;
        margin-bottom: 24px;
    }

    .next-ref__card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 24px 48px;
        padding: 16px;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-panel);
        background: var(--color-white);
        color: var(--color-ink);
        text-decoration: none;
    }

    .next-ref__card:hover {
        color: var(--color-ink);
    }

    .next-ref__media {
        flex: 1 1 320px;
        max-width: 520px;
        aspect-ratio: 16 / 9;
    }

    .next-ref__body {
        display: flex;
        flex: 1 1 280px;
        flex-direction: column;
        gap: 10px;
        padding: 8px;
    }

    .next-ref__more {
        color: var(--color-accent-dark);
        font-weight: 500;
        text-decoration: underline;
    }

    .practice-band__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 24px 72px;
    }

    .practice-band__text {
        display: flex;
        flex: 2 1 520px;
        flex-direction: column;
        gap: 16px;
        min-width: 0;
    }

    .practice-band__links {
        display: flex;
        flex: 1 1 340px;
        flex-direction: column;
        gap: 12px;
        min-width: 0;
        font-size: 17px;
    }

    .ref-link {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px;
        border-radius: 16px;
        background: var(--color-slate);
        color: var(--color-white);
        text-decoration: none;
    }

    .ref-link__media {
        flex: none;
        width: 150px;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        border-radius: var(--radius-control);
        background: var(--color-mint);
    }

    .ref-link__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top left;
    }

    .ref-link__body {
        display: flex;
        flex-direction: column;
        gap: 2px;
        line-height: 1.4;
    }

    .ref-link__title {
        color: var(--color-aqua);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .ref-link__text {
        color: var(--color-muted-on-dark);
        font-size: 15px;
    }

    @media (width < 360px) {
        .ref-link__body {
            min-width: 0;
            overflow-wrap: break-word;
            hyphens: auto;
        }
    }

    .facts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
        overflow: hidden;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-card);
        background: var(--color-white);
    }

    .facts__item {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 18px 20px;
    }

    .facts dt {
        color: var(--color-muted);
        font-size: 14px;
    }

    .facts dd {
        font-weight: 600;
        line-height: 1.4;
    }
}