/* The property, set as a specification sheet rather than six cards: large
   figures on a grid of hairlines, the way a drawing carries its schedule. */
.facts { padding-block: clamp(4rem, 10vh, 7rem); }
.facts__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem 2rem; padding-bottom: clamp(1.4rem, 3vh, 2.2rem);
}
.facts__name { display: flex; align-items: baseline; gap: clamp(.8rem, 2vw, 1.6rem); flex-wrap: wrap; }
.facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px solid var(--rule);
}
.facts__grid > div {
  padding: clamp(1.4rem, 3.4vh, 2.4rem) 0 clamp(1.2rem, 3vh, 2rem);
  border-bottom: 1px solid var(--rule);
  display: grid; gap: .5rem; align-content: start;
  position: relative;
}
.facts__grid > div + div { padding-left: clamp(1rem, 2.4vw, 2.2rem); }
.facts__grid > div + div::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule);
}
.facts__grid dt { font-size: var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); order: 2; }
.facts__grid dd {
  margin: 0; order: 1;
  font-family: var(--serif); font-weight: 300; line-height: .95;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -.01em;
}
.facts__grid dd small { font-size: .42em; letter-spacing: .04em; margin-left: .18em; }
.facts__foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem 2rem; padding-top: clamp(1.4rem, 3vh, 2.2rem);
}
.facts__price { display: flex; align-items: baseline; gap: 1rem; }
.facts__price b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.demo-note { font-size: .72rem; letter-spacing: .04em; color: var(--ink-2); max-width: 44ch; opacity: .85; }
@media (max-width: 720px) {
  .facts__grid { grid-template-columns: 1fr 1fr; }
  .facts__grid > div + div { padding-left: 0; }
  .facts__grid > div + div::before { display: none; }
  .facts__grid > div:nth-child(even) { padding-left: clamp(1rem, 4vw, 2rem); }
  .facts__grid > div:nth-child(even)::before { content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); }
}