.pagination {
    display: flex;
    margin-block: var(--size-3);
    place-items: center start;
    justify-content: space-between;

    @media screen and (max-width: 768px) {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--size-3);
        text-align: center;
    }

    .showing {
        text-align: center;
        font-size: var(--font-size-0);

        @media screen and (max-width: 768px) {
            width: 100%;
        }
    }

    .links {
        display: flex;
        place-items: center;

        margin: 0;
        padding: 0;

        list-style-type: none;

        font-size: var(--font-size-2);
        font-weight: var(--font-weight-3);
        text-align: center;

        li {
            display: flex;
            place-items: stretch;
            padding: var(--size-1) var(--size-3);

            border-radius: var(--radius-2);

            &:first-child,
            &:last-child {
                padding-inline: var(--size-2);
            }

            &.active {

                background-color: color-mix(in srgb, var(--color-steel) 10%, transparent);

                a {
                    opacity: 0.2;
                }
            }

            &.disabled {
                opacity: 0.2;
            }

            &:hover {
                background-color: color-mix(in srgb, var(--color-midnight) 10%, transparent);
            }
        }

        @media screen and (max-width: 768px) {
            display: table;
            width: 100%;
            table-layout: fixed;

            li {
                display: table-cell;
                text-align: center;
                padding: var(--size-1) var(--size-2);

                &.previous,
                &.next {
                    display: none;
                }

                .separator {
                    padding-inline: 0px;
                }
            }
        }

        a {
            display: block;
            text-decoration: none;


            &:hover {
                color: var(--color-darkblue);
            }
        }
    }
}