@layer components {
    .pagination {
        display: flex;
        justify-content: center;
        gap: var(--size-2);
        align-items: center;
        list-style-type: none;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;

        & li {
            border: 1px solid var(--color-border-grey);

            :is(a, span) {
                padding: var(--size-2) var(--size-3);
                display: block;
                text-decoration: none;
                color: var(--color-text);
            }

            &.active {
                background-color: var(--color-light-grey);
            }
        }
    }
}