@layer blocks {
    .voucher-status {
        max-width: 40rem;
    }

    .voucher-status-facts {
        display: grid;
        gap: calc(var(--space-unit) * 0.5);
        margin: 0 0 calc(var(--space-unit) * 1.5);
    }

    .voucher-status-facts dt {
        color: var(--tone-muted);
        font-family: var(--font-ui);
        font-size: 0.875rem;
    }

    .voucher-status-facts dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .voucher-status-state {
        font-weight: 600;
    }

    .voucher-status-message {
        margin: 0 0 calc(var(--space-unit) * 1.5);
        font-weight: 600;
    }
}