main {
    isolation: isolate;
    background: url(../images/times/promo.webp) top center / 100% auto no-repeat;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        aspect-ratio: 192 / 95;
        pointer-events: none;
        background: linear-gradient(0deg, #1C1D31 0%, rgba(28, 29, 49, 0.906249) 19.91%, rgba(28, 29, 49, 0.761946) 36.54%, rgba(28, 29, 49, 0) 100%) left bottom / 100% 100px no-repeat;
        z-index: -1;
    }
}
.promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 302px;
    .tag {
        margin-bottom: 20px;
    }
    h1 {
        max-width: 1180px;
        text-align: center;
        margin-block: -10px 10px;
    }
    p {
        margin-bottom: 48px;
        font-size: 24px;
        line-height: 133%;
        text-align: center;
    }
    .btn {
        max-width: 334px;
    }
}
.times {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    h3 {
        text-transform: uppercase;
        font: 700 32px "Mazzard";
    }
    > div {
        display: flex;
        flex-direction: column;
        &:not(:last-child) {

            background: rgba(141, 139, 163, 0.1);
            border-right: 1px solid #8D8BA3;
        }
        &:nth-child(2) {
            border-color: transparent;
        }
    }
    .left {
        padding: 40px;
        > * {
            max-width: 660px;
        }
        h2 {
            margin-block: 37px 16px;
        }
        p {
            font-size: 24px;
            line-height: 120%;
            color: #C6C8DD;
        }
    }
    .right .item {
        display: grid;
        grid-template-columns: 288px 1fr;
        gap: 10px 40px;
        padding: 45px 40px 42px;
        h3 {
            margin-block: 5px -5px;
        }
        p {
            line-height: 120%;
            color: #8D8BA3;
            margin-bottom: auto;
        }
        ul {
            grid-area: 1/2/3/3;
            display: flex;
            flex-direction: column;
            gap: 10px;
            list-style: none;
            padding-left: 39px;
            border-left: 1px solid #575B74;
            li {
                display: grid;
                grid-template-columns: auto 1fr auto;
                gap: 10px;
                line-height: 120%;
                text-transform: uppercase;
                color: #C6C8DD;
                &::before {
                    content: '';
                    grid-area: 1/2/2/3;
                    border-bottom: 1px solid #575B74;
                    width: 100%;
                }
                b {
                    font-family: 'Mazzard';
                    font-weight: 700;
                    font-size: inherit;
                    text-transform: uppercase;
                }
            }
        }
        &:first-child {
            border-bottom: 1px solid rgba(87, 91, 116, 0.5);
        }
    }
    .box {
        position: relative;
        isolation: isolate;
        grid-column: 1/-1;
        padding: 38px 40px 47px;
        border-top: 1px solid #8D8BA3;
        &::after,
        &::before {
            content: '';
            position: absolute;
            z-index: -1;
            pointer-events: none;
        }
        &::before {
            top: 0;
            left: 0;
            transform: translateY(-50%);
            width: 100%;
            height: 135px;
            background: url(../images/journey/line.svg) center center / auto 100% no-repeat;
        }
        &::after {
            inset: 0;
            backdrop-filter: blur(14px);
            background: url(../images/times/q1.webp) bottom right / auto 100% no-repeat, rgba(141, 139, 163, 0.2);
        }
        h3 {
            font-size: 40px;
        }
        p {
            margin-top: 9px;
            font-size: 24px;
            line-height: 120%;
        }
    }

}
.rules {
    h2 {
        margin-block: -5px 14px;
    }
    .box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 40px;
        .tag {
            margin-left: auto;
        }
        p {
            padding: 20px 165px 20px 20px;
            font-size: 24px;
            line-height: 120%;
            color: #C6C8DD;
            background: rgba(141, 139, 163, 0.2);
        }
    }
    .items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        h3 {
            margin-block: -6px -3px;
            font: 700 32px "Mazzard";
        }
        div {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 40px 107px 38px 40px;
            background: rgba(141, 139, 163, 0.2);
            &:not(:last-child) {
                box-shadow: 20px 0px 20px 0px rgba(28, 29, 49, 0.4);
                border-right: 1px solid rgba(141, 139, 163, 0.5);
            }
            &:nth-child(2) {
                background: url(../images/times/p.webp) center center / cover;
            }
            &::before {
                content: '\e903';
                position: absolute;
                top: 40px;
                right: 40px;
                font: 21px icon;
                color: #E6E9F8;
            }
            p {
                line-height: 120%;
                color: #8D8BA3;
            }
        }
    }
}
.sessions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 40px;
    border: 1px solid transparent;
    border-image-source: linear-gradient(90deg, #35343D 0%, #8D8BA3 49.79%, #35343D 100%);
    border-image-slice: 1;
    background: url(../images/times/t.webp) center center / cover;
    h2 {
        font-size: 40px;
        margin-block: -4px 4px;
    }
    p {
        font-size: 24px;
        line-height: 133%;
    }
    &:has(input[value='winter']:checked) .box picture {
        &:first-of-type {
            opacity: 0;
        }
        &:last-of-type {
            opacity: 1;
        }
    }
    .buttons {
        display: grid;
        grid-template-columns: repeat(2, 283px);
        gap: 5px;
        width: fit-content;
        margin: 0 0 auto auto;
        padding: 4px;
        border: 1px solid #8D8BA3;
        label {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            padding-inline: 10px;
            cursor: pointer;
            font-weight: 700;
            color: #E6E9F8;
            background-color: #1C1D31;
            transition: background-color .2s linear, color .2s linear;
            input {
                display: none;
            }
            &:has(:checked) {
                background-color: #FEFEFF;
                color: #2E2B3E;
            }
        }
    }
    .box {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 1fr;
        margin: 19px -40px 0 -20px;
        picture {
            grid-area: 1/1/1/1;
            transition: opacity .3s linear;
            img {
                width: 100%;
            }
        }
        picture:last-of-type {
            opacity: 0;
        }
    }
}
@media screen and (max-width: 1840px) {
    .promo {
        padding-top: 202px;
        .tag {
            margin-bottom: 20px;
        }
        h1 {
            max-width: 760px;
            margin-block: -13px 4px;
        }
        p {
            margin-bottom: 30px;
            font-size: 16px;
        }
    }
    .times {
        h3 {
            font-size: 22px;
        }
        .left {
            padding: 30px 30px 29px;
            > * {
                max-width: 400px;
            }
            h2 {
                margin-block: 85px 14px;
            }
            p {
                font-size: 16px;
            }
        }
        .right .item {
            grid-template-columns: 199px 1fr;
            column-gap: 30px;
            padding: 30px 30px 30px;
            ul {
                padding-left: 30px;
            }
        }
        .box {
            padding: 33px 31px 43px;
            &::before {
                height: 91px;
            }
            &::after {
                background-image: url(../images/times/q2.webp);
            }
            h3 {
                font-size: 24px;
            }
            p {
                font-size: 16px;
            }
        }
    }
    .rules {
        margin-top: -2px;
        h2 {
            margin-block: -5px 14px;
        }
        .box {
            margin-bottom: 30px;
            p {
                padding: 20px;
                font-size: 16px;
            }
        }
        .items {
            h3 {
                margin-block: -5px -2px;
                font-size: 22px;
            }
            div {
                gap: 8px;
                padding: 30px 63px 28px 30px;
                &::before {
                    top: 30px;
                    right: 30px;
                }
            }
        }
    }
    .sessions {
        padding: 30px;
        h2 {
            font-size: 24px;
        }
        p {
            font-size: 16px;
        }
        .buttons {
            grid-template-columns: repeat(2, 242px);
            label {
                height: 40px;
            }
        }
        .box {
            margin-top: 11px;
        }
    }
}
@media screen and (max-width: 1279px) {
    .promo {
        padding-top: 122px;
        h1 {
            max-width: 460px;
        }
    }
    .times {
        .left {
            padding: 21px 21px 22px;
            h2 {
                margin-block: auto 14px;
            }
        }
        .right .item {
            grid-template-columns: 1fr;
            gap: 10px;
            padding: 21px 20px 20px;
            h3 {
                margin-bottom: -9px;
            }
            p {
                padding-bottom: 10px;
                border-bottom: 1px solid rgba(87, 91, 116, 0.5);
            }
            ul {
                grid-area: initial;
                gap: 9px;
                padding-left: 0;
                border: none;
            }
        }
        .box {
            padding: 25px 20px 26px;
            &::before {
                height: 91px;
            }
            &::after {
                background-image: url(../images/times/q3.webp);
            }
            > * {
                max-width: 324px;
            }
        }
    }
    .rules {
        margin-top: 0;
        h2 {
            margin-block: -2px 12px;
        }
        .box {
            margin-bottom: 20px;
        }
        .items {
            grid-template-columns: repeat(2, 1fr);
            h3 {
                margin-top: -6px;
            }
            div {
                padding: 20px 44px 18px 20px;
                &:not(:last-child) {
                    box-shadow: 12px 0px 12px 0px rgba(28, 29, 49, 0.4);
                }
                &:last-child {
                    grid-column: 1/-1;
                    box-shadow: 12px 0px 12px 0px rgba(28, 29, 49, 0.4);
                    background: rgba(141, 139, 163, 0.1);
                }
                &::before {
                    top: 20px;
                    right: 20px;
                }
            }
        }
    }
    .sessions {
        grid-template-columns: minmax(344px, 1fr) minmax(334px, auto);
        column-gap: 10px;
        padding: 20px 0;
        overflow: hidden;
        > div:first-child {
            margin-left: 20px;
        }
        h2 {
            margin-top: -3px;
        }
        p br {
            display: none;
        }
        .buttons {
            margin-right: 20px;
            grid-template-columns: repeat(2, 159px);
            label {
                height: 40px;
            }
        }
        .box {
            overflow: auto;
            margin-inline: -20px;
            margin: 3px -20px 0 -20px;
            scrollbar-width: none;
            &::-webkit-scrollbar {
                display: none;
            }
            picture {
                min-width: 1200px;
                padding-left: 22px;
            }
        }
    }
}
@media screen and (max-width: 767px) {
    main {
        background: url(../images/times/promo2.webp) top left / max(500px, 100%) auto no-repeat;
        &::before {
            min-height: 500px;
            aspect-ratio: 1;
        }
    }
    .promo {
        padding-top: 215px;
        .tag {
            margin-bottom: -2px;
        }
        h1 {
            max-width: 460px;
            margin-top: 11px;
        }
    }
    .times {
        grid-template-columns: 1fr;
        > div:not(:last-child) {
            border-right: none;
        }
        .left {
            padding: 20px 20px 10px;
            h2 {
                margin-block: 8px 13px;
            }
        }
        .right .item {
            padding: 20px;
            &:first-child {
                border-top: 1px solid #8d8ba3;
            }
            h3 {
                margin-bottom: -19px;
            }
            p {
                padding-block: 8px;
                border-bottom: 1px solid rgba(87, 91, 116, 0.5);
            }
            ul {
                grid-area: initial;
                gap: 10px;
                padding-left: 0;
                border: none;
            }
        }
        .box {
            padding: 16px 20px 208px;
            &::before {
                height: 27px;
            }
            &::after {
                background-image: url(../images/times/q4.webp);
                background-size: auto auto;
            }
            > * {
                max-width: 324px;
            }
            p {
                margin-top: 6px;
            }
        }
    }
    .rules {
        h2 {
            margin-block: -4px 13px;
        }
        .box {
            display: flex;
            flex-direction: column;
            margin-bottom: 18px;
            .tag {
                order: -1;
                margin: 0 auto 12px 0;
            }
        }
        .items {
            grid-template-columns: 1fr;
            h3 {
                margin-top: -5px;
            }
            div {
                &:not(:last-child) {
                    box-shadow: none;
                    border-right: none;
                    border-bottom: 1px solid rgba(141, 139, 163, 0.5);
                }
                &:last-child {
                    box-shadow: none;
                }
            }
        }
    }
    .sessions {
        grid-template-columns: 1fr;
        > div:first-child {
            margin-right: 20px;
        }
        h2 {
            margin-top: -4px;
        }
        .buttons {
            margin-top: 10px;
            margin-left: 20px;
            grid-template-columns: repeat(2, 150px);
        }
        .box {
            margin-top: 2px;
            picture {
                padding-left: 20px;
            }
        }
    }
}
@media (hover: hover) {
    .sessions label:not(:has(:checked)):hover {
        background-color: #8D8BA3;
    }
}