.pro-block-steps {
    display: flex;
    flex-direction: column;
    align-items: center;

    ol {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        gap: 48px;
        margin: 48px 0;
        padding: 0;
        list-style: none;
    }

    @media (min-width: 800px) {
        ol {
            align-items: center;
        }
    }
}

.pro-block-step {
    --counter-number-offset: 60px;
    --media-side-offset: 170px;

    display: flex;
    align-items: center;
    gap: 100px;

    & .pro-block-step__media {
        position: relative;
        z-index: 1;
        display: flex;
        flex: 0 0 auto;

        &::before {
            content: "";
            position: absolute;
            z-index: -1;
            top: 50%;
            width: 100vw;
            height: 280px;
            transform: translateY(-50%);
            pointer-events: none;
        }
    }

    & .pro-block-step__line {
        display: none;

        &.half-line {
            clip-path: inset(0 0 50% 0);
        }
    }

    &.align-left {
        & .pro-block-step__media {
            &::before {
                right: 0;
                background-color: #fff;
                background-image: linear-gradient(
                    270deg,
                    var(--pro-color-for-gradient) 0%,
                    var(--pro-steps-background-color) 100%
                );
            }
        }

        & .pro-block-step__counter {
            left: calc(var(--counter-number-offset) * -1);
            transform: translateY(-50%) translateX(-100%);
        }
    }

    &.align-right {
        & .pro-block-step__media {
            &::before {
                left: 0;
                background-color: #fff;
                background-image: linear-gradient(
                    90deg,
                    var(--pro-color-for-gradient) 0%,
                    var(--pro-steps-background-color) 100%
                );
            }
        }

        & .pro-block-step__counter {
            right: calc(var(--counter-number-offset) * -1);
            transform: translateY(-50%) translateX(100%);
        }
    }

    & .pro-block-step__img-wrapper {
        overflow: hidden;
        position: relative;
        z-index: 1;
        width: 222px;
        height: 457px;
        border-radius: 34px;
        box-shadow: 0 3px 2px 0 hsla(0, 0%, 0%, 0.02),
        0 7px 5px 0 hsla(0, 0%, 0%, 0.03),
        0 13px 10px 0 hsla(0, 0%, 0%, 0.04),
        0 22px 18px 0 hsla(0, 0%, 0%, 0.04),
        0 42px 33px 0 hsla(0, 0%, 0%, 0.05),
        0 100px 80px 0 hsla(0, 0%, 0%, 0.07);
    }

    & .pro-block-step__img-frame {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100% !important;
        height: 100%;
    }

    & .pro-block-step__img {
        position: relative;
        z-index: 0;
        width: 100% !important;
        height: 100%;
        object-fit: cover;
    }

    & .pro-block-step__counter {
        position: absolute;
        top: 50%;
        color: var(--pro-steps-number-color);
        font-family: Montserrat, sans-serif;
        font-size: 200px;
        font-weight: 700;

        & span {
            &.desktop {
                display: block;
            }

            &.mobile {
                display: none;
            }
        }
    }

    & .pro-block-step__content {
        display: flex;
        flex-direction: column;
        gap: 24px;
        max-width: 460px;
    }

    & .pro-block-step__title {
        font-family: Montserrat, sans-serif;
        font-size: 24px;
        font-weight: 900;
        line-height: 26px;
    }

    & .pro-block-step__text {
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
    }
}

@media (max-width: 1340px) and (min-width: 1200px) {
    .pro-block-step {
        --counter-number-offset: clamp(40px, -131px + 14vw, 60px);
        --media-side-offset: clamp(170px, 649px + -36vw, 220px);

        gap: clamp(80px, -91px + 14.2857vw, 100px);
    }
}

@media (max-width: 1200px) {
    .pro-block-step {
        gap: clamp(48px, -16px + 8vw, 80px);

        &.align-left {
            --counter-number-offset: clamp(10px, -50px + 7.5vw, 40px);
        }

        &.align-right {
            --counter-number-offset: clamp(-80px, -320px + 30vw, 40px);

            & .pro-block-step__line {
                transform: translateY(calc(clamp(150px, 90px + 7.5vw, 180px) * -1));
            }
        }

        & .pro-block-step__media {
            img {
                width: clamp(180px, 96px + 10.5vw, 222px);
            }
        }
    }
}

@media (min-width: 800px) {
    .pro-block-step {
        & .pro-block-step__line {
            position: absolute;
            top: 100%;
            z-index: -1;
            display: block;
            width: 602px;
            pointer-events: none;
        }

        &:last-child {
            & .pro-block-step__line {
                display: none;
            }
        }

        &.align-left {
            margin-left: var(--media-side-offset);

            & .pro-block-step__line {
                left: -120px;
                transform: translateY(-40px);
                background-position: top center;
            }
        }

        &.align-right {
            margin-right: var(--media-side-offset);
            flex-direction: row-reverse;

            & .pro-block-step__line {
                display: none;
            }
        }
    }
}

@media (max-width: 800px) {
    .pro-block-step {
        flex-direction: column;
        gap: clamp(24px, -26px + 9.2308vw, 48px);

        &.align-right {
            --counter-number-offset: -50px;
        }

        & .pro-block-step__media {
            img {
                width: clamp(172px, 155px + 3.0769vw, 180px);
            }
        }

        & .pro-block-step__counter {
            font-size: clamp(180px, 138px + 7.6923vw, 200px);
        }
    }
}

@media (max-width: 540px) {
    .pro-block-step{
        &.align-left {
            align-items: flex-end;

            & .pro-block-step__media {
                justify-content: flex-end;
            }

            & .pro-block-step__counter {
                left: 0;
                transform: translateY(-50%);
            }
        }

        &.align-right {
            align-items: flex-start;

            & .pro-block-step__counter {
                right: 0;
                transform: translateY(-50%);
            }
        }

        & .pro-block-step__media {
            width: 100%;
        }

        & .pro-block-step__counter {
            & span {
                &.desktop {
                    display: none;
                }

                &.mobile {
                    display: block;
                }
            }
        }
    }
}