@layer modules {
  #every-way {
    nav {
      display: flex;
      gap: 1rem;
      padding: 0 2rem;
      margin: 5rem -2rem;
      position: relative;
      overflow: auto clip;
      a {
        text-decoration: none;
        padding: .375rem .75rem;
        color: inherit;
        border-radius: .5rem;
        border: 1px solid #A1A6BD;
        white-space: nowrap;
      }
    }
    h3 {
      font-size: clamp(1rem, .8vw + .9rem, 1.2rem);
    }
    ul {
      scroll-snap-type: inline mandatory;
      scroll-behavior: smooth;
      display: flex;
      gap: 4rem;
      padding: 0 2rem;
      margin: 0 -2rem;
      overflow: scroll;
      list-style: none;
    }
    li {
      flex: 0 0 100%;
      scroll-snap-align: center;
      img {
        width: calc(100% - 20rem);
        height: auto;
        float: right;
        margin: 0 0 0 4rem;
      }
      @media(width < 900px){
        h3 { display: none; }
        img {
          float: none;
          margin: 0 0 2rem;
          width: 100%;
        }
      }
    }
    &.manual-scroll {
      ul {
        display: grid;
        grid: auto / auto;
        overflow: clip;
      }
      li {
        grid-area: 1 / 1;
        opacity: 0;
        translate: -2rem 0;
        transition: opacity .3s, translate .3s;
        li.selected ~ & { translate: 2rem 0; }
      }
      a {
        text-align: center;
        &::after {
          content: attr(data-label) / "";
          content: attr(data-label);
          display: block;
          height: 1px;
          margin-top: -1px;
          color: transparent;
          font-weight: 600;
        }
        &.selected {
          font-weight: 600;
          border-color: currentcolor;
        }
      }
      li.selected {
        opacity: 1;
        translate: 0;
      }
    }
  }
}