/* ==========================================================================
   Design tokens – Exellent Syd (Figma HXP0NJ1lMlwsbYKt1INSzE)
   Sajtens enda källa för designvärden. Ingen annan stilmall har egna färger, typsnitt eller mått: bara var(--…).
   Undantag i övriga filer: 0, 1px-linjer och 100 %. @media-villkor kan inte läsa custom properties, där står breddgränserna
   (se --bp-* nedan) som värden.

   Två lager, som docs/malbild-fas/tokens.css:
     1. Råpalett (--color-*) och råa mått (--space-*, --size-*).
     2. Roller (--surface-*, --text-*, --border-*, --action-*, --font-*, flytande mått) som bygger på lager 1.
   Varje token namnger sin Figma-variabel i en kommentar ("figma: …"). Saknar Figma en variabel för ett värde som
   återkommer i designen står det "ej Figma-variabel" och varifrån värdet kommer.
   ========================================================================== */

/* Source Sans Pro (SIL Open Font License, assets/fonts/OFL.txt), självhostat: Figmas typsnitt i alla variabler */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/source-sans-pro-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/source-sans-pro-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/source-sans-pro-latin-700.woff2") format("woff2");
}

:root {
  /* ---- Lager 1: råpalett ----------------------------------------------- */
  --color-white: #ffffff; /* figma: Exellent / Färger / Bakgrund / Vit */
  --color-grey-50: #f2f3f4; /* figma: Exellent / Färger / Bakgrund / Ljusgrå */
  --color-grey-100: #e1e5e7; /* figma: Exellent / Färger / Text / Sidfot (används också som yta i Tvätt) */
  --color-grey-200: #d6dcde; /* figma: Exellent / Färger / Kant / Ljusgrå */
  --color-grey-600: #50595e; /* figma: Exellent / Färger / Text / Brödtext */
  --color-grey-700: #3d474d; /* figma: Exellent / Färger / Neutral / Mörkgrå */
  --color-blue-600: #0179b7; /* figma: Exellent / Färger / Varumärke / Accentblå */
  --color-transparent: rgb(0 0 0 / 0); /* figma: Exellent / Färger / Yta / Transparent (#000000 utan täckning) */
  --color-white-20: rgb(255 255 255 / 0.2); /* figma: Exellent / Färger / Kant / Vit 20 % */
  --color-ink-80: rgb(25 36 43 / 0.8); /* ej Figma-variabel: bildtoningens fyllning (Hero / Bildtoning), vänster kant */
  --color-ink-40: rgb(25 36 43 / 0.4); /* ej Figma-variabel: bildtoningen, 52 % av bredden */
  --color-ink-03: rgb(25 36 43 / 0.03); /* ej Figma-variabel: bildtoningen, höger kant */
  --color-ink-70: rgb(25 36 43 / 0.7); /* ej Figma-variabel: jämn toning av heron under 1440 px (Figma har bara 1440 px), så att vit text når kontrasten över ljusa delar av bilden */
  --color-shadow-card: rgb(61 71 77 / 0.05); /* ej Figma-variabel: nyhetskortets skugga (effekt, inte variabel) */
  --color-overlay: rgb(25 36 43 / 0.6); /* ej Figma-variabel: mörkt lager bakom mobilmenyn (finns inte i designen, bara 1440 px) */
  --color-red-600: #b42318; /* ej Figma-variabel: felmeddelande i kontaktformuläret (finns inte i designen; 6,6:1 mot vitt) */

  /* ---- Lager 2: ytor, text, kanter ------------------------------------------ */
  --surface-page: var(--color-white);
  --surface-card: var(--color-white);
  --surface-light: var(--color-grey-50); /* Tjänster, Uthyrning, Nyheter, titelband, datumetikett, kontaktkort */
  --surface-mid: var(--color-grey-100); /* Tvätt */
  --surface-dark: var(--color-grey-600); /* Partners */
  --surface-footer: var(--color-grey-700);
  --surface-accent: var(--color-blue-600); /* knappar, pilar, aktiv prick, aktuell arkivsida */
  --surface-transparent: var(--color-transparent);
  --surface-inverse: var(--color-white); /* vit knapp (Primär / Vit) */
  --surface-hero-toning-narrow: var(--color-ink-70); /* herons toning under 1440 px */
  --surface-on-dark-subtle: var(--color-white-20); /* inaktiv prick i karusellen */

  --text-body: var(--color-grey-600);
  --text-heading: var(--color-grey-700);
  --text-accent: var(--color-blue-600);
  --text-inverse: var(--color-white);
  --text-on-dark: var(--color-grey-100); /* sidfot och partners */

  --border-subtle: var(--color-grey-200);
  --border-accent: var(--color-blue-600);
  --border-inverse: var(--color-white);
  --border-on-dark: var(--color-white-20);
  --text-error: var(--color-red-600); /* ej Figma-variabel: felmeddelanden i kontaktformuläret */
  --border-error: var(--color-red-600); /* ej Figma-variabel: fält med fel i kontaktformuläret */

  --focus-ring-color: var(--color-blue-600); /* ej Figma-variabel: fokusmarkering (finns inte i designen) */
  --focus-ring-color-inverse: var(--color-white); /* ej Figma-variabel: fokusmarkering på mörk yta och bild */

  --grid-article: minmax(0, 49fr) minmax(0, 21fr); /* 784 : 336 px: artikelspalt och sidokolumn */
  --grid-panel: minmax(0, 584fr) minmax(0, 632fr); /* 584 : 632 px: bild och text i panelen (Uthyrning) */
  --grid-sidebar-first: minmax(0, 21fr) minmax(0, 49fr); /* 336 : 784 px: sidnavigation utan artikelspalt */
  --grid-cta: minmax(0, 7fr) minmax(0, 5fr); /* ej Figma: kontakt-CTA:ns text och kontaktpersoner, formen från VKAB:s CTA (1,4 : 1) */

  --gradient-hero-toning: linear-gradient(to right, var(--color-ink-80), var(--color-ink-40) 52%, var(--color-ink-03));
  --shadow-card: 0 3px 12px 0 var(--color-shadow-card);

  --opacity-disabled: 0.5; /* Karusellens pil på första sidan (ArrowPrev) */
  --opacity-logo: 0.9; /* ej Figma-variabel: koncernloggornas täckning, mätt på ohlssons.se */
  --filter-logo: grayscale(1); /* ej Figma-variabel: koncernloggorna är gråskala, mätt på ohlssons.se */
  --opacity-logo-hover: 1; /* ej Figma-variabel: logotyp under hover och tangentbordsfokus i full täckning; ohlssons.se: #logo-footer img:hover { opacity: unset }, utan övergång (computed transition 0s) */
  --filter-logo-hover: none; /* ej Figma-variabel: logotyp under hover och tangentbordsfokus i färg; ohlssons.se: #logo-footer img:hover { filter: unset } */

  /* ---- Typsnitt och stilar (Figma: Exellent / Typografi / …) ----------------------------------------------
     Radhöjd "auto" i Figma = normal. Stilarna är font-genvägar: vikt storlek/radhöjd familj. */
  --font-sans: "Source Sans Pro", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --font-weight-regular: 400;
  --font-weight-semibold: 600; /* ej Figma-variabel: SemiBold i nyhetsflödet och ingressen (Figma har bara Regular och Bold som variabler) */
  --font-weight-bold: 700;

  --lh-auto: normal;
  --lh-hero: 1.08; /* figma: Rubrik / Hero */
  --lh-lead: 1.4; /* figma: Ingress / Hero, Sidfot / Länk, Brödtext / 19 / 140 % */
  --lh-section: 1.16; /* figma: Rubrik / Sektion / 116 % */
  --lh-body: 1.5; /* figma: Brödtext / 19 / 150 % */
  --lh-card-title: 1.25; /* ej Figma-variabel: nyhetskortets rubrik */
  --lh-article-title: 1.15; /* ej Figma-variabel: artikelrubriken */

  --tracking-button: 0.025rem; /* figma: Knapp / Versaler (0,4 px) */

  /* Flytande storlekar: linjärt från 390 px (24,375 rem) till 1440 px (90 rem), min/max i rem så att de följer teckenstorleken.
       fluid(min, max) = clamp(min, min + (max - min) * (100vw - 24.375rem) / 65.625, max)
     Vid 1440 px är värdet exakt Figmas. */
  --fs-hero: clamp(2.25rem, calc(2.25rem + 1.375 * (100vw - 24.375rem) / 65.625), 3.625rem); /* 36 → 58, figma: Rubrik / Hero */
  --fs-hero-lead: clamp(1.1875rem, calc(1.1875rem + 0.375 * (100vw - 24.375rem) / 65.625), 1.5625rem); /* 19 → 25, figma: Ingress / Hero */
  --fs-section: clamp(1.625rem, calc(1.625rem + 0.375 * (100vw - 24.375rem) / 65.625), 2rem); /* 26 → 32, figma: Rubrik / Sektion */
  --fs-article-title: clamp(1.875rem, calc(1.875rem + 0.625 * (100vw - 24.375rem) / 65.625), 2.5rem); /* 30 → 40, ej Figma-variabel: artikelrubriken */
  --fs-lead: clamp(1.25rem, calc(1.25rem + 0.25 * (100vw - 24.375rem) / 65.625), 1.5rem); /* 20 → 24, ej Figma-variabel: artikelns ingress */
  --fs-heading: clamp(1.3125rem, calc(1.3125rem + 0.1875 * (100vw - 24.375rem) / 65.625), 1.5rem); /* 21 → 24, figma: Rubrik / Tjänstkort, Underrubrik */
  --fs-display: clamp(1.625rem, calc(1.625rem + 0.25 * (100vw - 24.375rem) / 65.625), 1.875rem); /* 26 → 30, figma: Display / Partner och telefon */
  --fs-email: clamp(1.25rem, calc(1.25rem + 0.3125 * (100vw - 24.375rem) / 65.625), 1.5625rem); /* 20 → 25, figma: Kontakt / E-post */
  --fs-company: clamp(1.75rem, calc(1.75rem + 0.25 * (100vw - 24.375rem) / 65.625), 2rem); /* 28 → 32, figma: Rubrik / Företagsnamn */
  --fs-body: clamp(1.125rem, calc(1.125rem + 0.0625 * (100vw - 24.375rem) / 65.625), 1.1875rem); /* 18 → 19, figma: Brödtext / 19 */
  --fs-news-title: clamp(1.25rem, calc(1.25rem + 0.125 * (100vw - 24.375rem) / 65.625), 1.375rem); /* 20 → 22, ej Figma-variabel: nyhetskortets rubrik */

  /* Fasta storlekar */
  --fs-nav: 1.0625rem; /* 17, figma: Navigation / Primär */
  --fs-small: 1rem; /* 16, figma: Navigation / Sekundär, Knapp / Versaler, Sidfot / Länk */
  --fs-meta: 0.875rem; /* 14, ej Figma-variabel: datum, etiketter och notering */
  --fs-contact-heading: 1.1875rem; /* 19, figma: Rubrik / Kontakt och sidfot, Kontakt / Telefon */
  --fs-arrow: 1.5rem; /* 24, ej Figma-variabel: pilen (›) i länkband och sidnavigation */
  --fs-map-label: 0.875rem; /* ej Figma: kartetikett i kartans enheter (14 enheter ger cirka 13 px när kartan är 480 px bred) */
  --fs-map-label-narrow: 1.125rem; /* ej Figma: kartetikett under 640 px, där kartan skalas ned (18 enheter ger cirka 12 px); Code/Karta.cs Teckenstorlek räknar med den största storleken */

  --font-nav-primary: var(--font-weight-bold) var(--fs-nav) / var(--lh-auto) var(--font-sans); /* figma: Navigation / Primär */
  --font-nav-secondary: var(--font-weight-regular) var(--fs-small) / var(--lh-auto) var(--font-sans); /* figma: Navigation / Sekundär */
  --font-button: var(--font-weight-bold) var(--fs-small) / var(--lh-auto) var(--font-sans); /* figma: Knapp / Versaler (+ --tracking-button) */
  --font-hero-heading: var(--font-weight-bold) var(--fs-hero) / var(--lh-hero) var(--font-sans); /* figma: Rubrik / Hero */
  --font-hero-lead: var(--font-weight-regular) var(--fs-hero-lead) / var(--lh-lead) var(--font-sans); /* figma: Ingress / Hero */
  --font-section-heading-auto: var(--font-weight-bold) var(--fs-section) / var(--lh-auto) var(--font-sans); /* figma: Rubrik / Sektion / Auto */
  --font-section-heading: var(--font-weight-bold) var(--fs-section) / var(--lh-section) var(--font-sans); /* figma: Rubrik / Sektion / 116 % */
  --font-card-heading: var(--font-weight-bold) var(--fs-heading) / var(--lh-auto) var(--font-sans); /* figma: Rubrik / Tjänstkort och Rubrik / Underrubrik */
  --font-company-name: var(--font-weight-bold) var(--fs-company) / var(--lh-auto) var(--font-sans); /* figma: Rubrik / Företagsnamn */
  --font-contact-heading: var(--font-weight-bold) var(--fs-contact-heading) / var(--lh-auto) var(--font-sans); /* figma: Rubrik / Kontakt och sidfot */
  --font-body: var(--font-weight-regular) var(--fs-body) / var(--lh-body) var(--font-sans); /* figma: Brödtext / 19 / 150 % */
  --font-body-tight: var(--font-weight-regular) var(--fs-body) / var(--lh-lead) var(--font-sans); /* figma: Brödtext / 19 / 140 % */
  --font-body-auto: var(--font-weight-regular) var(--fs-body) / var(--lh-auto) var(--font-sans); /* figma: Brödtext / 19 / Auto */
  --font-contact-phone: var(--font-weight-bold) var(--fs-contact-heading) / var(--lh-auto) var(--font-sans); /* figma: Kontakt / Telefon */
  --font-contact-email: var(--font-weight-regular) var(--fs-email) / var(--lh-auto) var(--font-sans); /* figma: Kontakt / E-post */
  --font-display: var(--font-weight-bold) var(--fs-display) / var(--lh-auto) var(--font-sans); /* figma: Display / Partner och telefon */
  --font-link: var(--font-weight-regular) var(--fs-small) / var(--lh-lead) var(--font-sans); /* figma: Sidfot / Länk */
  --font-map-label: var(--font-weight-semibold) var(--fs-map-label) / var(--lh-auto) var(--font-sans); /* ej Figma: kartetikett */
  --size-map-label-halo: 0.1875rem; /* ej Figma: ljus kant runt kartetiketten (3 enheter i kartans koordinater) */
  --font-meta: var(--font-weight-regular) var(--fs-meta) / var(--lh-auto) var(--font-sans); /* ej Figma-variabel: datum i artikel och arkiv */
  --font-meta-strong: var(--font-weight-semibold) var(--fs-meta) / var(--lh-auto) var(--font-sans); /* ej Figma-variabel: datumetikett och status */
  --font-note: var(--font-weight-regular) var(--fs-meta) / var(--lh-lead) var(--font-sans); /* ej Figma-variabel: redaktionell notering */
  --font-news-title: var(--font-weight-semibold) var(--fs-news-title) / var(--lh-card-title) var(--font-sans); /* ej Figma-variabel: nyhetskortets och arkivets rubrik */
  --font-lead: var(--font-weight-semibold) var(--fs-lead) / var(--lh-lead) var(--font-sans); /* ej Figma-variabel: artikelns och företagsintroduktionens ingress */
  --font-article-title: var(--font-weight-bold) var(--fs-article-title) / var(--lh-article-title) var(--font-sans); /* ej Figma-variabel: artikelrubriken */
  --font-page-number: var(--font-weight-semibold) var(--fs-small) / var(--lh-auto) var(--font-sans); /* ej Figma-variabel: aktuell arkivsida */
  --font-arrow: var(--font-weight-bold) var(--fs-arrow) / var(--lh-auto) var(--font-sans); /* ej Figma-variabel: pilen i länkband och sidnavigation */

  /* ---- Lager 1: råa mått (Figma har inga variabler för mått) ---------------------------------------------- */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-14: 0.875rem;
  --space-16: 1rem;
  --space-18: 1.125rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-36: 2.25rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;

  --border-width-accent: 0.125rem; /* 2 px: aktuell artikel i arkivet */
  --border-width-focus: 0.125rem;
  --border-width-tab: 0.125rem; /* 2 px, ej Figma: kanten runt en flik som inte är vald (verkstädernas flikar, formen från Jergos kontaktsida) */
  --border-width-underline: 0.25rem; /* 4 px, ej Figma: linjen under namnet i kontaktkortet (Jergos kontaktkort) */
  --radius-button: 0.1875rem; /* 3 px, figma-komponent Exellent / Knapp */
  --radius-dot: 0.25rem; /* 4 px, karusellens prickar */
  --radius-card: 1rem; /* 16 px, ej Figma: kontaktkortets hörn (Jergos kontaktkort) */
  --radius-tab: 0.375rem 0.375rem 0.25rem 0.25rem; /* ej Figma: flikens hörn, 6 px upptill och 4 px nedtill (Jergos flikar) */
  --radius-round: 62.5rem; /* helt rund: karusellens pilar (24 px på 48 px) */

  --size-control: 3rem; /* 48 px: knappens höjd och karusellens pil */
  --size-icon: 1.25rem; /* 20 px: pilens chevron */
  --size-contact-icon: 1rem; /* 16 px, ej Figma: ikonen framför en kontaktuppgift i kontaktkortet (Jergos kontaktkort) */
  --size-page-number: 2.25rem; /* 36 px: aktuell arkivsida */
  --size-dot: 0.5rem; /* 8 px */
  --size-dot-active: 1.75rem; /* 28 px */
  --size-divider-short: 1rem; /* 16 px: strecket mellan datum och status */
  --size-divider-logo: 4rem; /* 64 px: strecket mellan partnerlogotyper */
  --size-carousel: 7.5rem; /* 120 px: logotypspåret */
  --size-header-height: 9rem; /* 144 px */
  --size-logo-width: 15.25rem; /* 244 px */
  --size-logo-height: 2.875rem; /* 46 px */
  --size-hero-content: 51.875rem; /* 830 px */
  --size-breadcrumbs: 3.875rem; /* 62 px */
  --size-card-image: 14.125rem; /* 226 px */
  --size-related-image: 11.25rem; /* 180 px */
  --size-related-band: 5.625rem; /* 90 px */
  --size-content: 76rem; /* 1216 px: innehållets bredd */
  --size-contact-card: 22.5rem; /* 360 px */
  --size-group-logo: 11.25rem; /* 180 px, mätt på ohlssons.se */
  --size-menu-drawer: 21.25rem; /* ej Figma-variabel: mobilmenyns panel */
  --size-menu-icon-width: 1.5rem; /* ej Figma-variabel: hamburgerikonen (tre streck) */
  --size-menu-icon-height: 1.125rem;
  --size-menu-icon-bar: 0.1875rem;
  --size-card-min: 15rem; /* ej Figma-variabel: smalaste kort (240 px) innan kolumnerna blir färre */
  --size-vehicle-min: 20rem; /* ej Figma: smalaste fordonskort (320 px) innan kolumnerna blir färre */
  --size-contact-photo: 12.5rem; /* 200 px, ej Figma: kontaktkortets runda foto (Jergos kontaktkort), högst källbildernas bredd (200 × 280 px), så att fotot aldrig skalas upp */
  --size-contact-person: 17.5rem; /* 280 px, ej Figma: kontaktkortens kolumn i verkstadens flik, ett kort lika brett som i Jergos rytm (fyra per rad i innehållets 1216 px: 25 % − 24 px) */
  --size-cta-photo: 10rem; /* 160 px, ej Figma: kontaktpersonens runda foto i kontakt-CTA:n (VKAB:s CTA) */
  --size-article: 49rem; /* 784 px, Figma 22:323: artikelspaltens bredd; också på en sida utan sidnavigation, och inget artikelblock är bredare */
  --size-hours-min: 16rem; /* ej Figma: smalaste öppettidskolumn (256 px), så att ett klockslag (07:00-01:00) aldrig bryts mitt i */
  --size-map: 30rem; /* ej Figma: kartans största bredd (480 px) */
  --size-form: 40rem; /* ej Figma: kontaktformulärets största bredd (640 px) */
  --size-textarea: 10rem; /* ej Figma: meddelanderutans lägsta höjd (160 px) */
  --size-checkbox: 1.25rem; /* ej Figma: samtyckesrutan (20 px) */
  --ratio-vehicle: 2 / 1; /* originalets fordonsbilder är 840 × 420 px */
  --size-spec-label: 45%; /* ej Figma: radrubrikens bredd i fordonens tabell, lika i alla kort så att kolumnerna ligger i linje */
  --size-tap-target: 2.75rem; /* 44 px: mobilmenyns knappar */

  /* Flytande avstånd, samma tvåpunktsformel som typografin */
  --space-gutter: clamp(1.25rem, calc(1.25rem + 5.75 * (100vw - 24.375rem) / 65.625), 7rem); /* 20 → 112: sidans marginal */
  --space-section: clamp(3rem, calc(3rem + 2 * (100vw - 24.375rem) / 65.625), 5rem); /* 48 → 80: sektionens höjdled */
  --space-section-small: clamp(2.5rem, calc(2.5rem + 1 * (100vw - 24.375rem) / 65.625), 3.5rem); /* 40 → 56: Partners */
  --space-article: clamp(2.5rem, calc(2.5rem + 1.5 * (100vw - 24.375rem) / 65.625), 4rem); /* 40 → 64: artikelområdet */
  --space-grid: clamp(1.5rem, calc(1.5rem + 0.5 * (100vw - 24.375rem) / 65.625), 2rem); /* 24 → 32: mellan kort */
  --space-split: clamp(2rem, calc(2rem + 1 * (100vw - 24.375rem) / 65.625), 3rem); /* 32 → 48: mellan bild och text */
  --space-columns: clamp(3rem, calc(3rem + 3 * (100vw - 24.375rem) / 65.625), 6rem); /* 48 → 96: mellan artikel och sidokolumn */
  --space-panel: clamp(1.5rem, calc(1.5rem + 0.75 * (100vw - 24.375rem) / 65.625), 2.25rem); /* 24 → 36: panelens fyllnad */
  --size-hero-height: clamp(28rem, calc(28rem + 17 * (100vw - 24.375rem) / 65.625), 45rem); /* 448 → 720 */
  --size-split-height: clamp(14rem, calc(14rem + 12.25 * (100vw - 24.375rem) / 65.625), 26.25rem); /* 224 → 420: bild bredvid text (Om oss på startsidan) */
  --size-wash-height: clamp(13.5rem, calc(13.5rem + 12.125 * (100vw - 24.375rem) / 65.625), 25.625rem); /* 216 → 410: Tvätt */
  --size-article-image: clamp(14rem, calc(14rem + 13.5 * (100vw - 24.375rem) / 65.625), 27.5rem); /* 224 → 440: bild i artikeln */
  --size-banner-height: clamp(12.5rem, calc(12.5rem + 8.75 * (100vw - 24.375rem) / 65.625), 21.25rem); /* 200 → 340 */
  --size-title-band: clamp(4.5rem, calc(4.5rem + 2 * (100vw - 24.375rem) / 65.625), 6.5rem); /* 72 → 104 */

  /* ---- Rörelse ------------------------------------------------------------------------------------------ */
  --duration-fast: 150ms; /* ej Figma-variabel: hover (Figma visar bara tillstånden) */
  --duration-menu: 300ms;
  --ease-standard: ease;
  --z-drawer: 30;

  /* ---- Antal logotyper i karusellen per synlig sida ----------------------------------------------------- */
  --carousel-slides-narrow: 1;
  --carousel-slides-medium: 2;
  --carousel-slides-wide: 3; /* Figma: LogoTrack är 1088 px och visar tre platser à 362 px */

  /* ---- Breddgränser (ej Figma-variabler: designen finns bara i 1440 px). Dokumentation: @media kan inte läsa dem. ---- */
  --bp-wide: 64rem; /* 1024 px: under den staplas kolumnerna, sidhuvudet blir hamburgermeny och sidokolumnen hamnar under artikeln */
  --bp-medium: 40rem; /* 640 px: under den en kolumn av korten och i sidfoten, karusellen visar en logotyp */
}