.modal-container {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-index);
    background: rgba(10,10,10,0.9);

    .modal {
        --width: auto;
        --height: auto;
        width: var(--width);
        height: var(--height);

        .header {
            border-radius: 1rem 1rem 0 0;
        }

        .body:first-child {
            border-radius: 1rem;
        }

        .body:not(first-child) {
            border-radius: 0 0 1rem 1rem;
        }

        .header {
            border-bottom: $modal-header-border;
            padding: .5rem;
            text-align: center;
            background: $modal-header-bg;
            text-transform: uppercase;
            letter-spacing: .1rem;
            line-height: 3.8rem;
        }

        .body {
            max-height: 75vh;
            overflow: auto;
            padding: 2.5rem 2rem 1.5rem 2rem;
            background: $modal-body-bg;
        }
    }
}

