.pagination {
  overflow: hidden;
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;

  .page, .next, .prev {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.7em;
    height: 2.7em;
    font-size: 1em;
    border-radius: 50%;
    margin: 0 3px;

    &.current, &:hover {
      background-color: var(--color-bg-brand-secondary);
      color: var(--color-bg-brand-solid);
    }

    &.current {
      font-weight: var(--weight-semi-bold);
    }

    &.gap:hover {
      background-color: initial;
    }
  }

  .next, .prev {
    color: var(--color-bg-brand-solid);
  }
}

@media(min-width: 600px) {
  .pagination {
    .page, .next, .prev {
      width: 3em;
      height: 3em;
      font-size: 15px;
      margin: 0 7px;
    }
  }
}