/* best-putting-mats: page-only styles. Tokens and components come from site.css and article.css (its TIDY KIT:
   gg-tsec, gg-qpicks, gg-pcard, gg-pc2, gg-ktiles, gg-choose, gg-fold …); this file only lays out the few blocks
   particular to this top list. Every class carries the bpm- prefix. */

/* hero: the browser's default <figure> margin off; the drawing is shown whole on the pale ground */
.bpm-hero .gg-arthero__photo{margin:0;background:var(--gg-green-100) repeating-linear-gradient(118deg,#e4efe5 0 44px,#dbe8dc 44px 88px)}
.bpm-hero .gg-arthero__photo img{object-fit:contain}
.bpm-hero .gg-arthero__photo .gg-tag{top:auto;bottom:1rem}
@media (max-width:1023px){.bpm-hero .gg-arthero__photo{aspect-ratio:16/10}}
.bpm-hero .gg-arthero__dek{max-width:36rem}

/* the one comparison table: steady column widths from 640 px */
@media (min-width:640px){
  .bpm-cmp th:first-child{width:34%}
  .bpm-cmp td:nth-child(3){white-space:nowrap}
}

/* stimp: the photo beside the three floor tiles */
.bpm-stimp{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
@media (min-width:768px){.bpm-stimp{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1rem;align-items:stretch}}
.bpm-stimp__img{width:100%;height:100%;min-height:10rem;max-height:13rem;object-fit:cover;object-position:50% 62%;border-radius:var(--gg-r-l);background:var(--gg-green-100)}
@media (min-width:768px){.bpm-stimp__img{max-height:none}}

/* gift: five check tiles beside a photo card with the gift links */
.bpm-giftgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
@media (min-width:1280px){.bpm-giftgrid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:1rem;align-items:start}}
.bpm-giftside{display:grid;gap:.6rem;align-content:start;padding:.75rem;border-radius:var(--gg-r-l);background:var(--gg-brass-100);border:1px solid var(--gg-brass-200)}
.bpm-giftside__img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--gg-r-m);background:var(--gg-green-100)}
@media (min-width:640px) and (max-width:1279px){.bpm-giftside{grid-template-columns:12rem minmax(0,1fr);align-items:center}.bpm-giftside__img{grid-row:span 2;aspect-ratio:4/3}}
.bpm-giftside__h{font:650 1rem var(--gg-display);color:var(--gg-ink)}
.bpm-giftside .gg-ktile__links a{background:#fff}

/* the five criteria inside the method fold sit on white */
.bpm-crit .gg-ktile{padding:.75rem .85rem}
.bpm-crit .gg-ktile :is(h3,h4){font-size:.98rem}

/* related reads: the section head sits in the page wrap */
.bpm-related .gg-head{margin-bottom:1.1rem}