@media (max-width: 767.98px) {
    #categories .swiper-slide {
        aspect-ratio: 4 / 5;
    }

    #categories .swiper-slide > div {
        height: 100%;
    }

    #categories .swiper-slide img {
        aspect-ratio: 4 / 5;
        height: 100%;
    }

    /* Hide swiper navigation arrows on mobile (touch is enough) */
    #categories .swiper-button-next,
    #categories .swiper-button-prev,
    #products-home .swiper-button-next,
    #products-home .swiper-button-prev {
        display: none;
    }
}

/*
 * Desktop: keep all slides at the same height. Without an explicit aspect ratio
 * the slide height was determined by the natural aspect of each image, so cards
 * with portrait/landscape images came out different sizes. A square aspect on
 * the slide + object-fit on the image equalises them while preserving framing.
 */
@media (min-width: 992px) {
    #categories .swiper-wrapper {
        align-items: stretch;
    }

    #categories .swiper-slide {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    #categories .swiper-slide > div {
        height: 100%;
        width: 100%;
    }

    #categories .swiper-slide img {
        aspect-ratio: 1 / 1;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}