<nav class="pagination__container">
  <ul class="pagination">
    <li class="prev"><a href="#">
        <svg t="1638460279078" class="icon icon__prev" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10124" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
          <defs>
            <style type="text/css"></style>
          </defs>
          <path d="M701.41952 852.35712a47.18592 47.18592 0 0 1-57.344-4.11648L333.9264 571.53536a79.60576 79.60576 0 0 1 0-119.05024L644.05504 175.73888a47.18592 47.18592 0 0 1 58.83904-3.072c15.29856 11.30496 18.45248 32.768 7.04512 47.9232l-192.14336 255.488a59.65824 59.65824 0 0 0 0 71.80288l192.14336 255.488 1.06496 1.47456a34.05824 34.05824 0 0 1-9.58464 47.49312z" p-id="10125" fill="currentColor"></path>
        </svg>
      </a></li>
    <li class="first"><a href="#">1</a></li>
    <li class="more"><span><svg t="1638534255503" class="icon icon__more" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2311" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
          <defs>
            <style type="text/css"></style>
          </defs>
          <path d="M224 608c-52.928 0-96-43.072-96-96s43.072-96 96-96c52.928 0 96 43.072 96 96S276.928 608 224 608z" p-id="2312"></path>
          <path d="M512 608c-52.928 0-96-43.072-96-96s43.072-96 96-96c52.928 0 96 43.072 96 96S564.928 608 512 608z" p-id="2313"></path>
          <path d="M800 608c-52.928 0-96-43.072-96-96s43.072-96 96-96c52.928 0 96 43.072 96 96S852.928 608 800 608z" p-id="2314" fill="currentColor"></path>
        </svg>
      </span></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li class="active"><span>5</span></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li class="more"><span>
        <svg t="1638534255503" class="icon icon__more" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2311" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
          <defs>
            <style type="text/css"></style>
          </defs>
          <path d="M224 608c-52.928 0-96-43.072-96-96s43.072-96 96-96c52.928 0 96 43.072 96 96S276.928 608 224 608z" p-id="2312"></path>
          <path d="M512 608c-52.928 0-96-43.072-96-96s43.072-96 96-96c52.928 0 96 43.072 96 96S564.928 608 512 608z" p-id="2313"></path>
          <path d="M800 608c-52.928 0-96-43.072-96-96s43.072-96 96-96c52.928 0 96 43.072 96 96S852.928 608 800 608z" p-id="2314" fill="currentColor"></path>
        </svg>
      </span></li>
    <li class="last"><a href="#">10</a></li>
    <li class="next"><a href="#">
        <svg t="1638460301528" class="icon icon__next" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12204" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
          <defs>
            <style type="text/css"></style>
          </defs>
          <path d="M322.58048 852.35712a34.05824 34.05824 0 0 1-8.51968-48.9472l192.14336-255.50848a59.65824 59.65824 0 0 0 0-71.80288l-192.14336-255.488a34.03776 34.03776 0 0 1 8.51968-48.9472 47.18592 47.18592 0 0 1 57.344 4.096l310.12864 276.70528a79.60576 79.60576 0 0 1 0 119.07072l-310.10816 276.6848a47.18592 47.18592 0 0 1-57.344 4.13696z" p-id="12205" fill="currentColor"></path>
        </svg>
      </a></li>
  </ul>
</nav>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  padding: 20px;

  display: grid;
  place-content: center;
}

ul {
  list-style: none outside none;
}

svg {
  width: 1em;
  height: 1em;
}

.pagination__container {
  min-inline-size: 320px;
  max-inline-size: 80vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  resize: horizontal;
}

.pagination {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 4px solid #dedbdb;
  padding: 14px 24px;
  border-radius: 10rem;
}

.pagination li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.pagination li:not(.prev):not(.next) a,
.pagination li span {
  display: inline-flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #dedbdb;
  text-decoration: none;
  color: #231f1f;
  font-size: 22px;
  transition: all 0.2s ease;
}
.pagination li:not(.prev):not(.next) a:hover {
  background-color: #008fff;
  color: #fff;
}

.pagination .active span {
  background-color: #008fff;
  color: #fff;
}

.pagination .prev a,
.pagination .next a {
  font-size: 40px;
  color: #dedbdb;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.pagination .prev a {
  padding-right: 24px;
}

.pagination .next a {
  padding-left: 24px;
}

.pagination .prev a::before,
.pagination .next a::before {
  content: "";
  position: absolute;
  top: -18px;
  bottom: -20px;
  width: 4px;
  background-color: currentColor;
}

.pagination .prev a::before {
  right: 0;
}

.pagination .next a::before {
  left: 0;
}

.pagination .prev a:hover,
.pagination .next a:hover {
  color: #008fff;
}

.pagination .prev a:hover::before,
.pagination .next a:hover::before {
  color: #dedbdb;
}

.pagination li:not(.prev):not(.next) a,
.pagination li:not(.active) span {
  display: none;
}

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

@container (width > 540px) {
  .pagination li.first a,
  .pagination li.last a,
  .pagination li.more span {
    display: inline-flex !important;
  }
}

@container (width > 768px) {
  .pagination li a,
  .pagination li span {
    display: inline-flex !important;
  }
}