.promo-box h1 {
    max-width: 820px;
    margin-bottom: 60px;
    font-size: 40px;
}
.info-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 20px;
    .left-box {
        .info {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            margin-bottom: 24px;
            >div {
                position: relative;
                margin-inline: 10px;
                padding: 10px;
                background: var(--f5);
                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    /* right: calc(100% + 10px); */
                    left: -11px;
                    width: 2px;
                    height: 100%;
                    background: var(--2);
                }
                span {
                    line-height: 1.4;
                    letter-spacing: 0.032px;
                    margin-bottom: 6px;
                    display: inline-block;
                    color: var(--5);
                }
                p {
                    font-weight: 500;
                    line-height: 1;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                }
            }
        }
        .content {
            display: grid;
            grid-template-columns: 260px 1fr;
            align-items: start;
            column-gap: 20px;
            margin-bottom: 40px;
            >* {
                grid-column: 1/-1;
            }
            h2 {
                width: fit-content;
                padding: 4px 10px;
                margin-bottom: 14px;
                font-weight: 500;
                line-height: 1.4;
                letter-spacing: 0.032px;
                font-size: 14px;
                color: var(--white);
                background: var(--2);
                &:has(+ ul) {
                    grid-column: 1/2;
                    +ul {
                        grid-column: 2/3;
                    }
                }
            }
            strong {
                font-weight: 600;
                font-size: inherit;
                letter-spacing: inherit;
                color: inherit;
            }
            p {
                margin-block: 20px 20px;
                font-size: 20px;
                letter-spacing: 0.2px;
                a {
                    margin-block: 20px 20px;
                    font-size: 20px;
                    letter-spacing: 0.2px;
                    text-decoration: underline;
                }
            }
            img {
                margin-block: 40px 20px;
            }
            ul,
            ol {
                display: flex;
                flex-direction: column;
                gap: 10px;
                list-style: none;
                li {
                    padding-left: 24px;
                    font-weight: 700;
                    line-height: 1.4;
                    letter-spacing: 0.032px;
                    color: var(--5);
                    background: linear-gradient(var(--2)) left 7px top 8px / 6px 6px no-repeat;
                }
            }
        }
        .program {
            display: flex;
            flex-direction: column;
            gap: 28px;
            margin-inline: -100vw;
            padding: 60px 100vw;
            .bg {
                width: 100vw;
                left: calc(100vw - (100vw - 1240px) / 2);
                z-index: -1;
                background: url(../images/events/bg1.webp) top -410px center / 100% auto no-repeat;
            }
            h2 {
                width: fit-content;
                padding: 10px 20px 10px 0;
                font-size: 30px;
                font-weight: 500;
                line-height: 1.4;
                letter-spacing: 0.2px;
                color: var(--white);
                border-bottom: 1px solid var(--white);
            }
            >div {
                display: grid;
                grid-template-columns: 138px 1fr;
                align-items: start;
                gap: 20px;
                >p {
                    padding: 5px 20px;
                    font-weight: 300;
                    line-height: 1.4;
                    letter-spacing: 0.2px;
                    color: var(--white);
                    border: 1px solid var(--white);
                    border-left: none;
                }
                >div:not(&:last-of-type > div) {
                    padding-bottom: 10px;
                    border-bottom: 1px solid var(--white);
                }
                >div {
                    p {
                        line-height: 1.4;
                        letter-spacing: 0.2px;
                        color: #e9ccd2;
                        &.name {
                            font-size: 20px;
                            font-weight: 600;
                            letter-spacing: 0.2px;
                            color: var(--white);
                        }
                    }
                }
            }
        }
    }
    >.red-btn,
    .done {
        position: sticky;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 80px;
        height: 64px;
        z-index: 2;
        margin-bottom: 60px;
        border: 1px solid var(--white);
        background: var(--2);
        box-shadow: 0 59px 16px 0 rgba(97, 0, 10, 0.00), 0 38px 15px 0 rgba(97, 0, 10, 0.03), 0 21px 13px 0 rgba(97, 0, 10, 0.10), 0 9px 9px 0 rgba(97, 0, 10, 0.17), 0 2px 5px 0 rgba(97, 0, 10, 0.20);
    }
    .red-btn {
        width: 100%;
        border-color: var(--white);
    }
    .done {
        width: 100%;
        background: var(--5);
        color: var(--white);
    }
}
.our-team {
    padding-block: 80px 100px;
    h2 {
        margin-bottom: auto;
        font-weight: 500;
        letter-spacing: 0.2px;
        &::after {
            background: var(--2);
        }
    }
    .slider .controls {
        .arrow-l, .arrow-r {
            border-color: var(--text);
        }
    }
}
.video-report,
.gallery {
    margin-block: 100px;
    h2::after {
        background: var(--2);
    }
}
.gallery {
    overflow: hidden;
    .slides {
        display: flex;
        gap: 20px;
        margin-block: 50px 40px;
    }
    .slide {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: 100%;
        flex: 0 0 calc(50% - 10px);
        &:first-child .image:first-child {
            width: calc(50% - 10px);
        }
        &:not(:first-child) .image:first-child {
            transform: translateX(calc(-50% - 10px));
        }
        &:not(:has(.image:nth-child(2))) {
            transform: translateX(calc(-100% - 20px));
            flex-basis: calc(25% - 20px);
            .image:first-child {
                transform: translateX(0);
            }
        }
    }
    .image {
        position: relative;
        width: 100%;
        height: 298px;
        cursor: pointer;
        &::before {
            content: '\e916';
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            font: 40px/1 icon;
            opacity: 0;
            transition: opacity .3s linear;
            color: var(--white);
            background: rgba(0, 0, 0, 0.5);
            box-shadow: 0 61px 24px 0 rgba(0, 0, 0, 0.01), 0 34px 21px 0 rgba(0, 0, 0, 0.05), 0 15px 15px 0 rgba(0, 0, 0, 0.09), 0 4px 8px 0 rgba(0, 0, 0, 0.1);
        }
        img {
            height: 100%;
            object-fit: cover;
        }
    }
    .controls {
        margin-left: 0;
    }
}
.video-report .videos {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    width: 100%;
    margin-top: 40px;
    h2,
    p,
    img {
        display: none;
    }
    div {
        display: contents;
    }
    iframe {
        width: 100%;
        aspect-ratio: 16/9;
    }
}
.bg-box:has(.our-team) .bg {
    background: url(../images/events/bg2.webp) top center / cover;
}
.bg-box:has(.reviews) .bg {
    background: url(../images/events/bg3.webp) top -490px center / cover;
}
.reviews {
    padding-block: 100px;
    h2 {
        color: var(--white);
    }
    .slider {
        position: relative;
        z-index: 1;
        .slides {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-block: 50px 40px;
            .slide {
                flex: 0 0 calc(50% - 10px);
                padding: 40px;
                background: var(--f6);
            }
            .name {
                font-size: 20px;
                font-weight: 600;
                line-height: 1.4;
                letter-spacing: 0.2px;
            }
            .post {
                margin-bottom: 20px;
                font-size: 16px;
                font-weight: 400;
                line-height: 1.4;
                letter-spacing: 0.2px;
                color: var(--text6);
            }
            .content {
                display: flex;
                flex-direction: column;
                gap: 10px;
                max-height: 200px;
                overflow-y: auto;
                font-size: 16px;
                font-weight: 700;
                line-height: 1.4;
                letter-spacing: 0.2px;
                color: var(--text6);
            }
        }
        .controls {
            max-width: calc(50% - 10px);
            .arrow-l,
            .arrow-r {
                background: var(--2);
                border-color: var(--white);
                .text-h b:first-child::after {
                    color: var(--white);
                }
            }
        }
    }
}
.bg-box:has(.contact-us) {
    .bg {
        background: url(../images/events/form2.webp) top center / cover;
    }
    &:has(form#registration) .bg {
        background: url(../images/events/form1.webp) top center / cover;
    }
    .contact-us {
        background: none;
        form {
            position: relative;
            z-index: 1;
            background: url(../images/index/bg-text.webp) top -190px right -225px / auto auto no-repeat, #d5d5d5;
            &:not(#registration) {
                border: 1px solid #FFF;
                box-shadow: 0 75px 30px 0 rgba(0, 0, 0, 0.02), 0 42px 25px 0 rgba(0, 0, 0, 0.05), 0 19px 19px 0 rgba(0, 0, 0, 0.09), 0 5px 10px 0 rgba(0, 0, 0, 0.1);
                h2,
                >p {
                    color: var(--text);
                    &::after {
                        background: var(--text);
                    }
                }
                >label {
                    color: var(--text);
                }
                .agree p {
                    color: var(--2);
                    a {
                        color: var(--text);
                    }
                }
                label:has(input[name="name"]) {
                    grid-column: 1/-1;
                }
                .agree label {
                    border-color: var(--text);
                    &:has(:checked)::before {
                        color: var(--text);
                    }
                }
            }
            &#registration {
                background: url(../images/index/bg-text.webp) top -190px right -225px/ auto auto no-repeat, var(--text);
                grid-template-columns: 1fr .5fr .5fr 1fr;
                label {
                    &:has(input[name="unp"]) {
                        grid-column: span 2;
                    }
                    &:has(input[name="name"]) {
                        grid-column: 1/-1;
                    }
                    &:has(input[name="phone"], input[name="email"]) {
                        grid-column: span 2;
                    }
                }
            }
        }
    }
}
.gallery-modal .window-body {
    max-width: initial;
    padding: 0;
    background: none;
    .slider {
        position: relative;
        display: grid;
        justify-content: center;
        align-items: start;
        .slides,
        .slide {
            display: contents !important;
        }
        .image {
            position: relative;
            grid-area: 1/1/2/2;
            width: 100%;
            height: 100%;
            opacity: 0;
            pointer-events: none;
            img {
                width: 64vw;
                height: 70vmin;
                object-fit: contain;
            }
            &.active {
                opacity: 1;
                pointer-events: all;
            }
        }
        .controls {
            position: absolute;
            top: calc(100% + 40px);
            left: 50%;
            width: 200px;
            transform: translateX(-50%);
            button {
                border-color: var(--text);
                &::before {
                    background: var(--text);
                }
                b {
                    &::after {
                        color: var(--text);
                    }
                    &:last-child::after {
                        color: var(--white);
                    }
                }
            }
        }
    }
}
@media (max-width: 1280px) {
    .info-content {
        grid-template-columns: 1fr 300px;
        gap: 10px;
        .left-box .program {
            width: 100vw;
            gap: 20px;
            margin-inline: -20px;
            padding: 40px 20px;
            .bg {
                left: 0;
            }
        }
    }
    .video-report,
    .gallery {
        margin-block: 80px;
    }
    .gallery-modal .window-body .slider .image img {
        width: calc(100vw - 150px);
        height: 70vmin;
        object-fit: contain;
    }
}
@media (max-width: 1080px) {
    .promo-box {
        min-height: 0;
        padding: 100px 0px 70px;
        .breadcrumbs {
            margin-bottom: 27px;
        }
    }
    .info-content {
        display: flex;
        flex-direction: column-reverse;
        .done,
        .red-btn {
            position: static;
        }
    }
    .gallery {
        .slides {
            gap: 10px;
        }
        .slide {
            gap: 10px;
            flex: 0 0 calc(70% - 10px);
            &:not(:has(.image:nth-child(2))) {
                transform: translateX(calc(-100% - 10px));
                flex-basis: calc(36% - 15px);
            }
        }
        .image::before {
            display: none;
        }
    }
}
@media (max-width: 768px) {
    .promo-box {
        padding-top: 70px;
        h1 {
            font-size: 36px;
            margin-bottom: 0;
        }
    }
    .info-content .left-box {
        .program {
            width: 100vw;
            gap: 20px;
            margin-inline: -20px;
            padding: 40px 20px;
            .bg {
                height: 100%;
            }
            > div {
                gap: 10px;
                > div {
                    grid-column: 1/-1;
                }
            }
        }
        .info {
            grid-template-columns: 1fr;
        }
    }
    .gallery {
        .slide {
            flex: 0 0 100%;
            &:first-child .image:first-child {
                width: 100%;
            }
            &:not(:first-child) .image:first-child {
                transform: translateX(0);
            }
            &:not(:has(.image:nth-child(2))) {
                transform: translateX(0);
                flex-basis: 100%;
            }
        }
        .image {
            height: 240px;
        }
        .controls {
            width: 100%;
        }
    }
}
@media (hover:hover) {
    .gallery .image:hover::before {
        opacity: 1;
    }
    .contact-us form {
        button:hover {
            border-color: var(--text);
        }
        &:not(#registration) button:hover {
            border-color: #d5d5d5;
        }
    }
}