<div class="carousel">
  <ul class="carousel__slides">
    <li class="carousel__slide">
      <img src="https://picsum.photos/id/33/1600/900" />
      <p>
        夕暮れの草原に佇む小さな白い花。逆光に照らされた繊細な花びらが輝き、背景のぼかされた草木と溶け合う。自然の静けさと儚さを切り取った一瞬の風景。
      </p>
    </li>
    <li class="carousel__slide">
      <img src="https://picsum.photos/id/39/1600/900" />
      <p>
        レコードプレーヤーのクローズアップ。黒いターンテーブルの縁とレコード針が鮮明に写っています。背景はソフトにぼかされており、アナログ音楽の温かみを感じさせる洗練された構図です。
      </p>
    </li>
    <li class="carousel__slide">
      <img src="https://picsum.photos/id/42/1600/900" />
      <p>
        落ち着いたカフェの内装。手前には木製の大きなテーブルがあり、その上に緑色のコーヒーカップとスマートフォンが置かれています。大きな窓からは自然光が差し込み、温かみのある居心地の良い空間を演出しています。
      </p>
    </li>
    <li class="carousel__slide">
      <img src="https://picsum.photos/id/57/1600/900" />
      <p>
        ニューヨークのソーホー地区を思わせる石畳の通り。両側には歴史的な赤レンガの建物が立ち並び、特徴的な非常階段が壁面を彩る。朝か夕方の柔らかな光が通りに静かな雰囲気を与えている。
      </p>
    </li>
  </ul>
</div>

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

body {
  padding: 36px;
  font-family: sans-serif;
}

.carousel {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  position: relative;
}

.carousel__slides {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;

  &::scroll-button(*) {
    position: absolute;
    top: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    translate: 0 -50%;
    transition: scale 0.3s ease-in-out, background 0.3s ease-in-out;
  }

  &::scroll-button(*):disabled {
    cursor: not-allowed;
    color: rgba(255, 255, 255, 0.5);
  }

  &::scroll-button(*):not(:disabled):hover,
  &::scroll-button(*):not(:disabled):focus-visible {
    scale: 1.2;
    background: rgba(0, 0, 0, 0.7);
  }

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
    left: 16px;
  }

  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
    right: 16px;
  }

  scroll-marker-group: after;

  &::scroll-marker-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 16px;
    gap: 10px;
  }
}

.carousel__slide {
  list-style: none;
  position: relative;
  flex: 0 0 80%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  container-type: scroll-state;
  scroll-snap-align: center;
  scroll-snap-stop: always;

  > img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: filter 0.3s ease-in-out, scale 0.3s ease-in-out;

    @container not scroll-state(snapped: x) {
      filter: brightness(0.4);
      scale: 0.9;
    }
  }

  > p {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.5);
    padding: 24px;
    width: 100%;
    transition: translate 0.3s ease-in-out, opacity 0.6s ease-in-out;
    translate: 0 100%;
    opacity: 0;

    @container scroll-state(snapped: x) {
      opacity: 1;
      translate: 0 0;
    }
  }

  &:first-child {
    margin-left: 24px;
  }

  &:last-child {
    margin-right: 24px;
  }

  &::scroll-marker {
    display: block;
    content: "";
    aspect-ratio: 16 / 9;
    background-size: cover;
    transition: filter 0.3s ease-in-out;
    filter: brightness(0.4);
  }
  &::scroll-marker:target-current {
    filter: brightness(1);
  }
  &:nth-child(1)::scroll-marker {
    background-image: url("https://picsum.photos/id/33/160/90");
  }
  &:nth-child(2)::scroll-marker {
    background-image: url("https://picsum.photos/id/39/160/90");
  }
  &:nth-child(3)::scroll-marker {
    background-image: url("https://picsum.photos/id/42/160/90");
  }
  &:nth-child(4)::scroll-marker {
    background-image: url("https://picsum.photos/id/57/160/90");
  }
}