:root {
      --bg: #eeeeee;
      --frame: #fafafa;
      --accent: #e0a44c;
      --dot: rgba(255, 255, 255, 0.28);
      --radius: 3px;
      --gap: 5px;
      --duration: 5200ms;
      /* time each slide stays on screen */
      --swipe: 850ms;
      /* length of the swipe transition */
      --ease: cubic-bezier(.65, 0, .35, 1);
  }

  * {
      box-sizing: border-box;
  }


  .stage {
      width: 100%;
      touch-action: pan-y;
  }

  .bento {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 200px 200px 200px;
      gap: var(--gap);
      background: var(--frame);
      padding: var(--gap);
      border-radius: calc(var(--radius) + 6px);
      box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  }

  .cell {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      background: #ebebeb;
      isolation: isolate;
  }

  .cell::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%);
      pointer-events: none;
      z-index: 2;
  }

  .cell img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      z-index: 0;
      /* transform is set inline by JS; transition toggled inline too */
  }

  .cell img.active {
      z-index: 1;
  }

  /* bento layout areas */
  .cell-big {
      grid-column: 1 / 3;
      grid-row: 1 / 4;
  }

  .cell-tall {
      grid-column: 4 / 5;
      grid-row: 1 / 3;
  }

  .cell-a {
      grid-column: 3 / 4;
      grid-row: 1 / 2;
  }

  .cell-b {
      grid-column: 3 / 4;
      grid-row: 2 / 3;
  }

  .cell-c {
      grid-column: 3 / 5;
      grid-row: 3 / 4;
  }

  .dots {
      display: flex;
      justify-content: center;
      gap: 2px;
      margin-top: 18px;
  }

  .dot {
      width: 22px;
      height: 3px;
      border-radius: 2px;
      background: var(--dot);
      overflow: hidden;
      position: relative;
  }

  .dot span {
      position: absolute;
      inset: 0;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
  }

  .dot.active span {
      animation: fillDot var(--duration) linear forwards;
  }

  @keyframes fillDot {
      from {
          transform: scaleX(0);
      }

      to {
          transform: scaleX(1);
      }
  }

  @media (max-width: 760px) {
      .bento {
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: 150px 150px 150px 150px;
      }

      .cell-big {
          grid-column: 1 / 3;
          grid-row: 1 / 3;
      }

      .cell-tall {
          grid-column: 1 / 2;
          grid-row: 3 / 5;
      }

      .cell-a {
          grid-column: 2 / 3;
          grid-row: 3 / 4;
      }

      .cell-b {
          grid-column: 2 / 3;
          grid-row: 4 / 5;
      }

      .cell-c {
          display: none;
      }
  }

  @media (prefers-reduced-motion: reduce) {
      .cell img {
          transition: none !important;
      }
  }