/* Nov 3, 2026, review 1353 (Kelly), items 3, 4 and 5 on the homepage. Loaded after review1353.css. */

/* 3 and 4: from 1280 the card and the laptop are re-measured so the gold arrow sits exactly midway between them (its column is the
   only thing between the two pictures, the arrow centred in it). 3: card shorter and wider; laptop takes the rest to the page margin.
   4: words column 30% of the content, bigger card. */
@media (min-width: 1280px) {
  html body #main#main#main#main#main #example-brand-guide .wrap.v3col { --w: 376px; --c: 280px; --a: 72px; grid-template-columns: var(--w) 24px var(--c) var(--a) minmax(0, 1fr) !important; }
  html body #main#main#main#main#main #how .wrap.ow3col { --w: 30%; --c: clamp(280px, 21.5vw, 340px); --a: 72px; grid-template-columns: var(--w) 24px var(--c) var(--a) minmax(0, 1fr) !important; }
  html body #main#main#main#main#main :is(#example-brand-guide .vqcard, #how .owadd) { width: var(--c) !important; justify-self: stretch !important; }
  html body #main#main#main#main#main :is(#example-brand-guide, #how) .varrow { width: var(--a) !important; justify-self: stretch !important; }
  html body #main#main#main#main#main :is(#example-brand-guide, #how) .varrow svg { transform: translateX(.375px) !important; }
  html body #main#main#main#main#main #example-brand-guide .vqcard .baq, html body #main#main#main#main#main #example-brand-guide .vqcard .baa { font-size: 13px !important; line-height: 1.45 !important; }
}
@media (min-width: 1440px) {
  html body #main#main#main#main#main #example-brand-guide .wrap.v3col { --w: 392px; --c: 290px; --a: 76px; }
  html body #main#main#main#main#main #how .wrap.ow3col { --a: 80px; }
}

/* 5: left and right from 1024: headline and a narrow paragraph on the left, the four devices much bigger on the right. */
@media (min-width: 1024px) {
  html body #main#main#main#main#main #devices > .wrap { display: grid !important; grid-template-columns: var(--dl) minmax(0, 1fr); column-gap: 24px; align-items: center; text-align: left !important; box-sizing: border-box; max-width: 1664px !important; padding-left: 24px !important; padding-right: 24px !important; --dl: 300px; }
  html body #main#main#main#main#main #devices > .wrap > :is(.k, h2, .lede) { grid-column: 1; text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
  html body #main#main#main#main#main #devices > .wrap > .k { align-self: end; }
  html body #main#main#main#main#main #devices > .wrap > .lede { align-self: start; }
  html body #main#main#main#main#main #devices h2 { font-size: clamp(26px, 2.4vw, 40px) !important; }
  html body #main#main#main#main#main #devices .devlede .dl1 { white-space: normal !important; font-size: inherit !important; }
  html body #main#main#main#main#main #devices .devs2 { grid-column: 2; grid-row: 1 / span 3; margin: 0 !important; transform: none !important; zoom: 1 !important; max-width: none !important; width: calc((100% - 6px) / 1.071) !important; justify-self: start; }
}
@media (min-width: 1280px) {
  html body #main#main#main#main#main #devices > .wrap { padding-left: 32px !important; padding-right: 32px !important; --dl: 300px; }
}
@media (min-width: 1440px) {
  html body #main#main#main#main#main #devices > .wrap { --dl: 320px; }
}
@media (min-width: 1600px) { html body #main#main#main#main#main #devices > .wrap { --dl: 380px; } }
@media (min-width: 1024px) { html body #main#main#main#main#main #devices h2 br.dbr { display: inline !important; } }
@media (max-width: 1023px) {
  html body #main#main#main#main#main #devices h2 { white-space: nowrap; }
  html body #main#main#main#main#main #devices h2 br.dbr { display: none !important; }
}