.free-lesson-popup {
    z-index: 10060;
}

.free-lesson-popup .modal-dialog {
    width: min(420px, calc(100vw - 2rem));
    max-width: none;
    margin: 1rem auto;
}

.free-lesson-popup .modal-content {
    position: relative;
    overflow: visible;
    border: 0;
    border-radius: 24px;
    background: transparent;
    box-shadow: 0 28px 80px rgba(3, 24, 74, .38);
}

.free-lesson-popup__link {
    display: block;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    outline: 0;
    transition: transform .2s ease, box-shadow .2s ease;
}

.free-lesson-popup__link:hover,
.free-lesson-popup__link:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 18px 45px rgba(3, 24, 74, .28);
}

.free-lesson-popup__link:focus-visible {
    outline: 4px solid #ffb20f;
    outline-offset: 4px;
}

.free-lesson-popup__link img {
    display: block;
    width: 100%;
    max-height: calc(100vh - 2rem);
    object-fit: contain;
}

.free-lesson-popup__close {
    position: absolute;
    z-index: 2;
    top: -.8rem;
    right: -.8rem;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #092f86;
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 8px 24px rgba(3, 24, 74, .3);
    transition: transform .2s ease, background-color .2s ease;
}

.free-lesson-popup__close:hover,
.free-lesson-popup__close:focus-visible {
    background: #ff9d00;
    color: #082b73;
    transform: scale(1.06);
}

.free-lesson-popup__close:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.modal-backdrop.free-lesson-popup-backdrop {
    z-index: 10050;
    background: #04173f;
    backdrop-filter: blur(7px);
}

.modal-backdrop.free-lesson-popup-backdrop.show {
    opacity: .68;
}

@media (max-width: 575.98px) {
    .free-lesson-popup .modal-dialog {
        width: min(360px, calc(100vw - 1.5rem));
        margin: .75rem auto;
    }

    .free-lesson-popup .modal-content,
    .free-lesson-popup__link {
        border-radius: 18px;
    }

    .free-lesson-popup__close {
        top: -.55rem;
        right: -.4rem;
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .free-lesson-popup,
    .free-lesson-popup__link,
    .free-lesson-popup__close {
        transition: none !important;
    }
}