/* Adapt to the actual editorial column rather than the viewport width. */
.e99bcb-placement { container: e99-bcb / inline-size; }

@container e99-bcb (min-width: 320px) {
    .e99bcb-card:has(> .e99bcb-value) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(112px, 34cqi, 190px);
        column-gap: 10px;
        align-items: center;
    }

    .e99bcb-card:has(> .e99bcb-value) > .e99bcb-heading,
    .e99bcb-card:has(> .e99bcb-value) > .e99bcb-validity,
    .e99bcb-card:has(> .e99bcb-value) > .e99bcb-source {
        grid-column: 1 / -1;
    }

    .e99bcb-card:has(> .e99bcb-value) > .e99bcb-value {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        font-size: clamp(28px, 7.5cqi, 36px);
    }

    /* A dedicated cell keeps decoration and live text from overlapping.
       CSS content is empty: the artwork is purely decorative. */
    .e99bcb-card:has(> .e99bcb-value)::after {
        content: "";
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        height: clamp(72px, 24cqi, 112px);
        background: url("images/billetes-bcb.png?v=1.3.0") right center / contain no-repeat;
        filter: drop-shadow(0 3px 4px rgb(30 50 35 / 16%));
        pointer-events: none;
    }
}