<section>
  <div class="list">
    <ul role="list">
      <li class="decoration"><span>Scroll this --&gt;</span></li>
      <li><span>1</span></li>
      <li><span>2</span></li>
      <li><span>3</span></li>
      <li><span>4</span></li>
      <li><span>5</span></li>
      <li><span>6</span></li>
      <li><span>7</span></li>
    </ul>
  </div>
</section>
<div class="warning">This is a demo for state queries, use Chrome Canary and enable the experimental web platform features</div>

@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap");

@layer presentation, scrollsnap;

@layer scrollsnap {
  .list {
    max-width: 90vw;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
  }

  ul {
    display: grid;
    grid-auto-flow: column;
    gap: 1vw;
  }

  li {
    scroll-snap-align: end;
    width: 29vw;
    height: 470px;
    span {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: slateblue;
      transition: background 0.4s ease-out;
    }

    @supports (container-type: scroll-state) {
      container-type: scroll-state;
      @container scroll-state(snapped: inline) {
        span {
          background: lightcoral;
        }
      }
    }
  }

  .decoration {
    width: 60vw;
    scroll-snap-align: none;
    span {
      background: slategray;
    }
  }
}

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

  body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: white;
    background: beige;
    font-family: "Pixelify Sans", sans-serif;
    font-size: 3rem;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
  }
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
}

.warning {
  position: fixed;
  top: 0;
  left: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: black;
  background: yellow;
  padding: 10px;
  @supports (container-type: scroll-state) {
    display: none;
  }
}