/* /brands (SER-597, boards/Brands.html + MakeLogos.html). Body class "crl": tokens and the make
   tile (.mk) come from base.css; page-only rules here. */
.brands-hero { padding-top: 20px; }
.brands-hero h1 { margin: 0; font-size: var(--fs-h1); }
.brands-lead { margin: 16px 0 0; font-size: 18px; max-width: 640px; }
.brands-updated { margin: 12px 0 0; font-size: 14px; }
.brands-list { padding-top: 48px; padding-bottom: 96px; }
.brands-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.brands-grid .mk-logo { height: 56px; }
.brands-from { color: var(--tx); }
.brands-from .price { font-size: 18px; }
.brands-note { margin: 28px 0 0; font-size: 14px; max-width: 720px; }
@media (max-width: 600px) {
  .brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .brands-grid .mk { padding: 16px; }
  .brands-grid .mk-name { overflow-wrap: anywhere; }
  .brands-grid .mk-name { font-size: 14px; }
}
@media (max-width: 600px) { .brands-hero h1 { font-size: clamp(28px, 8.4vw, 40px); } }
@media (max-width: 400px) { .brands-grid .mk { padding: 14px; } .brands-grid .mk-name { font-size: 12px; letter-spacing: .02em; overflow-wrap: normal; } }