@media (max-width: 800px) {

    header {
        padding: 22px 20px;
    }

    .menu {
            display: none;
        }

        .menu.is-open {
            display: flex;
            flex-direction: column;

            position: fixed;
        
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

            background: var(--black);

            padding: 100px 40px 40px;

            z-index: 100;

            gap: 30px;

            transform: none;
        }

        .menu.is-open a {
            font-size: 24px;
            opacity: 1;
        }

        .menu-button {
            display: block;

            font-size: 12px;

            text-transform: uppercase;

            cursor: pointer;

            z-index: 110;

            position: relative;
        }

    .hero {
        min-height: 650px;
    }

    .hero-content {
        padding: 0 20px 40px;
    }

    .hero-title {
            font-size: 42px;

            letter-spacing: -3px;
        }

        .hero-title div:nth-child(2) {
            margin-left: 15px;
        }

    .hero-bottom {
        margin-top: 35px;

        display: block;
    }

    .hero-description {
        font-size: 14px;
    }

    .hero-scroll {
        display: none;
    }

    .intro {
        padding: 100px 20px;
    }

    .intro-text {
        font-size: 42px;

        letter-spacing: -2px;
    }

    .events {
        padding: 0 20px 100px;
    }

    .event {
        height: 65vh;

        min-height: 450px;

        margin-bottom: 35px;
    }

    .event-info {
        left: 22px;
        right: 22px;
        bottom: 25px;

        display: block;
    }

    .event-title {
        font-size: 55px;

        letter-spacing: -3px;

        margin-bottom: 25px;
    }

    .gallery {
        padding: 0 20px 100px;

        display: block;
    }

    .gallery-item {
        margin: 0 0 50px !important;
    }

    .gallery-large img,
    .gallery-medium img,
    .gallery-small img {
        height: 450px;
    }

    .video-section {
        height: 70vh;

        min-height: 450px;

        margin-bottom: 100px;
    }

    .video-content h2 {
            font-size: 38px;

            letter-spacing: -2px;
        }

        .video-content p {
            font-size: 14px;
            max-width: 280px;
        }

    .about {
        padding: 0 20px 100px;

        display: block;
    }

    .about-image {
        width: 75%;
        height: 700px;

        object-fit: cover;

        justify-self: center;
    }

    .about-title {
        font-size: 60px;

        letter-spacing: -3px;
    }

    .contact {
        padding: 100px 20px;
    }

    .contact-title {
            font-size: 42px;

            letter-spacing: -3px;
        }

    .contact-bottom {
        display: block;

        margin-top: 60px;
    }

    .contact-button {
        display: inline-block;

        margin-top: 30px;
    }

    footer {
        padding: 25px 20px;
    }

    .quiz-event,
    .quiz-event.reverse {
        display: flex;

        flex-direction: column;

        gap: 50px;

        padding: 45px 25px;

        min-height: auto;
    }

    .quiz-event.reverse .quiz-event-info,
    .quiz-event.reverse .quiz-poster {
        order: initial;
    }

    .quiz-event-info {
        width: 100%;
    }

    .quiz-event h2 {
            font-size: 58px;

            letter-spacing: -3px;
        }

        .quiz-event:nth-child(4) h2 {
            font-size: 34px;
            white-space: normal;
            word-break: break-word;
            letter-spacing: 0 !important;
        }

    .quiz-poster {
        width: 100%;

        height: auto;
    }

    .quiz-poster img {
            width: auto;

            max-width: 90%;

            height: auto;

            max-height: 650px;
        }

        /* баг: на мобильной 03 карточке текст кнопки "КУПИТЬ" выходил за рамки */
        .quiz-event a.js-order-toggle{
            max-width: 100%;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .live-section {
        padding: 100px 20px;
    }

    .live-title {
        font-size: 64px;
        letter-spacing: -4px;
    }

    .live-subtitle {
        font-size: 16px;
        margin-top: 35px;
    }

    .live-gallery {
        display: flex;

        flex-direction: column;

        gap: 15px;
    }

    .live-photo,
    .live-photo-large,
    .live-photo-small,
    .live-photo-wide {
        width: 100%;
        height: 450px;
    }

    .live-photo-small {
        height: 350px;
    }

    .live-photo-wide {
        height: 400px;
    }

}

@media (max-width: 380px) {
    .quiz-event:nth-child(4) h2 {
        font-size: 22px;
        letter-spacing: 0 !important;
    }
}