@layer components {
    .modal {
        border: 0;
        border-radius: var(--radius-l);
        padding: var(--space-6);
        max-width: min(92vw, 34rem);
        box-shadow: var(--shadow-3);
    }

    .modal::backdrop {
        background: rgb(36 29 23 / 0.55);
    }

    .modal-title {
        margin-block-end: var(--space-3);
    }

    .modal-actions {
        display: flex;
        gap: var(--space-2);
        justify-content: end;
        margin-block-start: var(--space-5);
    }
}