.stepper {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

.stepper .stepper__item {
    scroll-snap-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stepper .stepper__item[data-level] {
    cursor: pointer;
}

.stepper .stepper__item:first-child {
    margin-left: 50%;
}

.stepper .stepper__item:last-child {
    margin-right: 50%;
}

.stepper .stepper__item .stepper__item__img__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    padding: 10px;
    box-sizing: border-box;
    width: 76px;
    height: 76px;
}

.stepper .stepper__item.stepper__item--active .stepper__item__img__wrapper {
    background: var(--stepper-bg);
}

.stepper .stepper__item.stepper__item--completed .stepper__item__img__wrapper {
    background: rgba(76, 168, 83, 0.2);
}

.stepper .stepper__item:not(:first-child) .stepper__item__img__wrapper:before {
    content: '';

    width: calc((100% - 48px) / 2);
    height: 0;
    border: 2px solid var(--color-gray-3, #DFDFDF);
    position: absolute;
    left: 0;
}

.stepper .stepper__item:not(:first-child).stepper__item--active .stepper__item__img__wrapper:before {
    content: '';

    width: calc((100% - 76px) / 2);
    border: 2px solid rgb(from var(--color-primary-4) r g b / 0.3);
    position: absolute;
    left: 0;
}

.stepper .stepper__item:not(:first-child).stepper__item--completed .stepper__item__img__wrapper:before {
    content: '';

    width: calc((100% - 76px) / 2);
    border: 2px solid rgba(76, 168, 83, 0.2);
    position: absolute;
    left: 0;
}

.stepper .stepper__item:not(:last-child) .stepper__item__img__wrapper:after {
    content: '';

    width: calc((100% - 48px) / 2);
    height: 0;
    border: 2px solid var(--color-gray-3, #DFDFDF);
    position: absolute;
    right: 0;
}

.stepper .stepper__item:not(:last-child).stepper__item--active .stepper__item__img__wrapper:after {
    content: '';

    width: calc((100% - 76px) / 2);
    border: 2px solid rgb(from var(--color-primary-4) r g b / 0.3);
    position: absolute;
    right: 0;
}

.stepper .stepper__item:not(:last-child).stepper__item--completed .stepper__item__img__wrapper:after {
    content: '';

    width: calc((100% - 76px) / 2);
    border: 2px solid rgba(76, 168, 83, 0.2);
    position: absolute;
    right: 0;
}

.stepper .stepper__item .stepper__item__img__wrapper .stepper__item__img {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    position: relative;
}

.stepper .stepper__item.stepper__item--completed .stepper__item__img__wrapper .stepper__item__img:before {
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16px' height='16px' viewBox='0 0 16 16' version='1.1'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M 12.949219 3.050781 C 10.214844 0.316406 5.785156 0.316406 3.050781 3.050781 L 2.695312 2.695312 L 3.050781 3.050781 C 0.316406 5.785156 0.316406 10.214844 3.050781 12.949219 L 2.695312 13.304688 L 3.050781 12.949219 C 5.785156 15.683594 10.214844 15.683594 12.949219 12.949219 C 15.683594 10.214844 15.683594 5.785156 12.949219 3.050781 Z M 2.34375 2.34375 C 5.46875 -0.78125 10.53125 -0.78125 13.65625 2.34375 C 16.78125 5.46875 16.78125 10.53125 13.65625 13.65625 C 10.53125 16.78125 5.46875 16.78125 2.34375 13.65625 C -0.78125 10.53125 -0.78125 5.46875 2.34375 2.34375 Z M 12.035156 5.992188 C 12.222656 6.195312 12.210938 6.511719 12.007812 6.699219 L 7.789062 10.605469 C 7.328125 11.035156 6.609375 11.019531 6.167969 10.570312 L 3.976562 8.351562 C 3.785156 8.152344 3.785156 7.835938 3.980469 7.644531 C 4.179688 7.449219 4.496094 7.453125 4.6875 7.648438 L 6.878906 9.867188 C 6.941406 9.929688 7.046875 9.933594 7.109375 9.871094 L 11.328125 5.964844 C 11.53125 5.777344 11.84375 5.789062 12.035156 5.992188 Z M 12.035156 5.992188' fill='%23FFF'/%3E%3C/svg%3E");
    position: absolute;
    top: -25px;
    right: -25px;
    background: #4CA853;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.stepper .stepper__item:not(.stepper__item--completed, .stepper__item--active) .stepper__item__img svg {
    display: none
}

.stepper .stepper__item:not(.stepper__item--completed, .stepper__item--active) .stepper__item__img:after {
    content: attr(data-item);
    position: absolute;
    width: 48px;
    height: 48px;
    padding: 10px 18px;

    background: var(--color-gray-5, #F5F5F5);
    border: 2px solid var(--color-gray-3, #DFDFDF);
    border-radius: 12px;
}

.stepper .stepper__item .stepper__item__title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 48px;

    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
}

.stepper .stepper__item.stepper__item--active .stepper__item__title,
.stepper .stepper__item.stepper__item--completed .stepper__item__title {
    font-weight: 700;
}

.stepper .stepper__item.stepper__item--completed .stepper__item__title {
    color: #4CA853;
}


@media screen and (min-width: 768px) {
    .stepper {
        display: flex;
        justify-content: center;
        overflow-x: hidden;
    }

    .stepper .stepper__item .stepper__item__title {
        width: 145px;
        height: 48px;
    }

    .stepper .stepper__item {
        width: 145px;
    }

    .stepper .stepper__item:first-child {
        margin-left: 0;
    }

    .stepper .stepper__item:last-child {
        margin-right: 0;
    }
}