* {
    --cat-slide-height: 400px;
}

.catSwiperCarousel {
    height:var(--cat-slide-height);
}

@media (min-width: 1200px) {
    .catSwiperCarousel {
        display: flex;
        justify-content: center;
        max-width: 1200px;
    }
}

@media (min-width: 992px) {
    .catSwiperCarousel .swiper-wrapper {
        display: flex;
        justify-content: space-around;
        max-width: 1200px;
    }
}

@media (min-width: 1200px) {
    .catSwiperCarousel .swiper-wrapper {
        justify-content: space-between;
    }
}

.catSwiperCarousel .swiper-wrapper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 992px) {
    .catSwiperCarousel .swiper-wrapper .swiper-slide {
        flex-basis: 24%;
    }
}

.catSwiperCarousel .swiper-wrapper .swiper-slide .cat-slide {
    border: 1px solid #dedede;
    border-radius: 10px;
    width: 100%;
}

    .catSwiperCarousel .swiper-wrapper .swiper-slide .cat-slide .top-half {
        position: relative;
        height: 80px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

        .catSwiperCarousel .swiper-wrapper .swiper-slide .cat-slide .top-half .head {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }

            .catSwiperCarousel .swiper-wrapper .swiper-slide .cat-slide .top-half .head p {
                margin-bottom: 0;
                margin-left: 45%;
                font-weight: 700;
                color: #FFF;
                font-size: 1.125em;
            }

        .catSwiperCarousel .swiper-wrapper .swiper-slide .cat-slide .top-half .cat-img {
            position: absolute;
            max-width: 35%;
            left: 0;
            bottom: 0;
            z-index: 5;
        }

            .catSwiperCarousel .swiper-wrapper .swiper-slide .cat-slide .top-half .cat-img img {
                width: 118px;
            }

    .catSwiperCarousel .swiper-wrapper .swiper-slide .cat-slide .bottom-half {
        background-color: #FFF;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

        .catSwiperCarousel .swiper-wrapper .swiper-slide .cat-slide .bottom-half a {
            text-decoration: none;
            height: 40px;
        }

            .catSwiperCarousel .swiper-wrapper .swiper-slide .cat-slide .bottom-half a span {
                max-width: 80%;
                font-weight: 700;
            }

        .catSwiperCarousel .swiper-wrapper .swiper-slide .cat-slide .bottom-half .fa-external-link-alt {
            margin-left: 8px;
        }

        .catSwiperCarousel .swiper-wrapper .swiper-slide .cat-slide .bottom-half .fa-arrow-right-long {
            margin-left: auto;
            color: #0f71bb;
        }