.pagination {
    display: flex;
    gap: var(--border-width);
    margin-top: var(--spacing-grid);
}
.pagination__left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.pagination__right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.pagination__left, .pagination__right {
    color: var(--color-title);
    background: var(--background-900);
    text-align: center;
    width: 1rem;
}
.pagination__left i, .pagination__right i {
    margin: 0;
    opacity: .5;
}
.pagination__left:hover i, .pagination__right:hover i {
    opacity: 1;
}
.pagination__left:hover i {
    transform: rotate(15deg);
}
.pagination__body {
    border-radius: 0;
    background: var(--background-900);
    text-transform: uppercase;
    color: var(--color-title);
}
.pagination__body span {
    opacity: .5;
    color: var(--color-text);
}
@media only screen and (max-width: 520px) {
    .pagination {
        margin-top: var(--spacing-m);
    }
}