Swiper Gallery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swiper Gallery</title>
</head>
<body>
  <div className="gallery">
    <div className="wrapper">
      <div className="item">1</div>
      <div className="item">2</div>
      <div className="item">3</div>
      <div className="item">4</div>
      <div className="item">5</div>
      <div className="item">6</div>
      <div className="item">7</div>
      <div className="item">8</div>
      <div className="item">9</div>
      <div className="item">10</div>
      <div className="item">11</div>
      <div className="item">12</div>
      <div className="item">13</div>
      <div className="item">14</div>
      <div className="item">15</div>
      <div className="item">16</div>
    </div>
  </div>
</body>
</html>

body {
  --space: 1rem;
  --space-md: calc(var(--space) * 2);
  /* --content-max-width: 60ch; */
}

.gallery {
  grid-column: full;
  /* display: grid; */
  grid-template-columns: inherit;
  padding-block: var(--space-md);
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.gallery::-webkit-scrollbar {
  inline-size: 0 !important;
  display: none;
}

.gallery .wrapper {
  grid-column: content;
  display: flex;
  align-items: center;
  gap: var(--space);
}

.gallery .wrapper::after {
  content: "";
  align-self: stretch;
  padding-inline-end: max(var(--space),
      (100vw - var(--content-max-width)) / 2 - var(--space));
}

.gallery .item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  inline-size: 100%;
  max-inline-size: 12rem;
  aspect-ratio: 4 / 3;
  font-size: 2rem;
  background: hotpink;
  border-radius: 4px;
  overflow: hidden;
}

.gallery.alt-sizes .item.lg {
  max-inline-size: 35rem;
}

.gallery.alt-sizes .item.sm {
  max-inline-size: 15rem;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@supports not (aspect-ratio: 1) {
  .gallery .item::before {
    float: left;
    padding-top: 56.25%;
    content: "";
  }

  .gallery .item::after {
    display: block;
    content: "";
    clear: both;
  }
}