.pagination {
  background-color: transparent;
}

.pagination ul {
  display: flex;
  gap: 1ch;
  justify-content: center;
  padding-inline-start: 0;
  width: 100%;
}

.pagination a {
  align-items: center;
  color: var(--color-gray-500);
  display: flex;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  height: 3ch;
  justify-content: center;
  letter-spacing: var(--tracking-0);
  line-height: 1.6;
  width: 3ch;
}

.pagination a svg {
  color: var(--color-orange-500);
}

.pagination a:hover {
  color: var(--color-orange-500);
}

.pagination a:hover svg {
  color: var(--color-orange-700);
}

.pagination a:focus {
  color: var(--color-orange-500);
}

.pagination a:focus svg {
  color: var(--color-orange-700);
}

.pagination a:active {
  color: var(--color-orange-500);
}

.pagination a:active svg {
  color: var(--color-orange-700);
}

.pagination a:active:focus {
  color: var(--color-orange-500);
}

.pagination a:active:focus svg {
  color: var(--color-orange-700);
}

.pagination a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: var(--size-1);
}

.pagination a[aria-current='page']::before {
  display: none;
}