.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 20px 0;
  flex-wrap: wrap;
  a {
    text-decoration: none;
    border: 1px solid var(--color-gray-20);
    padding: 0.5em 1em;
    border-radius: 0;
    font-weight: 300;
    font-size: 16px;
    transition:
      background-color 0.3s,
      color 0.3s;

    &:not(:first-of-type) {
      border-left: none;
    }
    &:first-of-type {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    &:last-of-type {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    &:hover,
    &.active {
      background-color: var(--color-gray-20);
      color: var(--text-color);
    }

    @media screen and (max-width: 800px) {
      font-szie: 14px;
    }
  }
}