@layer components {
    .promo-slot {
        display: grid;
        gap: var(--space-2);
        background: var(--haze);
        border-block: 2px solid var(--line);
        border-radius: 0;
        padding: var(--space-4);
        margin-block: var(--space-4) var(--space-6);
    }

    .detail-aside .promo-slot {
        margin-block: 0;
    }

    .promo-label {
        font-size: var(--size-micro);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--soil-2);
    }

    .promo-image {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .promo-link {
        display: grid;
        gap: var(--space-1);
        text-decoration: none;
        color: inherit;
    }

    .promo-link:hover .promo-title,
    .promo-link:focus-visible .promo-title {
        text-decoration: underline;
    }

    .promo-title {
        font-weight: 700;
        color: var(--sky-deep);
    }

    .promo-body {
        color: var(--soil-2);
    }
}