/* The help page (/help, /et/help; web/pages/help-page.html), on top of home.css: short how-tos,
   each its heading, a small picture of the app and its steps beside it, one under the other on a
   phone. Only the help page loads this file. */

.contents ol { margin: 8px 0 0; padding-left: 1.4em; columns: 2 16em; column-gap: 40px; max-width: 760px; }
.contents li { break-inside: avoid; }
.contents a { display: inline-flex; align-items: center; min-height: 44px; }
.how-to {
  /* Laid out, and its lazy picture loaded, only as it comes near the screen. */
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  grid-template-areas: "title title" "picture text";
  column-gap: 40px;
  align-items: start;
  padding-top: clamp(40px, 6vw, 72px);
}
.how-to:not(:has(img)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "text"; }
.how-to h2 { grid-area: title; margin-bottom: 18px; max-width: 24ch; }
.how-to img {
  grid-area: picture;
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--board);
}
.how-to-text { grid-area: text; max-width: 36em; }
.how-to ol { margin: 0 0 14px; padding-left: 1.3em; }
.how-to li { margin-bottom: 10px; padding-left: 4px; }
.how-to a { padding-block: 12px; }

@media (max-width: 960px) {
  .how-to { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "picture" "text"; }
  .how-to img { max-width: 360px; margin-bottom: 18px; }
}