.s-products{
    padding-top:1.25rem;
    padding-bottom:2.5rem;
}
.products-list{
    display:flex;
    flex-wrap:wrap;
    gap:1.875rem;
}
.products-list li{
    width:100%;
}
.products-list li a{
    display:inline-flex;
    flex-direction:column;
    gap:1.25rem;
    width:100%;
}
.product-img{
    display:block;
    height:clamp(22.5rem,9.7vi + 20.23rem,27.5rem);
    overflow:hidden;
}
.product-img img{
    height:100%;
    object-fit:cover;
    object-position:center;
}
.pagination{
    margin-top:3.75rem;
}
.pagination-list{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.625rem;
}
.pagination-list li{
    line-height:1;
}
.pagination-list a,
.pagination-list span{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:calc(1.5rem + .125rem);
    height:calc(1.5rem + .125rem);
    line-height:1;
    padding:.125rem;
}
.nav-btn svg{
    width:.625rem;
}
.nav-btn.prev-arr{
    margin-right:.625rem;
}
.nav-btn.next-arr{
    margin-left:.625rem;
}
.pagination-list span.current::after{
    content:'';
    position:absolute;
    bottom:-.25rem;
    left:0;
    width:100%;
    height:.063rem;
    background-color:var(--hex-primary);
    z-index:-1;
}
.pagination-list a:hover{
    border:.063rem solid var(--hex-primary);
    border-radius:50%;
}
.pagination-list .nav-btn.prev-arr a:hover,
.pagination-list .nav-btn.next-arr a:hover{
    border:0;
}
/*-- media query 60rem --*/
@media screen and (min-width:60rem){
    .products-list li{
        width:calc(33.33333% - 1.25rem);
        overflow:hidden;
    }
    .s-products{
        padding-top:2.5rem;
    }
}