nav.hs-pagination{
     --pagination-default-color: var(--sn-grey-50, #EAEAED);
     --pagination-default-text-color: var(--sn-black, #181818);
     --pagination-active-color: var(--sn-yellow, #FE9A03);
     --pagination-active-text-color: var(--white, #fff);
     --pagination-hover-color: var(--sn-light-blue, #FE9A03);
     --pagination-hover-text-color: var(--white, #fff);
  
     --pagination-nav-default-text-color: var(--sn-grey-300, #828294);
     --pagination-nav-hover-text-color: var(--sn-black, #181818);
    
     display: flex;
     gap: 8px;
     flex-direction: row;
     flex-wrap: nowrap;
     margin-bottom: 40px;
}
 .hs-pagination__link{
     margin: 0;
}
 .hs-pagination__link--number{
     display: flex;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
     height: 32px;
     width: 32px;
     padding: 8px;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 1px;
     line-height: 100%;
     background: transparent;
     color: var(--pagination-default-text-color);
     border-radius: 4px;
     border: 1px solid var(--pagination-default-color);
     transition: all .3s ease;
}
 .hs-pagination__link--number:hover{
     background: var(--pagination-hover-color);
     border-color: var(--pagination-hover-color);
     color: var(--pagination-hover-text-color);
}
 .hs-pagination__link.hs-pagination__link--active{
     border-color: background: var(--pagination-active-color);
     background: var(--pagination-active-color);
     color: var(--pagination-active-text-color);
}
 .hs-pagination__link--text-and-icon{
     padding: 8px;
     font-size: 13px;
     font-weight: 500;
     color: var(--pagination-nav-default-text-color);
     transition: all .3s ease;
}
 .hs-pagination__link--text-and-icon:hover{
     color: var(--pagination-nav-hover-text-color);
}
 @media screen and (max-width: 767px) {
     .hs-pagination__link--text-and-icon .hs-pagination__link-icon svg{
         fill: var(--pagination-nav-default-text-color);
    }
     .hs-pagination__link--text-and-icon .hs-pagination__link-icon:hover svg{
         fill: var(--pagination-nav-hover-text-color);
    }
}
 @media screen and (min-width: 768px) {
     nav.hs-pagination{
         gap: 4px;
    }
     .hs-pagination__link--text-and-icon .hs-pagination__link-icon{
         position: absolute;
         width: 1px;
         height: 1px;
         padding: 0;
         margin: -1px;
         overflow: hidden;
         clip: rect(0, 0, 0, 0);
         white-space: nowrap;
         border-width: 0;
    }
}
 @media screen and (min-width: 1220px) {
     nav.hs-pagination{
         margin-bottom: 80px;
    }
}