.pagination-nav {
  container-type: inline-size;
}

.pagination-nav ul {
  align-items: center;
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination-nav a {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.5rem;
  white-space: nowrap;
}

/* Don't remove this unless you replace it with
   an equally obvious focus indicator. */
.pagination-nav a:focus-visible {
  outline-offset: var(--focus-outline-offset);
  outline: var(--focus-outline);
}

.pagination-nav svg {
  flex: 0 0 auto;
}

@container (max-width: 32rem) {
  .pagination-nav ul {
    gap: 0.25rem;
    justify-content: space-between;
  }

  .pagination-nav a span {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}