.Modal {
    position: fixed;
    inset: 0;
    width: 100%;
    background: rgba(0, 0, 0, .89);
    z-index: 10000;
    animation: fade-in .2s ease-in-out;
    display: flex;
    overflow: auto;
    padding: 40px;
    height: 100dvh
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@supports((-webkit-backdrop-filter: none) or (backdrop-filter:none)) {
    .Modal {
        background: rgba(0, 0, 0, .69);
        -webkit-backdrop-filter: blur(12.5px);
        backdrop-filter: blur(12.5px)
    }
}

.Modal-content {
    position: relative;
    margin: auto
}

.Modal-close {
    position: absolute;
    cursor: pointer;
    color: var(--color-white)
}

.Modal-close.desktop {
    top: -16px;
    right: -32px
}

.Modal-close.mobile {
    display: none !important;
    top: 16px;
    right: 16px
}

@media(max-width: 768px) {
    .Modal {
        padding: 0;
        background-color: var(--color-black-30)
    }

    .Modal-close.desktop {
        display: none !important
    }

    .Modal-close.mobile {
        display: block !important
    }
}