main {
    isolation: isolate;
    background: url(../images/journey/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 {
    padding-top: 202px;
    .box {
        max-width: 758px;
        display: flex;
        flex-direction: column;
        .tag {
            margin-bottom: 20px;
        }
        h1 {
            margin-block: -10px 10px;
        }
        p {
            margin-bottom: 48px;
            font-size: 24px;
            line-height: 133%;
        }
        .btn {
            max-width: 342px;
        }
    }
}
.trade {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 550px;
    border-top: 1px solid #8D8BA3;
    &::before,
    &::after {
        content: '';
        grid-area: 2/1/3/-1;
        position: absolute;
        left: 0;
        width: 100%;
        height: 135px;
        pointer-events: none;
        background: url(../images/journey/line.svg) center center / auto 100% no-repeat;
    }
    &::before {
        top: 0;
        transform: translateY(-50%);
    }
    &::after {
        bottom: 0;
        transform: translateY(50%);
    }
    > div {
        display: flex;
        flex-direction: column;
        padding: 40px;
        h2 {
            max-width: 580px;
            margin-block: 14px 6px;
        }
        h3 {
            margin-bottom: 8px;
            font: 700 40px 'Mazzard';
        }
        .tag {
            margin-bottom: auto;
        }
        p {
            font-size: 24px;
            line-height: 120%;
        }
        &:nth-child(1) {
            padding-left: 0;
            padding-bottom: 36px;
        }
        &:nth-child(2) {
            background: rgba(141, 139, 163, 0.2);
            .tag {
                margin-bottom: 36px;
            }
            p {
                max-width: 598px;
            }
        }
        &:nth-child(3) {
            border-right: 1px solid #8D8BA3;
            background: url(../images/journey/b1.webp) center center / cover;
            p {
                max-width: 660px;
            }
        }
        &:nth-child(4) {
            padding-bottom: 48px;
            background: url(../images/journey/bg.webp) center center / cover;
            p {
                max-width: 660px;
            }
        }
    }
}
.fast {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    h2 {
        font-size: 100px;
        margin-block: -8px 2px;
    }
    h3,
    h4,
    h5 {
        text-transform: uppercase;
        font: 700 40px 'Mazzard';
    }
    .title {
        display: grid;
        grid-template-columns: auto 110px;
        column-gap: 4px;
        justify-content: center;
        margin-left: -25px;
        + p {
            grid-column: 2/3;
            padding-block: 6px 38px;
            font-size: 24px;
            line-height: 120%;
            text-align: center;
            ~ * {
                grid-column: 1/-1;
            }
        }
    }
    .items {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        border: 1px solid #575B74;
        div {
            position: relative;
            isolation: isolate;
            min-height: 440px;
            display: flex;
            flex-direction: column;
            justify-content: end;
            padding: 40px;
            border-right: 1px solid #575B74;
            background: url(../images/journey/1.webp) 40px 28px / auto no-repeat, rgba(141, 139, 163, 0.1);
            &::before {
                content: '';
                position: absolute;
                inset: 0;
                z-index: -1;
                opacity: 0;
                pointer-events: none;
                transition: opacity .3s linear;
                background: url(../images/journey/h.svg) top right / auto 100% no-repeat, rgba(141, 139, 163, 0.1);
            }
            &:nth-child(2) {
                background-image: url(../images/journey/2.webp);
            }
            &:nth-child(3) {
                background-image: url(../images/journey/3.webp);
            }
            &:last-child {
                border-color: transparent;
                background-image: url(../images/journey/4.webp);
            }
            p {
                max-width: 277px;
            }
        }
    }
    .box {
        padding: 36px;
        background: linear-gradient(90deg, #27283C 0%, #1C1D31 50%, #27283C 100%);
        border-bottom: 1px solid #575B74;
        * {
            text-align: center;
        }
        h5 {
            margin-bottom: 10px;
            font-size: 24px;
            color: #C6C8DD;
        }
        p {
            font-size: 24px;
            line-height: 120%;
            b {
                font-size: inherit;
                line-height: inherit;
                font-weight: 700;
                color: inherit;
            }
        }
    }
}
.last {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 59px 82px 59px 750px;
    border-block: 1px solid transparent;
    border-image-source: linear-gradient(90deg, #35343D 0%, #8D8BA3 49.79%, #35343D 100%);
    border-image-slice: 1;
    background: url(../images/journey/l1.webp) top left / cover padding-box;
    p,
    .btn {
        grid-column: 1/-1;
    }
    h2 {
        font-size: 80px;
        margin-block: -6px 6px;
    }
    p {
        padding-bottom: 12px;
        font-size: 24px;
        line-height: 120%;
    }
    .btn {
        max-width: initial;
    }
}
@media screen and (max-width: 1840px) {
    .promo {
        padding-top: 203px;
        .box {
            max-width: 590px;
            .tag {
                margin-bottom: 12px;
            }
            h1 {
                margin-block: -8px 8px;
            }
            p {
                margin-bottom: 30px;
                font-size: 16px;
            }
        }
    }
    .trade {
        grid-template-rows: auto 380px;
        &::before,
        &::after {
            height: 91px;
        }
        > div {
            padding: 30px;
            h2 {
                max-width: 390px;
            }
            h3 {
                margin-bottom: 8px;
                font-size: 24px;
            }
            p {
                font-size: 16px;
            }
            &:nth-child(1) {
                padding-bottom: 38px;
            }
            &:nth-child(2) .tag {
                margin-bottom: 60px;
            }
            &:nth-child(3) {
                background-image: url(../images/journey/b2.webp);
                p {
                    max-width: 444px;
                }
            }
            &:nth-child(4) {
                padding-bottom: 32px;
                p {
                    max-width: 444px;
                }
            }
        }
    }
    .fast {
        h2 {
            font-size: 64px;
            margin-top: -5px;
        }
        h3,
        h4 {
            font-size: 24px;
        }
        .title {
            grid-template-columns: auto 71px;
            margin-left: 2px;
            + p {
                padding-bottom: 18px;
                font-size: 16px;
            }
        }
        .items div {
            min-height: 295px;
            padding: 30px 29px 30px 30px;
            background-size: 195px auto;
            background-position: 30px 21px;
        }
        .box {
            padding: 26px;
            h5 {
                margin-bottom: 10px;
                font-size: 20px;
            }
            p {
                font-size: 16px;
            }
        }
    }
    .last {
        column-gap: 37px;
        padding: 42px 50px 39px 500px;
        background-image: url(../images/journey/l2.webp);
        p,
        .btn {
            grid-column: 1/2;
        }
        h2 {
            font-size: 52px;
            margin-block: -4px 4px;
        }
        p {
            padding-bottom: 11px;
            font-size: 16px;
        }
    }
}
@media screen and (max-width: 1279px) {
    .promo {
        padding-top: 122px;
        .box {
            max-width: 500px;
            h1 {
                max-width: 240px;
                margin-block: -6px 6px;
            }
            .btn {
                max-width: 354px;
            }
        }
    }
    .trade {
        grid-template-rows: auto 300px;
        margin-top: -22px;
        &::before,
        &::after {
            height: 56px;
        }
        > div {
            padding: 20px;
            h2 {
                max-width: 250px;
                margin-top: 17px;
            }
            h3 {
                margin-bottom: 6px;
                font-size: 24px;
            }
            &:nth-child(1) {
                padding-bottom: 19px;
            }
            &:nth-child(2) {
                .tag {
                    margin-bottom: 34px;
                }
                h3 {
                    font-size: 20px;
                }
            }
            &:nth-child(3) {
                background-image: url(../images/journey/b3.webp);
            }
            &:nth-child(4) {
                padding-bottom: 26px;
            }
        }
    }
    .fast {
        grid-template-columns: 97px 1fr 97px;
        h2 {
            font-size: 50px;
        }
        h3 {
            font-size: 20px;
        }
        .title {
            grid-template-columns: auto 55px;
            column-gap: 2px;
            margin-left: 0px;
            + p {
                padding-block: 3px 78px;
            }
        }
        .items {
            grid-template-columns: repeat(2, 1fr);
            div {
                min-height: 275px;
                padding: 20px 19px 20px 20px;
                background-position: 19px 21px;
                &:nth-child(1),
                &:nth-child(2) {
                    border-bottom: 1px solid #575B74
                }
                p {
                    max-width: 235px;
                }
            }
        }
        .box {
            padding: 16px;
        }
    }
    .last {
        grid-template-columns: 1fr;
        padding: 31px 30px 59px 268px;
        background-image: url(../images/journey/l3.webp);
        h2 {
            font-size: 32px;
            margin-block: -2px 2px;
        }
        .tag {
            order: -1;
            margin-left: auto;
            margin-bottom: 15px;
        }
    }
}
@media screen and (max-width: 767px) {
    main {
        background: url(../images/journey/promo2.webp) top left / max(500px, 100%) auto no-repeat;
        &::before {
            min-height: 500px;
            aspect-ratio: 1;
        }
    }
    .promo {
        padding-top: 194px;
        .box h1 {
            margin-block: -4px 4px;
        }
    }
    .trade {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 300px 300px;
        margin-top: 0;
        &::before,
        &::after {
            display: none;
        }
        > div {
            padding-inline: 16px;
            h2 {
                margin-bottom: 4px;
            }
            &:nth-child(2) {
                padding-bottom: 24px;
            }
            &:nth-child(3) {
                border-bottom: 1px solid #8D8BA3;
                border-right: none;
                background-image: url(../images/journey/b4.webp);
            }
            &:nth-child(4) {
                padding-bottom: 24px;
                p {
                    padding-inline: 4px 30px;
                }
            }
        }
    }
    .fast {
        display: flex;
        flex-direction: column;
        .tag {
            margin-bottom: 12px;
        }
        h2 {
            font-size: 40px;
        }
        h3 {
            font-size: 16px;
        }
        .title {
            grid-template-columns: auto 44px;
            + p {
                padding-block: 2px 18px;
            }
        }
        .items {
            grid-template-columns: 1fr;
            div {
                background-position: 14px 21px;
                &:nth-child(3) {
                    border-bottom: 1px solid #575B74
                }
            }
        }
        .box h5 {
            margin-bottom: 8px;
        }
    }
    .last {
        padding: 20px 20px 50px;
        background-image: url(../images/journey/l4.webp);
        .tag {
            margin-bottom: 75px;
        }
    }
}
@media (hover: hover) {
    .fast .items div:hover::before {
        opacity: 1;
    }
}