.popular-categories {
    margin: 80px 0;
}


.popular-categories-header {
    text-align: center;
    margin-bottom: 35px;
}


.popular-categories-header h2 {
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    color: #111;
    margin: 0;
}



/* slider */

.popular-categories-swiper {
    padding: 15px 55px 40px;
}



/* karta */

.popular-category-item {
    height: 100%;
}


.popular-category-item a {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    text-decoration: none;
}



/* obrazek */

.popular-category-image {

    position: relative;

    width:100%;

    aspect-ratio: 1 / 1.15;

    overflow:hidden;

    border-radius:26px;

    background:#f3f3f3;

}



.popular-category-image img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .6s ease;

}



/* gradient */

.popular-category-image:after {

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:60%;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.75)
        );

}



/* nazwa na zdjęciu */

.popular-category-name {

    position:absolute;

    bottom:25px;

    left:25px;

    right:25px;

    z-index:2;

    color:white;

    font-size:22px;

    font-weight:700;

    text-align:left;

    letter-spacing:.2px;

}



/* hover */

.popular-category-item a {

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}



.popular-category-item:hover a {

    transform:translateY(-8px);

    box-shadow:
        0 25px 50px rgba(0,0,0,.18);

}



.popular-category-item:hover img {

    transform:scale(1.08);

}



/* strzałki */

.popular-categories .swiper-button-next,
.popular-categories .swiper-button-prev {

    width:50px;

    height:50px;

    background:#fff;

    border-radius:50%;

    box-shadow:
        0 10px 30px rgba(0,0,0,.18);

    color:#111;

}



.popular-categories .swiper-button-next:after,
.popular-categories .swiper-button-prev:after {

    font-size:18px;

    font-weight:800;

}



/* mobile */

@media(max-width:991px){

    .popular-categories {

        margin:55px 0;

    }


    .popular-categories-header h2 {

        font-size:30px;

    }


    .popular-categories-swiper {

        padding-left:20px;

        padding-right:20px;

    }


}


@media(max-width:575px){

    .popular-category-name {

        font-size:18px;

        bottom:18px;

        left:18px;

    }


    .popular-category-image {

        border-radius:20px;

    }


    .popular-categories .swiper-button-next,
    .popular-categories .swiper-button-prev {

        display:none;

    }

}