carousel.css

.carousel {
  --width: 90vw;
  --slide: 0;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 16px;
  width: var(--width);

  & .track {
    display: flex;
    width: max-content;
    transition: 400ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transform: translateX(calc(-1 * var(--slide) * var(--width)));

    & .slide {
      & .image {
        width: var(--width);
        aspect-ratio: 16/9;
      }

      & .caption {
        font-size: 70%;
      }
    }
  }

  & .switch-panel {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;

    & .switch {
      --l: 80%;
      appearance: none;
      display: block;
      width: 1rem;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: hsl(190deg, 36%, var(--l));

      &:checked {
        --l: 20%;
      }
    }
  }

  /* Trigger slide change */
  &:has(.switch:nth-of-type(2):checked) {
    --slide: 1;
  }

  &:has(.switch:nth-of-type(3):checked) {
    --slide: 2;
  }

  &:has(.switch:nth-of-type(4):checked) {
    --slide: 3;
  }
}