/* Hallmark · genre: modern-minimal (shop) · macrostructure: Catalogue · theme: custom (vibe: "local print shop, clean white, cyan+yellow ink" · paper oklch(98.5% 0.004 95) · accents cyan oklch(58% 0.17 220) + yellow oklch(80% 0.17 95) · Public Sans 800 + Geist) · enrichment: Tier-B hand-SVG tiles · nav: shop-header (logo + working search + CTA) · footer: Ft1 2-col
 * studied: yes · DNA-source: url (helloprint.com/es-es, structure only: header-search, USP bar, uniform category grid, steps, sober footer)
 * F6 grid knobs: ratio=4/3, density=4-up, price-slot=spec-line, micro-action=Pedir precio →
 * theme axes: light / display-heavy-sans / cyan+yellow (same system as concept D, different macrostructure)
 * pre-emit critique: P4 H5 E4 S5 R4 V4
 * contrast: pass (46-50) · slop: pass (51-55) · honest: pass (56, no invented prices/promos) · tokens: pass (58) · mobile: pass (36, 59, 61-69)
 */
:root {
  --color-paper: oklch(98.5% 0.004 95);
  --color-paper-2: oklch(96% 0.006 95);
  --color-tile-cyan: oklch(94.5% 0.030 220);
  --color-tile-yellow: oklch(95.5% 0.055 98);
  --color-rule: oklch(90% 0.006 95);
  --color-rule-2: oklch(80% 0.008 95);
  --color-muted: oklch(48% 0.010 240);
  --color-neutral: oklch(38% 0.012 240);
  --color-ink-2: oklch(26% 0.015 250);
  --color-ink: oklch(17% 0.015 250);
  --color-cyan: oklch(58% 0.17 220);
  --color-cyan-deep: oklch(44% 0.13 230);
  --color-yellow: oklch(80% 0.17 95);
  --color-focus: oklch(58% 0.17 220);

  --font-display: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;

  --text-xs: 0.8rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.25rem;
  --text-xl: 1.5rem; --text-2xl: clamp(1.625rem, 2vw + 0.5rem, 2.25rem);
  --text-display: clamp(2.25rem, 4vw + 0.75rem, 4rem);

  --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 100ms; --dur-short: 190ms;
  --radius-card: 10px; --radius-input: 8px;
  --page-gutter: clamp(1rem, 4vw, 4rem);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 150ms !important; animation-duration: 150ms !important; }
}
h1, h2, h3 { overflow-wrap: anywhere; min-width: 0; }
a { color: var(--color-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px;
}
.wrap { max-width: 74rem; margin-inline: auto; padding-inline: var(--page-gutter); }
.h-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; }

/* shop header: logo · search · CTA */
.shop-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-lg);
  padding: var(--space-sm) var(--page-gutter);
  border-bottom: 1px solid var(--color-rule-2); background: var(--color-paper);
}
.mark {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-md);
  text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none;
  white-space: nowrap; line-height: 1;
}
.mark span { color: var(--color-cyan); }
.search { position: relative; max-width: 34rem; justify-self: center; width: 100%; }
.search input {
  width: 100%; font: inherit; color: var(--color-ink);
  background: var(--color-paper-2); border: 1px solid var(--color-rule-2);
  border-radius: 999px; padding: 0 2.6rem 0 1.1rem; min-height: 44px;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.search input:hover { border-color: var(--color-neutral); }
.search input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; background: var(--color-paper); }
.search svg { position: absolute; right: 1rem; top: 50%; translate: 0 -50%; pointer-events: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  font: 800 var(--text-sm) var(--font-display);
  letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
  color: var(--color-ink); background: var(--color-yellow);
  border: 2px solid var(--color-ink); border-radius: 999px;
  padding: 0 1.3rem; min-height: 44px; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
  box-shadow: 2px 2px 0 var(--color-ink);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--color-ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--color-ink); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--ghost { background: var(--color-paper); }

/* USP bar */
.usp { background: var(--color-ink); color: var(--color-paper); }
.usp ul {
  list-style: none; margin: 0; padding: var(--space-sm) var(--page-gutter);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-xl);
  font-size: var(--text-sm);
}
.usp li { display: flex; align-items: center; gap: var(--space-xs); }
.usp svg { flex: none; }

/* hero banner panel */
.hero { padding-block: var(--space-xl); }
.hero__panel {
  background: var(--color-tile-cyan);
  border: 2px solid var(--color-ink); border-radius: calc(var(--radius-card) * 1.6);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-xl); align-items: center;
}
.hero h1 { font-size: var(--text-display); margin: 0 0 var(--space-md); max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--color-cyan-deep); }
.hero p { max-width: 48ch; color: var(--color-ink-2); font-size: var(--text-md); margin: 0 0 var(--space-lg); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.hero__panel svg { width: 100%; max-width: 380px; height: auto; justify-self: center; }

/* catalogue: uniform shop-floor grid */
.catalogo { padding-block: var(--space-2xl) var(--space-xl); }
.catalogo__head h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-2xs); }
.catalogo__head p { color: var(--color-muted); margin: 0 0 var(--space-lg); }
.grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-md);
}
.product { display: grid; gap: var(--space-xs); align-content: start; }
.product__media {
  aspect-ratio: 4 / 3; border: 1px solid var(--color-rule-2); border-radius: var(--radius-card);
  display: grid; place-items: center; overflow: hidden;
  background: var(--color-paper-2);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.product:nth-child(3n+1) .product__media { background: var(--color-tile-cyan); }
.product:nth-child(3n+2) .product__media { background: var(--color-tile-yellow); }
.product:hover .product__media { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--color-rule-2); }
.product__media svg { width: 72%; height: auto; }
.product h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-base); margin: var(--space-2xs) 0 0; }
.product .spec { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }
.product .go {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-cyan-deep);
  text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap;
  justify-self: start;
}
.product .go:hover { text-decoration-thickness: 2px; }
.sin-resultados { display: none; color: var(--color-muted); padding-block: var(--space-lg); margin: 0; }
.mas { padding-bottom: var(--space-xl); }
.mas p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.mas a { color: var(--color-cyan-deep); font-weight: 600; white-space: nowrap; }

/* steps strip */
.pasos { background: var(--color-paper-2); border-block: 1px solid var(--color-rule); padding-block: var(--space-xl); }
.pasos ol {
  list-style: none; counter-reset: paso; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg);
}
.pasos li { counter-increment: paso; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.pasos li::before {
  content: counter(paso);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); line-height: 1;
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  background: var(--color-yellow); border: 2px solid var(--color-ink); border-radius: 999px;
}
.pasos h3 { font-size: var(--text-base); font-weight: 600; margin: 0 0 var(--space-2xs); }
.pasos p { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }

/* quote form */
.pedido { padding-block: var(--space-2xl) var(--space-3xl); }
.pedido__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
.pedido h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-md); }
.pedido__intro p { color: var(--color-ink-2); max-width: 45ch; }
.pedido__intro .directo { font-size: var(--text-sm); color: var(--color-muted); }
.pedido__intro .directo a { color: var(--color-cyan-deep); font-weight: 600; white-space: nowrap; }
.qform { display: grid; gap: var(--space-md); align-content: start; }
.qform label { font-size: var(--text-sm); font-weight: 600; display: block; margin-bottom: var(--space-2xs); }
.qform select {
  width: 100%; font: inherit; color: var(--color-ink);
  background: var(--color-paper); border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-input); padding: 0 var(--space-sm); min-height: 44px;
  transition: border-color var(--dur-short) var(--ease-out);
}
.qform select:hover { border-color: var(--color-neutral); }
.qform select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.qform input, .qform textarea {
  width: 100%; font: inherit; color: var(--color-ink);
  background: var(--color-paper); border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-input); padding: 0 var(--space-sm); min-height: 44px;
  transition: border-color var(--dur-short) var(--ease-out);
}
.qform textarea { padding-block: var(--space-sm); min-height: 6.5rem; resize: vertical; }
.qform input:hover, .qform textarea:hover { border-color: var(--color-neutral); }
.qform input:focus-visible, .qform textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.qform input:disabled, .qform textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.qform .btn { justify-self: start; }
.qform small { color: var(--color-muted); }

/* footer: mast + 2 info columns, sober */
.foot { border-top: 2px solid var(--color-ink); padding: var(--space-xl) var(--page-gutter) var(--space-lg); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); max-width: 74rem; margin-inline: auto; }
.foot .mark { font-size: var(--text-xl); }
.foot p { font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-xs) 0 0; max-width: 34ch; }
.foot h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--space-xs); }
.foot ul { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); color: var(--color-muted); display: grid; gap: var(--space-2xs); }
.foot a { color: var(--color-ink-2); }
.foot__legal { max-width: 74rem; margin: var(--space-lg) auto 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }

@media (max-width: 60rem) {
  .shop-head { grid-template-columns: auto auto; }
  .search { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .hero__panel { grid-template-columns: minmax(0, 1fr); }
  .hero__panel svg { max-width: 300px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pedido__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}
@media (max-width: 40rem) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .pasos ol { grid-template-columns: minmax(0, 1fr); }
  .qform .btn { justify-self: stretch; }
}

/* ── product detail pages ──────────────────────────────────── */
.shop-head--sub { grid-template-columns: auto minmax(0, 1fr) auto; }
.volver { justify-self: center; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); white-space: nowrap; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.miga { padding-block: var(--space-md) 0; font-size: var(--text-sm); color: var(--color-muted); }
.miga a { color: var(--color-muted); }
.miga span { color: var(--color-ink-2); }

.phero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-xl) var(--space-2xl); }
.phero h1 { font-size: clamp(2rem, 3.5vw + 0.5rem, 3.25rem); margin: 0 0 var(--space-xs); }
.phero__tag { font-size: var(--text-md); font-weight: 600; color: var(--color-cyan-deep); margin: 0 0 var(--space-md); }
.phero__intro { color: var(--color-ink-2); max-width: 52ch; margin: 0 0 var(--space-lg); }
.phero__media { background: var(--color-tile-cyan); border: 1px solid var(--color-rule-2); border-radius: var(--radius-card); padding: var(--space-xl); }
.phero__media svg { width: 100%; height: auto; display: block; }

.opciones { padding-block: var(--space-lg); }
.opciones h2, .ideal h2, .faq h2, .relacionados h2 { font-size: var(--text-xl); margin: 0 0 var(--space-md); }
.specs { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--color-rule); max-width: 56rem; }
.specs > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.specs dt { font-weight: 600; }
.specs dd { margin: 0; color: var(--color-ink-2); }

.ideal { padding-block: var(--space-lg); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chips li { border: 1px solid var(--color-rule-2); border-radius: 999px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); background: var(--color-paper-2); }

.faq { padding-block: var(--space-lg) var(--space-xl); }
.faq details { border-bottom: 1px solid var(--color-rule); max-width: 56rem; }
.faq summary { cursor: pointer; font-weight: 600; padding-block: var(--space-sm); list-style-position: outside; }
.faq summary:hover { color: var(--color-cyan-deep); }
.faq details p { margin: 0 0 var(--space-md); color: var(--color-ink-2); max-width: 65ch; }

.relacionados { padding-block: var(--space-xl) var(--space-3xl); }
.grid--rel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product--link { text-decoration: none; color: inherit; }
.product--link .go { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.product--link:hover .go { text-decoration-thickness: 2px; }

@media (max-width: 60rem) {
  .phero { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .grid--rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .shop-head--sub { grid-template-columns: auto auto; }
  .volver { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .specs > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .grid--rel { grid-template-columns: minmax(0, 1fr); }
}

/* ── home v2 · peterprint-anatomy ──────────────────────────── */
:root { --radius-lg: 16px; --shadow-soft: 0 10px 30px -18px oklch(20% 0.02 250 / 0.45); }
.nav-links { display: flex; gap: var(--space-lg); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.nav-links a { text-decoration: none; color: var(--color-ink-2); }
.nav-links a:hover { color: var(--color-cyan-deep); text-decoration: underline; text-underline-offset: 3px; }
.shop-head--menu { grid-template-columns: auto auto minmax(0, 1fr) auto; }
@media (max-width: 68rem) { .nav-links { display: none; } .shop-head--menu { grid-template-columns: auto minmax(0, 1fr) auto; } }

.hero2 { padding-block: var(--space-2xl) var(--space-2xl); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.hero2 h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(2.5rem, 4.5vw + 0.75rem, 4.5rem); line-height: 1.02; margin: 0 0 var(--space-md); max-width: 14ch; }
.hero2 h1 em { font-style: normal; color: var(--color-cyan); }
.hero2 p { font-size: var(--text-md); color: var(--color-ink-2); max-width: 46ch; margin: 0 0 var(--space-lg); }
.hero2__badges { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.hero2__collage { position: relative; min-height: 320px; }
.hero2__card { position: absolute; width: 58%; border-radius: var(--radius-lg); border: 1px solid var(--color-rule-2); box-shadow: var(--shadow-soft); padding: var(--space-md); background: var(--color-paper); }
.hero2__card svg { width: 100%; height: auto; display: block; }
.hero2__card:nth-child(1) { top: 0; left: 0; background: var(--color-tile-cyan); transform: rotate(-4deg); }
.hero2__card:nth-child(2) { top: 22%; right: 0; background: var(--color-tile-yellow); transform: rotate(3deg); }
.hero2__card:nth-child(3) { bottom: 0; left: 12%; background: var(--color-tile-mint); transform: rotate(-1deg); }

.secheadv2 { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.secheadv2 h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; font-size: var(--text-2xl); margin: 0; }
.secheadv2 p { color: var(--color-muted); margin: 0; }

.favs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
.fav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-items: center; text-decoration: none; color: inherit; border: 1px solid var(--color-rule-2); border-radius: var(--radius-lg); padding: var(--space-lg); background: var(--color-paper); transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.fav:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.fav h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: -0.02em; margin: 0 0 var(--space-2xs); }
.fav p { font-size: var(--text-sm); color: var(--color-muted); margin: 0 0 var(--space-sm); }
.fav .go { color: var(--color-cyan-deep); font-weight: 600; font-size: var(--text-sm); }
.fav figure { margin: 0; border-radius: calc(var(--radius-lg) - 6px); padding: var(--space-md); }
.fav figure svg { width: 100%; height: auto; display: block; }
.fav--cyan figure { background: var(--color-tile-cyan); }
.fav--yellow figure { background: var(--color-tile-yellow); }

:root { --color-tile-mint: oklch(94.5% 0.045 165); --color-tile-coral: oklch(95% 0.045 40); }
.product__media { border-radius: var(--radius-lg); }
.product:nth-child(4n+3) .product__media { background: var(--color-tile-mint); }
.product:nth-child(4n) .product__media { background: var(--color-tile-coral); }

.scrollrow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: var(--space-md); overflow-x: auto; padding-bottom: var(--space-sm); scroll-snap-type: x proximity; }
.scrollrow::-webkit-scrollbar { height: 8px; }
.scrollrow::-webkit-scrollbar-thumb { background: var(--color-rule-2); border-radius: 999px; }
.papel { scroll-snap-align: start; border: 1px solid var(--color-rule-2); border-radius: var(--radius-lg); padding: var(--space-lg); background: var(--color-paper); display: grid; gap: var(--space-2xs); align-content: start; }
.papel b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-base); }
.papel span { font-size: var(--text-sm); color: var(--color-muted); }
.papel .sw { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--color-rule-2); margin-bottom: var(--space-xs); }

.muestras { border-radius: calc(var(--radius-lg) * 1.4); border: 2px solid var(--color-ink); background: var(--color-tile-yellow); padding: clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, 2fr) auto; gap: var(--space-lg); align-items: center; }
.muestras h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; font-size: var(--text-2xl); margin: 0 0 var(--space-2xs); }
.muestras p { color: var(--color-ink-2); margin: 0; max-width: 52ch; }
@media (max-width: 60rem) { .hero2 { grid-template-columns: minmax(0, 1fr); } .hero2__collage { display: none; } .favs { grid-template-columns: minmax(0, 1fr); } .muestras { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .fav { grid-template-columns: minmax(0, 1fr); } }

.acabados-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.acabado { border: 1px solid var(--color-rule-2); border-radius: var(--radius-lg); padding: var(--space-lg); background: var(--color-paper-2); }
.acabado b { font-family: var(--font-display); font-weight: 800; display: block; margin-bottom: var(--space-2xs); }
.acabado span { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .acabados-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .acabados-grid { grid-template-columns: minmax(0, 1fr); } }

.foot--big .foot__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 60rem) { .foot--big .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .foot--big .foot__grid { grid-template-columns: minmax(0, 1fr); } }