ul.yiiPager {
    margin-top: 100px;
    margin-bottom: 100px;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

ul.yiiPager li {
    width: 50px;
    height: 50px;
    flex-shrink: 0;

    @media (any-hover: hover) {

        &:not(.selected):hover a,
        &:not(.selected):hover span {
            opacity: 0.75;
        }
    }
}

ul.yiiPager li.selected a,
ul.yiiPager li.selected span {
    background: var(--yellow);
    font-weight: 600;
}

ul.yiiPager li.previous a,
ul.yiiPager li.next a {
    background: var(--darkGrey);
    color: #fff;
}

ul.yiiPager li.previous a img {
    transform: rotate(180deg);
}

ul.yiiPager li.previous a img,
ul.yiiPager li.next a img {
    width: 24px;
    height: 24px;
}

ul.yiiPager a,
ul.yiiPager span {
    width: inherit;
    height: inherit;
    border-radius: 4px;
    background: #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--darkGrey);
    text-align: center;
    font-family: var(--sfPro);
    font-size: 24px;
    font-weight: 400;
    line-height: 120%;
    transition: opacity .3s ease-in-out;
}

ul.yiiPager li.previous,
ul.yiiPager li.next
{
    display:none;
}

@media screen and (width < 825px) {
    ul.yiiPager {
        gap: 8px;
    }

    ul.yiiPager li {
        width: 30px;
        height: 30px;
    }

    ul.yiiPager li.previous a img,
    ul.yiiPager li.next a img {
        width: 14px;
        height: 14px;
    }

    ul.yiiPager a,
    ul.yiiPager span {
        font-size: 15px;
    }
}