.mk-modal {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;
    z-index: 10;
    padding: 0.5em;

    display: grid;
    justify-content: center;
    align-items: center;
}

body>div~div~div.mk-modal {
    background: #0006 !important;
}

.mk-modal .container {
    position: relative;
    max-width: 60em;
    max-height: 90vh;
    padding: 0.5em;
    overflow-y: auto;
    background: #393939;
}

.mk-modal .closebtn {
    position: absolute;
    right: 2em;
    top: 1em;
}

.mk-modal .mk-close {
    display: grid;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.mk-modal .mk-close::before,
.mk-modal .mk-close::after {
    content: "";
    position: absolute;
    margin-top: 50%;

    width: 32px;
    height: 2px;
    background: #fff;
    transform: rotate(45deg);
}

.mk-modal .mk-close::after {
    transform: rotate(-45deg);
}

.mk-modal .columns {
    display: grid;
}

@media (min-width: 767px) {
    .mk-modal .container {
        padding: 1.5em;
    }

    .mk-modal .columns {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}