/* How. */

.cf-block__preview .how-item {
    width: auto;
}

.how {
    overflow: hidden;
}

.how-top .content {
    max-width: 636px;
}

.how-list {
    overflow: visible;
    counter-reset: direction;
}

.how-list:not(:first-child) {
    margin-top: var(--i1);
}

.how-item {
    display: flex;
    flex-direction: column;
    grid-gap: 140px;

    max-width: 308px;
    padding: 36px;
    background-color: var(--white);
    -webkit-border-radius: var(--border-radius);
    -moz-border-radius: var(--border-radius);
    border-radius: var(--border-radius);
}

.how-item:before {
    counter-increment: direction;
    content: counter(direction);
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    aspect-ratio: 1/1;
    border: 1px solid var(--border-light);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.how-item:nth-child(-n + 9):before {
    content: '0' counter(direction);
}

@media (hover: hover) {
    .how-item:hover {
        color: var(--white);
        background-color: var(--primary);
    }

    .how-item {
        --transition-duration: .23s;

        -webkit-transition: color var(--transition-duration), background-color var(--transition-duration);
        -moz-transition: color var(--transition-duration), background-color var(--transition-duration);
        -ms-transition: color var(--transition-duration), background-color var(--transition-duration);
        -o-transition: color var(--transition-duration), background-color var(--transition-duration);
        transition: color var(--transition-duration), background-color var(--transition-duration);

        transition-timing-function: linear;
    }
}


@media (hover: none) {
    .how-item.swiper-slide-active {
        color: var(--white);
        background-color: var(--primary);
    }
}

/* How. */

@media only screen and (max-width: 767px){
    .how .swiper-button {
        display: none;
    }
}