.catalog {
        border-top: .8rem solid;
        border-bottom: .8rem solid;
        border-image-source: linear-gradient(
            100deg,
            var(--color1-brand) 7%,
            var(--color2-brand) 25%,
            var(--color3-brand) 60%,
            var(--color4-brand) 100%
        );
        border-image-slice: 1;
        padding-bottom: 2rem;
    }

    .catalog-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        
    }

    .catalog-text {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70%;
        margin: 0 auto 2rem;
        padding: 2rem;
        border-bottom: 2px solid lightgray;
    }

    .catalog-text h1 {
        color: var(--title-color);
        font-size: var(--title-size);
        font-weight: var(--title-weight);
        padding: 0 2rem;
        border-right: 3px solid var(--title-color);
    }

    .catalog-text p {
        color: var(--title-color);
        font-size: var(--subtitle-size);
        padding: 0 2rem;
    }


    .catalog-container-banners {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 2rem;
        box-sizing: border-box;      
        padding: 0 4rem;  
        
        
    }

    /* Swipers desktop */

    .swiper-catalog-top,
    .swiper-catalog-bottom {
        position: relative;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        
    }

    .swiper-catalog-top .swiper-wrapper,
    .swiper-catalog-bottom .swiper-wrapper {
        align-items: stretch;
    }


    .swiper-catalog-bottom, .swiper-catalog-top {
        height: 50%;
        width: 100%;
    }



    .swiper-slide-catalog {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background: transparent;
        align-items: stretch;
        box-sizing: border-box;

    }


    .catalog-banner {
        position: relative;
        width: 100%;
        max-width: 16rem;
        height: 22rem;
        overflow: hidden;
    }

    .catalog-banner:hover {
        transform: scale(1.05);
        box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
        transition: transform .35s ease, box-shadow .35s ease;
        z-index: 3;
    }


    .catalog-banner-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .swiper-catalog-top,
    .swiper-catalog-bottom {
       width: 100%;
    }
    .swiper-slide-catalog {
        display: flex;
        align-items: stretch;
        height: auto;
        background: transparent;
    }
    
    .catalog-banner-link {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        color: inherit;
        text-decoration: none;
        transition: transform .35s ease, box-shadow .35s ease;
    }
    .catalog-banner-link:hover {
        transform: scale(1.05);
        box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
    }
    .catalog-banner-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .catalog-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 1),
            rgba(0, 0, 0, .6),
            rgba(0, 0, 0, 0)
        );
    }

    .catalog-banner-text {
        position: absolute;
        right: 1.5rem;
        bottom: 1.5rem;
        left: 1.5rem;
        z-index: 2;
        font-weight: 400;
        text-align: left;
    }

    .catalog-banner-text h2 {
        color: white;
        font-size: 2rem;
        font-weight: 400;
        padding: .5rem 0;
    }

    .catalog-banner-line {
        width: 20%;
        height: 8px;
        padding: 0;
        background: rgb(224, 22, 56);
        border-radius: 1rem;
    }


    .catalog-pagination-top .swiper-pagination-bullet,
    .catalog-pagination-bottom .swiper-pagination-bullet,
    .catalog-pagination-mobile .swiper-pagination-bullet
    {
        background-color: #999;
    }
    .catalog-pagination-top .swiper-pagination-bullet-active,
    .catalog-pagination-bottom .swiper-pagination-bullet-active,
    .catalog-pagination-mobile .swiper-pagination-bullet-active
    {
    background-color:lightskyblue ;}
   




    @media (min-width: 800px) {
    
        .swiper-catalog-mobile {
            display: none !important;
        }
    }




    @media (max-width: 550px) {


        .catalog-text {
            width: 100%;
            padding: 2rem 0  0 ;
            display: flex;   
            flex-direction: column;
            border: none;
            text-align: center;
        }

        .catalog-text h1{
            border-right: none;
            font-size: var(--title-size-media);
            border-bottom: 2px solid lightgray;
        }

        .catalog-text p {
            font-size: var(--subtitle-size-media);
            padding: 1rem;
         
        }



        .swiper-catalog-bottom, .swiper-catalog-top {
            display: none !important;
        }

        .catalog-container-banners{
           
            width: 100%;
            padding-inline: 1rem;
            box-sizing: border-box;
        }

        .swiper-catalog-mobile {

            width: 100%;

        }

        .catalog-banner{
            width: 100%;
            height: 33rem;
        }


        .swiper-catalog-mobile .swiper-slide-catalog {
            display: flex;
            justify-content: center;
            width: 100%;
          }
        
          .swiper-catalog-mobile .catalog-banner {
            width: 100%;
            max-width: none; 
          }

        }