#pagination-prev {
    transform: rotate(180deg);
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 50px;
    margin-bottom: 15px;
}

.pagination a {
    text-decoration: none;
    background: white;
    border: 1px solid var(--gray4);
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    color: black;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.pagination a.current {
    background-color: var(--gold);
    color: white;
    border-color: var(--black1);
}
.pagination-nav.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Phone portrait: seven 44px cells + 8px gaps need 356px and a 360px phone has
   328px, so the "next" arrow wrapped onto its own row. 40px cells + 6px gaps
   (316px) fit a 360px phone, still well above the 24px WCAG 2.2 minimum; at
   320px (288px of content) the row wraps, which flex-wrap allows. */
@media (max-width: 640px) {
    .pagination {
        gap: 6px;
        margin-top: 32px;
    }
    .pagination a {
        width: 40px;
        height: 40px;
    }
}