<div class="slideshow">
  <div class="slides-container">
    <div class="slides">
      <img class="slide" src="https://picsum.photos/600/300?v=1" alt="">
      <img class="slide" src="https://picsum.photos/600/300?v=2" alt="">
      <img class="slide" src="https://picsum.photos/600/300?v=3" alt="">
      <img class="slide" src="https://picsum.photos/600/300?v=4" alt="">
      <img class="slide" src="https://picsum.photos/600/300?v=5" alt="">
    </div>
  </div>
  <div class="bullets">
  </div>
  <div class="buttons">
    <button type="button" class="prev">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
      </svg>

    </button>
    <button type="button" class="next">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
      </svg>
    </button>
  </div>
</div>

*,
*:before,
*:after {
  box-sizing: border-box;
}

:root {
  --max-size: 600px;
  --size: min(var(--max-size), 100vw);
  --active: 0;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

.slideshow {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;
  gap: 10px;
  width: var(--size);
}

.slides-container {
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
  border-radius: clamp(
    0px,
    (100vw - var(--max-size)) * 999,
    15px
  );
}

.slides {
  display: flex;
  transform: translateX(calc(-1 * var(--size) * var(--active)));
  transition: transform 0.3s ease;
}

img {
  width: var(--size);
}

.buttons {
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  grid-column: 1;
  grid-row: 1;
  pointer-events: none;

  button {
    pointer-events: all;
    width: 40px;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    border-radius: 100vw;
    border: none;
    background: #fff;
    transition: all 0.2s ease;
    cursor: pointer;
    opacity: 0.4;

    &:hover {
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
      opacity: 0.8;
    }
  }
}

.bullets {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  height: 12px;

  .bullet {
    aspect-ratio: 1;
    width: 12px;
    background: #333;
    border-radius: 100vw;
    cursor: pointer;

    &.active {
      box-shadow: inset 0 0 0 2px #000;
      background: #fff;
    }
  }
}