@layer pages {
    .staldia-pagination {
        margin-top: 2.5rem;
    }
    .staldia-pagination-list {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        justify-content: center;
        font-size: var(--font-size-s);
    }
    .staldia-pagination-link {
        display: grid;
        width: 2.5rem;
        height: 2.5rem;
        place-content: center;
        color: var(--color-accent);
        border: 1px solid var(--color-accent);
        border-radius: 50%;
        background: var(--color-bg-white);
        transition: background .5s, color .5s;
    }
    a.staldia-pagination-link:hover {
        background: var(--color-accent);
        color: var(--color-text-on-accent);
    }
    .staldia-pagination-link.staldia-active {
        background: var(--color-accent);
        color: var(--color-text-on-accent);
    }
    .staldia-pagination-icon-link {
        position: relative;
    }
    .staldia-pagination-icon-link:before {
        content: "";
        position: absolute;
        width: .4rem;
        height: .4rem;
        top: 50%;
        left: 50%;
        --border: 2px solid var(--color-accent);
        transition: border-color .5s;
    }
    .staldia-pagination-icon-link.staldia-prev:before {
        border-top: var(--border);
        border-left: var(--border);
        transform: translate(-35%, -50%) rotate(-45deg);
    }
    .staldia-pagination-icon-link.staldia-next:before {
        border-top: var(--border);
        border-right: var(--border);
        transform: translate(-65%, -50%) rotate(45deg);
    }
    span.staldia-pagination-icon-link {
        opacity: .5;
    }
    a.staldia-pagination-icon-link:hover:before {
        border-color: var(--color-text-on-accent);
    }
    @media (max-width: 319.99px) {
        .staldia-pagination-icon {display: none;}
    }
    @media (max-width: 310px) {
        .staldia-pagination-link {
            width: 2.5rem;
            height: 2.5rem;
        }
    }
    @media (min-width: 600px) {
        .staldia-article-list {
            gap: 2rem;
        }
        .staldia-pagination { margin-top: 5rem; }
        .staldia-pagination-link {
            width: 3rem;
            height: 3rem;
        }
    }
}
@layer override {
    @media (min-width: 600px) {
        .staldia-container-padding.staldia-rounded-bg {
            padding-block: calc(var(--layout-padding-vertical-base) * 1.5);
        }
    }
    @media (min-width: 320px) and (max-width: 599.99px) {
        .staldia-pagination-icon-link,
        .staldia-pagination-icon-link:hover {
            width: 1rem;
            border: none;
            background: none;
            border-radius: 0;
        }
        a.staldia-pagination-icon-link:hover:before {
            border-color: var(--color-accent);
        }
    }
}