/* The area pages (job 151): GPUs, Models, Products and Pricing. Their own few lines beside site.css (which stays under
   1000): cards with a picture, a price and a link, a row of anchors, and the "More products" row that replaced the
   product pages' side list. Every frame whole, never one fat side. */

/* ---- cards ---- */
.acards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)}
.acards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.acard{display:flex;flex-direction:column;gap:var(--s2);border:1px solid var(--hair);border-radius:var(--r);padding:var(--s5) var(--s4) var(--s4)}
.acard__pic{height:9.5rem;display:grid;place-items:center;margin-bottom:var(--s2)}
.acard__pic img{max-height:9.5rem;height:auto;width:auto;max-width:100%}
.acard h3{font-size:var(--t1)}
.acard p{color:var(--dim);font-size:var(--t-1)}
.acard .num{color:var(--cyan-300)}
.acard__price{font-size:var(--t-1)}
.acard__price b{font-size:var(--t1);color:var(--strong)}
.acard .go{margin-top:auto;padding-top:var(--s2)}
.acard .arow{margin-top:auto;padding-top:var(--s2);gap:var(--s1) var(--s4)}
.acard .arow a{font-size:var(--t-1);padding-top:0;margin-top:0}
.acard--new{border-color:var(--blue-500)}

/* ---- a row of anchors (pricing) and the "More products" row ---- */
.arow{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);margin-top:var(--s4)}
.arow a{white-space:nowrap}
.moreprod{border-top:1px solid var(--hair);padding-block:var(--s5)}
.moreprod p{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4)}
.moreprod a[aria-current]{color:var(--strong);text-decoration:none;pointer-events:none}

@media (max-width:900px){
  .acards,.acards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .acards,.acards--4{grid-template-columns:minmax(0,1fr)}
}