/**
 * Карусель кроків технології (how-it-works .step-card).
 * Спільна розмітка/JS з products-carousel.
 */

.how-it-works .steps-carousel {
    margin: 0 0 2.5rem;
}

.steps-carousel.products-carousel .step.step-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: clamp(260px, calc((100% - 2 * 1.25rem) / 3), 320px);
    max-width: min(320px, calc(100vw - 3rem));
    min-height: 0;
    height: auto;
}

@media (max-width: 899px) {
    .steps-carousel.products-carousel .step.step-card {
        width: clamp(260px, calc((100% - 1.25rem) / 2), 320px);
    }
}

@media (max-width: 520px) {
    .steps-carousel.products-carousel .step.step-card {
        width: min(300px, calc(100vw - 3rem));
    }
}