.how-to-choose__top {
    gap: 5rem;
    grid-template-columns: 1fr 1fr;
    margin-bottom: calc(var(--space-7) + var(--space-2));
}

.how-to-choose {
    padding: 2.5rem 0;
    background: var(--brand-muted);
    position: relative;
}


.how-to-choose::before {
    content: '';
    width: 100vw;
    height: 100%;
    background: var(--brand-muted);
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
}

.how-to-choose__title {
    max-width: 70%;
}

.how-to-choose__desc {
    max-width: calc(100% - 6.2rem - var(--space-2));
    color: var(--text-muted);
}

.how-to-choose__media {
    width: 6.2rem;
    height: 6.2rem;
}

.how-to-choose__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.how-to-choose__step {
    padding: 0 calc(var(--space-7) + var(--space-2));
    border-right: 2px solid #CFE0E0;
}

.how-to-choose__step:last-child {
    padding-right: 0;
    border-right: none;
}


.how-to-choose__step:first-child {
    padding-left: 0;
}


.how-to-choose__step-number {
    padding: var(--space-2) var(--space-5);
    background: #CFE0E0;
    border-radius: var(--space-5);
    color: var(--brand);
}

.how-to-choose__step-title {
    font-size: 1rem;
    font-weight: 500;
}


@media (max-width: 1024px) {

    /* Steps become a swipeable row. The slot width mirrors the
       recommended-products slide: (100% - gaps) / slidesPerView. */
    .how-to-choose .how-to-choose__bottom {
        display: flex;
        gap: var(--space-3);
        overflow-x: auto;
        overflow-y: hidden;
        /* Flex/grid item must be allowed to shrink, otherwise overflow never kicks in. */
        min-width: 0;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* Mirrors the recommended-products slider on the same breakpoints. */
        --htc-slides-per-view: 1.1;
    }

    .how-to-choose .how-to-choose__bottom::-webkit-scrollbar {
        display: none;
    }

    .how-to-choose__step {
        flex: 0 0 auto;
        width: calc((100% - var(--space-3) * (var(--htc-slides-per-view) - 1)) / var(--htc-slides-per-view));
        /* The gap replaces the desktop dividers, so the slots line up with the
           slides in recommended-products. */
        padding: 0;
        border-right: none;
        scroll-snap-align: start;
    }

    .how-to-choose__top {
        gap: calc(var(--space-7) + var(--space-2));
        grid-template-columns: 1fr;
        margin-bottom: calc(var(--space-7) + var(--space-2));
    }

    .how-to-choose__title {
        max-width: 100%;
    }

}

@media (min-width: 630px) and (max-width: 1024px) {
    .how-to-choose .how-to-choose__bottom {
        --htc-slides-per-view: 2.2;
    }
}


@media (max-width: 630px) {
    .how-to-choose__media {
        width: 2.7rem;
        height: 2.7rem;
    }

    .how-to-choose__desc {
        max-width: calc(100% - 2.7rem - var(--space-2));
    }
}