/* Sections: the horizontal bands a page is made of.
 *   <section class="ui-section ui-section--sunken">
 *     <div class="ui-container">
 *       <div class="ui-section__head"><h2 class="ui-h2">...</h2><p class="ui-section__aside">...</p></div>
 *       ...
 * --surface, --sunken, --band   the three backgrounds (none = the page colour)
 * __strip with __item children   a row that scrolls sideways below 900 px and
 *                                sits in equal columns from 900 px
 */

.ui-section {
  padding-block: var(--ui-section-pad);
}

.ui-section--surface {
  background: var(--ui-color-surface);
  border-block: 1px solid var(--ui-color-line);
}

.ui-section--sunken {
  background: var(--ui-color-sunken);
}

.ui-section--band {
  background: var(--ui-color-band);
  color: var(--ui-color-on-band);
}

.ui-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-2) var(--ui-space-5);
  margin-bottom: var(--ui-space-6);
}

.ui-section__aside {
  margin: 0;
  font-size: var(--ui-text-sm);
  color: var(--ui-color-ink-soft);
}

.ui-section--band .ui-section__aside {
  color: var(--ui-color-on-band-muted);
}

.ui-section__strip {
  display: flex;
  gap: var(--ui-space-3);
  margin-inline: calc(-1 * var(--ui-gutter));
  padding: 2px var(--ui-gutter) var(--ui-space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ui-gutter);
}

.ui-section__item {
  flex: 0 0 min(15rem, 80%);
  scroll-snap-align: start;
}

@media (min-width: 900px) {
  .ui-section__strip {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--ui-space-4);
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
}