body, ul {
    margin: 0;
  }
  
  #thumbnails {
    display: grid;
    height: 100%;
    overflow: auto;
    list-style: none;
    will-change: opacity;
  }
  
  ul img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  #thumbnails {
    --columns: 4;
    --gutter: 20px;
    --size: calc((100vw - (var(--columns) + 1) * var(--gutter)) / var(--columns));
    grid: auto-flow var(--size) / repeat(var(--columns), 1fr);
    gap: var(--gutter);
    padding: var(--gutter);
    box-sizing: border-box;
  }
  
  @media (max-width: 450px) {
    #thumbnails {
      --columns: 2;
      --gutter: 15px;
    }
  }
  
  #scroller {
    grid: 100% / auto-flow 100%;
    scroll-snap-type: x mandatory;
    padding: 0;
  }
  
  #scroller li {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  
  .hidden {
    visibility: hidden;
  }