Pagination

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

.pagination {
  display: none;
}

/* Inclusively hidden so it is still read as a label by assistive tech */
.pagination-nav__label {
  height: 1px;
  overflow: hidden;
  position: absolute;
}

@container (min-width: 300px) {
  .pagination-nav__label {
    height: auto;
    overflow: unset;
    position: unset;
  }
}

@container (min-width: 500px) {
  .pagination {
    display: grid;
  }

  .pagination-label {
    display: none;
  }
}