/* /how-to: short demo clips, one entry each, between hairlines with no box.
   Loads after style.css and page.css and uses only the tokens declared in
   style.css. Clips are 9:16 and capped so one fits a laptop screen. */

.how-item {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--line);
}
.how-item:last-of-type { border-bottom: 1px solid var(--line); }
.how-item h2 { margin: 0 0 var(--s-2); }
.how-item p { margin: 0; }

.how-item__video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(70vh, 640px);
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  background: var(--bg-alt);
  object-fit: contain;
}

/* From tablet width the words sit beside the clip, so a short entry does not
   leave a screen of empty paper. */
@media (min-width: 768px) {
  .how-item {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s-7);
    align-items: start;
  }
}