.journey {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
}

.journey--side {
    counter-reset: step;
}

.journey--side .journey-item {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    padding: 16rem 15rem 7rem;
    position: relative;
    counter-increment: step;
}

.journey--side .journey-item:not(:last-of-type) {
    margin-bottom: 7rem;
}

.journey--side .journey-item:nth-of-type(5n + 1) {
    -o-border-image: url('../../img/kinder/border_mobile_1.svg') 1 stretch;
       border-image: url('../../img/kinder/border_mobile_1.svg') 1 fill stretch;
}

.journey--side .journey-item:nth-of-type(5n + 2) {
    -o-border-image: url('../../img/kinder/border_mobile_2.svg') 1 stretch;
       border-image: url('../../img/kinder/border_mobile_2.svg') 1 fill stretch;
}

.journey--side .journey-item:nth-of-type(5n + 2) .journey-item--descr {
    max-width: 360rem;
}

.journey--side .journey-item:nth-of-type(5n + 3) {
    -o-border-image: url('../../img/kinder/border_mobile_3.svg') 1 stretch;
       border-image: url('../../img/kinder/border_mobile_3.svg') 1 fill stretch;
}

.journey--side .journey-item:nth-of-type(5n + 4) {
    -o-border-image: url('../../img/kinder/border_mobile_4.svg') 1 stretch;
       border-image: url('../../img/kinder/border_mobile_4.svg') 1 fill stretch;
}

.journey--side .journey-item:nth-of-type(5n + 5) {
    -o-border-image: url('../../img/kinder/border_mobile_5.svg') 1 stretch;
       border-image: url('../../img/kinder/border_mobile_5.svg') 1 fill stretch;
}

.journey--side .journey-item:nth-of-type(5n + 5) .journey-item--descr {
    max-width: 80%;
}

.journey--side .journey-item--label {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-bottom: 3rem;
    padding: 4rem 12rem;
    font-size: 14rem;
    font-weight: 400;
    border-radius: 32rem;
    background-color: var(--color-white);
}

.journey--side .journey-item--label:after {
    content: ' ' counter(step);
    display: inline-block;
    margin-left: 4rem;
}

.journey--side .journey-item--title {
    margin-bottom: 7rem;
    font-size: 18rem;
    font-weight: 600;
}

.journey--side .journey-item--descr {
    font-size: 14px;
    line-height: 1.3;
}

.journey--side .journey-item--title,
.journey--side .journey-item--descr {
    color: var(--color-white);
}

.journey-title-wrap {
    padding-top: 14rem;
    max-width: 380px;
    margin: 0 auto 33px;
    text-align: center;
}

.journey-title-wrap--title {
    position: relative;
    margin: 0 auto 12rem;
}

.journey-title-wrap--title:before,
.journey-title-wrap--title:after {
    content: '';
    position: absolute;
}

.journey-title-wrap--title:before {
    width: 37rem;
    height: 50rem;
    top: 30rem;
    left: 50%;
    -webkit-transform: translatex(-470%) rotate(-33deg);
        -ms-transform: translatex(-470%) rotate(-33deg);
            transform: translatex(-470%) rotate(-33deg);
    background: url('../../img/kinder/juurney_icon_1.svg') center/contain no-repeat;
}

.journey-title-wrap--title:after {
    width: 30rem;
    height: 60rem;
    top: 21rem;
    right: 50%;
    -webkit-transform: translateX(600%) rotate(31deg);
        -ms-transform: translateX(600%) rotate(31deg);
            transform: translateX(600%) rotate(31deg);
    background: url('../../img/kinder/juurney_icon_2.svg') center/contain no-repeat;
}

.journey-title-wrap--descr {
    max-width: 460rem;
    margin-bottom: 25rem;
}

.journey-title-wrap .button {
    margin: 0 auto;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
    .journey {
        gap: 24rem;
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    .journey--side .journey-item {
        max-width: none;
        padding: 40rem 32rem 50rem;
        margin-left: 0;
        margin-right: 0;
    }

    .journey--side .journey-item:not(:last-of-type) {
        margin-bottom: 16rem;
    }

    .journey--side .journey-item:nth-of-type(5n + 1) {
        -o-border-image: url('../../img/kinder/border_1.svg') 1 stretch;
           border-image: url('../../img/kinder/border_1.svg') 1 fill stretch;
    }

    .journey--side .journey-item:nth-of-type(5n + 2) {
        -o-border-image: url('../../img/kinder/border_2.svg') 1 stretch;
           border-image: url('../../img/kinder/border_2.svg') 1 fill stretch;
    }

    .journey--side .journey-item:nth-of-type(5n + 3) {
        -o-border-image: url('../../img/kinder/border_3.svg') 1 stretch;
           border-image: url('../../img/kinder/border_3.svg') 1 fill stretch;
    }

    .journey--side .journey-item:nth-of-type(5n + 4) {
        -o-border-image: url('../../img/kinder/border_4.svg') 1 stretch;
           border-image: url('../../img/kinder/border_4.svg') 1 fill stretch;
    }

    .journey--side .journey-item:nth-of-type(5n + 5) {
        -o-border-image: url('../../img/kinder/border_5.svg') 1 stretch;
           border-image: url('../../img/kinder/border_5.svg') 1 fill stretch;
    }

    .journey--side .journey-item:nth-of-type(5n + 5) .journey-item--descr {
        max-width: 370rem;
    }

    .journey--side .journey-item--label {
        margin-bottom: 16rem;
    }

    .journey--side .journey-item--title {
        font-size: 24rem;
    }

    .journey-title-wrap {
        max-width: none;
        margin: 0;
        text-align: left;
    }

    .journey-title-wrap--title {
        max-width: none;
        margin: 0 0 19rem;
    }

    .journey-title-wrap--title:before {
        width: 47rem;
        height: 100rem;
        top: -20rem;
        left: initial;
        right: 50%;
        -webkit-transform: translateX(450%);
            -ms-transform: translateX(450%);
                transform: translateX(450%);
    }

    .journey-title-wrap--title:after {
        width: 64rem;
        height: 120rem;
        top: initial;
        -webkit-transform: translateX(450%);
            -ms-transform: translateX(450%);
                transform: translateX(450%);
    }

    .journey-title-wrap--descr {
        margin-bottom: 31rem;
    }

    .journey-title-wrap .button {
        margin: 0;
    }
}