.voucher-layout {
    display: grid;

    grid-template-columns:
        390px
        minmax(0,1fr);

    gap: 13px;

    margin-top: 13px;
}


.voucher-form {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 11px;

    padding: 15px;
}


.voucher-actions {
    display: flex;
    justify-content: flex-end;

    padding: 0 15px 15px;
}


.voucher-modal {
    position: fixed;
    inset: 0;

    z-index: 300;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 25px;

    background:
        rgba(2,10,18,.82);

    backdrop-filter:
        blur(5px);
}


.voucher-modal.show {
    display: flex;
}


.voucher-modal-card {
    width:
        min(720px,95vw);

    max-height:
        85vh;

    overflow-y: auto;

    border:
        1px solid
        var(--src-border);

    border-radius: 13px;

    background:
        var(--src-card);

    box-shadow:
        0 25px 90px
        rgba(0,0,0,.45);
}


.voucher-codes {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 8px;

    padding: 15px;
}


.voucher-code {
    padding: 12px;

    border:
        1px solid
        rgba(31,210,197,.15);

    border-radius: 9px;

    background:
        rgba(31,210,197,.04);

    color:
        var(--src-primary);

    text-align: center;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .6px;
}


@media(max-width:1000px){

    .voucher-layout {
        grid-template-columns:1fr;
    }

}


@media(max-width:600px){

    .voucher-form {
        grid-template-columns:1fr;
    }

    .voucher-codes {
        grid-template-columns:1fr;
    }

}