.pagination--box {display: flex;flex-direction: column;gap:16px;--r-size:52px}
.load--more-box {text-align: center;margin-top: 40px}
.load-more {padding: 16px;width: 100%;font-weight: 500;font-size: 16px;color:#000;border: 1px solid transparent;border-radius: 12px;transition: .4s;cursor:pointer}
.load-more:hover {border: 1px solid var(--main);color: var(--main)}

.page--prev svg {transform: rotate(180deg)}
.page--first svg {transform: rotate(180deg)}

.page--current {color:var(--main)}
.page--item {width: var(--r-size);height: var(--r-size);display: flex;align-items: center;justify-content: center;border-radius: 10px;border:1px solid var(--border);transition: .4s;box-shadow: 0 4px 8px 0 #0000000F;}
.page--item:hover {box-shadow: 0px 7px 10px 0px #0000001C;border-color:var(--main)}
.page--nav {display: flex;gap:4px;align-items: center;}

.page--first {margin-right: auto}
.page--last {margin-left: auto}

.page--next, .page--last, .page--prev, .page--first {border-radius: 50%;box-shadow: 0 4px 8px 0 #0000000F;width: var(--r-size);height: var(--r-size);display: flex;align-items: center;justify-content: center;transition: .4s}
.page--next:hover, .page--last:hover, .page--prev:hover, .page--first:hover {box-shadow: 0px 7px 10px 0px #0000001C}

@media all and (max-width: 768px) {
    .page--nav .page--item:nth-child(5),
    .page--nav .page--item:nth-child(6) {display: none}
}

@media all and (max-width: 500px) {
    .page--nav .page--last,
    .page--nav .page--first {display: none}

    .pagination--box {--r-size:44px}
}