/* ============================================
    TA — PAGINATION
    Universal: ta-pagination.
============================================ */

/* ==========================================================================
   PAGINATION
   abbr: ta-pagination
   ========================================================================== */
.ta-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 61px;
}
.ta-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 43px;
    height: 43px;
    padding: 0 12px;
    border-radius: var(--ta-radius-pill);
    background-color: var(--ta-peach);
    font-size: var(--ta-fs-16);
    font-weight: var(--ta-fw-bold);
    line-height: 1;
    color: var(--ta-navy);
}
a.ta-page:hover {
    background-color: #fcd6ab;
    color: var(--ta-navy);
}
.ta-page.is-current {
    background-color: var(--ta-orange);
    color: var(--ta-white);
}
.ta-page-wide {
    min-width: 135px;
}
.ta-page-dots {
    align-self: flex-end;
    padding: 0 4px 10px;
    font-size: var(--ta-fs-16);
    font-weight: var(--ta-fw-bold);
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--ta-navy);
}

@media (max-width: 575.98px) {
    .ta-pagination {
        gap: 6px;
    }
    .ta-page {
        min-width: 36px;
        height: 36px;
        font-size: var(--ta-fs-14);
    }
    .ta-page-wide {
        min-width: 0;
        padding: 0 14px;
    }
}