.pager__items {
    margin: auto;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 2px;
    padding-top: 32px;

    & a {
        color: #94B0B4;
        padding: 8px 12px;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    & .pager__item {
        overflow: clip;
        border-radius: 8px 0 8px 0;
    }

    & .pager__item.is-active {
        color: var(--color-driftwood);
        background: #415554;
    }

    & .pager__item {
        display: none;
    }    
    & .pager__item--previous,
    & .pager__item--next {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    & .pager__item--previous a::before,
    & .pager__item--next a::after {
        content: '';
        background-color: var(--color-mist);
        display: flex;
        width: 24px;
        height: 24px;
    }
    
    & .pager__item--previous a::before {
        --icon-src: url("/modules/custom/ui_icons_boxicons/node_modules/boxicons/svg/regular/bx-chevron-left.svg");
        mask-image: var(--icon-src);
    }

    & .pager__item--next a::after {
        --icon-src: url("/modules/custom/ui_icons_boxicons/node_modules/boxicons/svg/regular/bx-chevron-right.svg");
        mask-image: var(--icon-src);
    }

    &:has(.pager__item--previous):has(.pager__item--next) {

        & .pager__item--previous,
        & .pager__item--next {
            flex-grow: 1;
        }
    }

    & .pager__item--next {
        justify-content: flex-end;
    }

    @media (min-width: 768px) {
        & .pager__item {
            display: flex;
        }
    }
    
    & .pager__item--first,
    & .pager__item--last {
        display: none;
    }
}