.container {
  display: grid;
  grid-auto-flow: row;
  inline-size: 100%;
}

.heading {
  font-size: 2em;
}

.list {
  display: grid;
  grid-auto-flow: column;

  gap: 2em;
  padding: 12em 4em 5em;
  scroll-padding: 4em;
  margin: -10em -4em 0em;

  overflow: visible auto;
  scroll-snap-type: inline proximity;

  @media (hover: none) {
    padding: 5em;
    margin: 0;

    & > * {
      scroll-snap-align: start;
    }
  }
}