<h1>Pagination Demo</h1>
<h2>"Big" or "Little" mode</h2>
<div class="pagination-container">
  <a href="#1" class="previous">&lt;</a>
  <ul class="page-links">
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
    <li><a href="#6">6</a></li>
    <li><a href="#7">7</a></li>
    <li><a href="#8">8</a></li>
    <li><a href="#9">9</a></li>
    <li><a href="#10">10</a></li>
  </ul>
  <form action="" class="page-form">
    <label for="page-select">Page:</label>
    <select name="page" id="page-select">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <button>Go</button>
  </form>
  <a href="#1" class="next">&gt;</a>
</div>
<h2>Always "Little" mode</h2>
<div class="pagination-container" style="max-width: 29ch;">
  <a href="#1" class="previous">&lt;</a>
  <ul class="page-links">
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
    <li><a href="#6">6</a></li>
    <li><a href="#7">7</a></li>
    <li><a href="#8">8</a></li>
    <li><a href="#9">9</a></li>
    <li><a href="#10">10</a></li>
  </ul>
  <form action="" class="page-form">
    <label for="page-select">Page:</label>
    <select name="page" id="page-select">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <button>Go</button>
  </form>
  <a href="#1" class="next">&gt;</a>
</div>

@import url('https://fonts.bunny.net/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

.pagination-container {
  container: pagination / inline-size;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1ch;
  font-size: 1.4rem;
  border: 2px solid hotpink;
}

.page-links {
  display: none;
  list-style: none;
  gap: 1ch;
  margin: 0;
  padding: 0;

  @container pagination (min-width: 30ch) {
    display: flex;
  }
}

.page-form {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  @container pagination (min-width: 30ch) {
    display: none;
  }
}


body {
  font-family: "Comic Neue", "Segoe Print", "Bradley Hand", Chilanka,
    TSCu_Comic, casual, cursive;
  font-weight: normal;
}