.modal.svelte-bxlyjx {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: var(--z-index);
    padding: var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center
}

.overlay.svelte-bxlyjx {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #0e1224b3
}

.card.svelte-bxlyjx {
    border-radius: var(--ds-radius-md, var(--border-radius-md));
    background-size: cover;
    background-position: center;
    position: relative;
    width: 100%;
    min-width: 200px;
    max-width: 400px;
    max-height: calc(100% - 4rem);
    display: flex;
    flex-direction: column;
    background: var(--grey-600);
    color: var(--grey-200);
    overflow: hidden
}

.header.svelte-bxlyjx {
    display: flex;
    justify-content: space-between;
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    padding-right: var(--spacing-4);
    padding-left: var(--spacing-4)
}

.content.svelte-bxlyjx {
    padding-right: var(--spacing-4);
    padding-left: var(--spacing-4);
    display: flex;
    flex-direction: column;
    padding-bottom: var(--spacing-4);
    gap: var(--spacing-4)
}

.footer-buttons.svelte-bxlyjx {
    padding-right: var(--spacing-4);
    padding-left: var(--spacing-4);
    padding-bottom: var(--spacing-4)
}