<main>
  <div class="carousel-container">
    <div class="carousel-slide">1</div>
    <div class="carousel-slide">2</div>
    <div class="carousel-slide">3</div>
    <div class="carousel-slide">4</div>
    <div class="carousel-slide">5</div>
    <div class="carousel-slide">6</div>
    <div class="carousel-slide">7</div>
    <div class="carousel-slide">8</div>
  </div>
</main>

<footer>
  <p>
    Pen by <a href="https://www.jemimaabu.com" target="_blank">Jemima Abu</a><span style="color: #D11E15"> &#9829;</span>
  </p>
</footer>

body {
  margin: 0;
  position: relative;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding-bottom: 64px;
}

.carousel-container {
  width: 100%;
  padding-block: 16px 32px;
  margin: 16px 32px;
  overflow-x: auto;
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: center;
  scroll-snap-type: x mandatory;
}

.carousel-container::-webkit-scrollbar {
  height: 14px;
  width: calc(100% - 48px);
}

.carousel-container::-webkit-scrollbar-track {
  background: #b1b3b399;
}

.carousel-container::-webkit-scrollbar-thumb {
  background: #29AB87;
}

.carousel-container::-webkit-scrollbar-track-piece:start {
  background: #29AB87;
}

.carousel-slide {
  flex: 1 0 30%;
  aspect-ratio: 1;
  flex-flow: column nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #bae;
  scroll-snap-align: center;
}

@media (max-width: 600px) {
  .carousel-slide {
    flex: 1 0 90%;
  }
}

footer {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  text-align: center;
  padding: 16px;
  background-color: #eaeaea90;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

footer p {
  color: #221133;
  margin: 0;
}

footer a {
  text-decoration: none;
  color: inherit;
}