/* ===========================================================================
   Blog – Übersicht und Artikel
   ===========================================================================
   Baut auf style.css und referenz.css auf. Header, Brotkrumen, Filter-Chips,
   Buttons, CTA und Footer kommen unverändert von dort; hier stehen nur die
   Abweichungen und die Bausteine, die es nur im Blog gibt.

   Breakpoints wie auf der übrigen Website: 1020 / 900 / 620 / 520 px.
   Die Vergrößerung ab 2240 px steckt bereits in style.css.
   =========================================================================== */

/* Aktiver Punkt in der Hauptnavigation */
.main-nav a[aria-current] {
  color: var(--purple);
}

/* ---------------------------------------------------------------------------
   Übersicht: Hintergrundbild hinter Header, Hero und Filter
   ---------------------------------------------------------------------------
   Das Bild hängt an der Hero-Sektion und reicht per ::before nach oben bis
   unter den Header. So endet es mit einer klaren Kante dort, wo die Sektion
   endet – egal wie hoch der Hero auf dem jeweiligen Gerät ausfällt.
   Die Höhe des Headers steht als Variable, weil er auf Unterseiten im Fluss
   liegt (referenz.css) und auf Mobil etwas höher wird (44px-Menüknopf).
   --------------------------------------------------------------------------- */

.page-blog {
  --blog-header-h: 62px;
  background-image: none;          /* Verlauf aus .page-uebersicht abschalten */
}

.blog-hero {
  position: relative;
  padding-bottom: 0;
  isolation: isolate;
}

.blog-hero::before {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--blog-header-h));
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background: #4f49e5 url("blog/blog-hero-2560.jpg") center top / cover no-repeat;
  background-image: image-set(url("blog/blog-hero-2560.webp") type("image/webp"),
                              url("blog/blog-hero-2560.jpg") type("image/jpeg"));
}

/* Auf dem Bild ist das Grau der Website zu hell – die Subline braucht hier
   mehr Kontrast, um lesbar zu bleiben. */
.blog-hero .uebersicht-lead {
  margin-bottom: 0;
  color: #333338;
}

/* Filterband: läuft über die volle Breite und dunkelt das untere Ende des
   Bildes sanft ab. Ohne diese Abdunklung wäre das Bild an dieser Stelle
   noch zu hell für weiße 13px-Schrift. Kein flacher Farbblock, daher keine
   sichtbare Kante. */
.blog-filter-band {
  padding: 96px 0 62px;
  background: linear-gradient(180deg,
    rgba(55, 48, 190, 0) 0%,
    rgba(55, 48, 190, .51) 45%,
    rgba(55, 48, 190, .85) 100%);
}

.blog-filter-band .case-filter {
  margin-bottom: 0;
}

.blog-filter-band .eyebrow {
  color: #fff;
}

.blog-filter-band .case-filter-chips button {
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}

.blog-filter-band .case-filter-chips button[aria-pressed="true"] {
  border-color: #fff;
  background: #fff;
  color: var(--purple);
}

.blog-filter-band .case-filter-status {
  color: rgba(255, 255, 255, .8);
}

.blog-filter-band button:focus-visible {
  outline-color: rgba(255, 255, 255, .7);
}

/* ---------------------------------------------------------------------------
   Übersicht: Beitragsliste
   --------------------------------------------------------------------------- */

.blog-liste {
  padding: 72px 0 96px;
  background: var(--paper);
}

.blog-grid {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  list-style: none;
}

.blog-card[hidden] {
  display: none;
}

/* Gleiche Kachel wie .process-step auf der Startseite: weiß, 12px Radius,
   ohne Rahmen; der weiche Schatten erscheint erst beim Hovern. */
.blog-card-link {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--white);
  transition: box-shadow .24s ease;
}

.blog-card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-secondary);
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Platzhalter, solange ein Beitrag noch kein Titelbild hat */
.blog-card-media.is-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: var(--text-s);
  font-weight: var(--subline-weight);
}

.blog-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 26px 26px 28px;
}

.blog-card-cat {
  margin: 0 0 12px;
  color: var(--purple);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.blog-card h2,
.blog-card h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: var(--h2-weight);
  line-height: 1.25;
}

.blog-card-excerpt {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: var(--text-ui);
  line-height: 1.45;
}

.blog-card-meta {
  margin: auto 0 0;
  color: var(--muted);
  font-size: var(--text-s);
  font-weight: var(--subline-weight);
}

@media (hover: hover) and (pointer: fine) {
  .blog-filter-band .case-filter-chips button:hover {
    border-color: #fff;
    color: #fff;
  }

  .blog-filter-band .case-filter-chips button[aria-pressed="true"]:hover {
    color: var(--purple);
  }

  .blog-card-link:hover,
  .blog-card-link:focus-visible {
    box-shadow: 0 0 32px rgba(8, 8, 8, .13);   /* ohne Versatz: rundum gleich stark */
  }

  .blog-card-link:hover h2,
  .blog-card-link:hover h3 {
    color: var(--purple);
  }
}

/* Eine display-Regel am Button würde das hidden-Attribut sonst aushebeln */
.case-more[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   Artikel
   --------------------------------------------------------------------------- */

.artikel-hero {
  padding-bottom: 0;
}

.artikel-meta {
  display: flex;
  margin: 0 0 22px;
  gap: 8px 14px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: var(--text-s);
  font-weight: var(--subline-weight);
}

.artikel-thema {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-weight: var(--subline-weight);
}

.artikel-hero h1 {
  max-width: 900px;
  margin: 0 0 24px;
  color: var(--ink);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: 1.04;
}

.artikel-lead {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-lead);
  font-weight: var(--subline-weight);
  line-height: 1.45;
}

.artikel-titelbild {
  margin: 54px 0 0;
}

.artikel-titelbild img,
.artikel-titelbild .is-empty {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  object-fit: cover;
}

.artikel-titelbild .is-empty {
  display: grid;
  place-items: center;
  background: var(--paper-secondary);
  color: var(--muted);
  font-size: var(--text-s);
  font-weight: var(--subline-weight);
}

/* Textspalte links, Inhaltsverzeichnis rechts. Die Spalte ist auf rund
   70 Zeichen begrenzt – das Lesetempo bricht bei längeren Zeilen ein. */
.artikel-body {
  padding: 72px 0 96px;
}

.artikel-layout {
  display: grid;
  grid-template-columns: minmax(0, 680px) 260px;
  justify-content: space-between;
  gap: 64px;
  align-items: start;
}

/* --- Inhaltsverzeichnis */

/* Rechte Spalte: Inhaltsverzeichnis und Teilen, scrollt mit */
.artikel-seite {
  position: sticky;
  top: 32px;
  order: 2;
}

.artikel-toc .eyebrow {
  margin-bottom: 16px;
}

.artikel-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.artikel-toc a {
  display: block;
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: var(--text-ui);
  font-weight: var(--subline-weight);
  line-height: 1.35;
  transition: color .2s ease, border-color .2s ease;
}

.artikel-toc a[aria-current="true"] {
  border-left-color: var(--purple);
  color: var(--ink);
}

/* --- Fließtext */

.artikel-text {
  order: 1;
  min-width: 0;
  font-size: var(--text-l);
  line-height: 1.65;
}

.artikel-text > :first-child {
  margin-top: 0;
}

.artikel-text p,
.artikel-text ul,
.artikel-text ol {
  margin: 0 0 1.15em;
}

.artikel-text ul,
.artikel-text ol {
  padding-left: 1.25em;
}

.artikel-text li {
  margin-bottom: .45em;
}

.artikel-text li::marker {
  color: var(--purple);
}

.artikel-text h2 {
  margin: 2.1em 0 .6em;
  font-size: 30px;
  font-weight: var(--h2-weight);
  line-height: 1.15;
  scroll-margin-top: 24px;
}

.artikel-text h3 {
  margin: 1.8em 0 .5em;
  font-size: 22px;
  font-weight: var(--h2-weight);
  line-height: 1.25;
}

.artikel-text a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.artikel-text strong {
  font-weight: var(--h2-weight);
}

/* Zitat im Text: bewusst ohne die Kachel der Kundenstimmen aus style.css */
.artikel-text blockquote {
  display: block;
  min-height: 0;
  margin: 44px 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--purple);
  font-size: 26px;
  font-weight: var(--subline-weight);
  line-height: 1.35;
}

.artikel-text blockquote p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.artikel-text blockquote cite {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--text-s);
  font-style: normal;
}

.artikel-text figure {
  margin: 44px 0;
}

.artikel-text figure img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.artikel-text figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--text-s);
  font-weight: var(--subline-weight);
  line-height: 1.45;
}

/* Abgesetzte Box, z. B. für Fazit, Checkliste oder Selbsttest */
/* Selbsttest: echter Verlauf (Rosa oben, Orange oben rechts), läuft unten
   ins Papiergrau aus. Das Bild wird auf die Kachel gestreckt, damit der
   ganze Verlauf in jeder Kachelhöhe zu sehen ist. */
.artikel-box {
  margin: 44px 0;
  padding: 28px 26px 30px;
  border-radius: 12px;
  background: var(--paper) url("blog/selbsttest-bg-1000.jpg") 0 0 / 100% 100% no-repeat;
  background-image: image-set(url("blog/selbsttest-bg-1400.webp") type("image/webp"),
                              url("blog/selbsttest-bg-1000.jpg") type("image/jpeg"));
  color: var(--purple);
  font-size: var(--text-m);
  line-height: 1.55;
}

.artikel-box p,
.artikel-box strong,
.artikel-box a {
  color: var(--purple);
}

.artikel-box .eyebrow {
  margin-bottom: 14px;
}

/* Balken aus dem Logo vor „Selbsttest“ – wie in den Kacheln */
.artikel-box .eyebrow::before {
  display: inline-block;
  width: 1.45em;
  height: .72em;
  margin-right: .6em;
  content: "";
  background: var(--purple);
  vertical-align: baseline;
}

.artikel-box > :last-child {
  margin-bottom: 0;
}

/* --- Teilen und Autor */

.artikel-teilen {
  display: flex;
  margin: 56px 0 0;
  padding-top: 28px;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
}

.artikel-teilen .eyebrow {
  margin: 0 12px 0 0;
}

.artikel-teilen-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.artikel-teilen .button {
  gap: 7px;
}

/* Icons von LinkedIn, X und WhatsApp: in Lila, beim Hovern dunkler */
.teilen-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  transition: color .2s ease, transform .2s ease;
}

.teilen-icon svg {
  display: block;
  width: 38px;
  height: 38px;
}

.artikel-teilen .button[hidden] {
  display: none;
}

/* In der schmalen rechten Spalte: Überschrift über den Buttons */
.artikel-teilen-seite {
  display: block;
  margin: 36px 0 0;
  padding-top: 28px;
}

.artikel-teilen-seite .eyebrow {
  margin: 0 0 14px;
}

/* Rechte Spalte: drei Icons zusammen so breit wie die Buttons darunter
   (erstes Icon links, zweites mittig, drittes rechtsbündig) */
.artikel-teilen-seite .artikel-teilen-buttons {
  display: grid;
  width: fit-content;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: 10px 8px;
}

.artikel-teilen-seite .artikel-teilen-buttons .button {
  grid-column: 1 / -1;
  width: 100%;
  justify-content: center;
}

.artikel-teilen .button {
  text-decoration: none;
  min-height: 38px;
  padding: 0 18px;
  background: transparent;
  color: var(--purple);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-s);
  font-weight: 600;
}

.artikel-autor {
  display: flex;
  margin-top: 40px;
  padding: 28px 26px 30px;
  gap: 20px;
  align-items: flex-start;
  border-radius: 12px;
  background: var(--white);
}

/* Rundes Porträt: Rahmen fest, damit der Flex-Container es nicht staucht */
.artikel-autor-foto {
  display: block;
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
}

.artikel-autor img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--soft-purple);
}

.artikel-autor b {
  display: block;
  font-size: var(--text-m);
  font-weight: var(--h2-weight);
}

.artikel-autor span {
  display: block;
  margin: 2px 0 10px;
  color: var(--muted);
  font-size: var(--text-s);
  font-weight: var(--subline-weight);
}

.artikel-autor p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-ui);
  line-height: 1.5;
}

/* --- Weitere Beiträge */

.artikel-weiter {
  padding: 0 0 96px;
}

.artikel-weiter h2 {
  margin: 0 0 32px;
  font-size: 30px;
  font-weight: var(--h2-weight);
  line-height: 1.15;
}

@media (hover: hover) and (pointer: fine) {
  .artikel-toc a:hover {
    color: var(--purple);
  }

  .teilen-icon:hover {
    color: #2f2a9e;
    transform: translateY(-1px);
  }

  .artikel-teilen .button:hover {
    background: var(--purple);
    color: #fff;
  }
}

/* ---------------------------------------------------------------------------
   Responsiv
   --------------------------------------------------------------------------- */

@media (max-width: 1020px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  /* Inhaltsverzeichnis wandert als Kasten über den Text */
  .artikel-layout {
    grid-template-columns: minmax(0, 680px);
    gap: 40px;
  }

  .artikel-seite {
    position: static;
    order: 0;
  }

  /* Unten am Artikel stehen dieselben Optionen – hier oben nicht doppeln */
  .artikel-teilen-seite {
    display: none;
  }

  .artikel-toc {
    padding: 24px 26px;
    border-radius: 12px;
    background: var(--white);
  }
}

@media (max-width: 900px) {
  /* Header wird durch den 44px-Menüknopf höher (28px + 44px) */
  .page-blog {
    --blog-header-h: 72px;
  }

  .blog-hero::before {
    background-image: url("blog/blog-hero-1600.jpg");
    background-image: image-set(url("blog/blog-hero-1600.webp") type("image/webp"),
                                url("blog/blog-hero-1600.jpg") type("image/jpeg"));
  }

  .blog-filter-band {
    padding: 72px 0 46px;
  }

  .blog-liste {
    padding: 54px 0 72px;
  }

  .artikel-titelbild {
    margin-top: 40px;
  }

  .artikel-body {
    padding: 54px 0 72px;
  }

  .artikel-text h2 {
    font-size: 26px;
  }

  .artikel-text blockquote {
    font-size: 22px;
  }

  .artikel-weiter {
    padding-bottom: 72px;
  }
}

@media (max-width: 620px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .artikel-lead {
    font-size: var(--text-l);
  }

  .artikel-text {
    font-size: 17px;
  }

}

@media (max-width: 520px) {
  .artikel-autor {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------------
   Artikel: Tabelle, Checkliste, Handlungsaufforderung, Quellen
   --------------------------------------------------------------------------- */

/* Breite Tabellen scrollen auf dem Handy in ihrem Kasten, statt die Seite
   zu verbreitern. */
.artikel-tabelle {
  margin: 36px 0;
  overflow-x: auto;
  border-radius: 12px;
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}

.artikel-tabelle table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--text-m);
  line-height: 1.45;
}

.artikel-tabelle th,
.artikel-tabelle td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.artikel-tabelle th {
  color: var(--purple);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.artikel-tabelle tr:last-child td {
  border-bottom: 0;
}

.artikel-tabelle td:first-child {
  font-weight: var(--subline-weight);
}

.artikel-text .artikel-checkliste {
  padding: 0;
  list-style: none;
}

.artikel-checkliste li {
  position: relative;
  margin-bottom: .7em;
  padding-left: 34px;
}

.artikel-checkliste li::before {
  position: absolute;
  top: .3em;
  left: 0;
  width: 18px;
  height: 18px;
  content: "";
  border: 2px solid var(--purple);
  border-radius: 4px;
}

.artikel-cta {
  margin: 44px 0;
  padding: 30px 28px 32px;
  border-radius: 12px;
  background: var(--purple);
  color: #fff;
}

.artikel-cta p {
  margin: 0 0 20px;
  color: #fff;
}

/* Auf Indigo: weißer Button mit indigofarbener Schrift */
.artikel-text .artikel-cta .button {
  border-color: #fff;
  background: #fff;
  color: var(--purple);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .artikel-text .artikel-cta .button:hover {
    border-color: var(--soft-purple);
    background: var(--soft-purple);
    color: var(--purple);
  }
}

.artikel-text .artikel-quellen-titel {
  font-size: 22px;
}

.artikel-quellen {
  color: var(--muted);
  font-size: var(--text-ui);
  line-height: 1.5;
}

.artikel-autor-initial {
  display: grid;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--soft-purple);
  color: var(--purple);
  font-size: 24px;
  font-weight: var(--h2-weight);
}

/* ---------------------------------------------------------------------------
   Kategorie-Label in den Kacheln: Balken aus dem Logo als Auftakt
   --------------------------------------------------------------------------- */

.blog-card-cat::before {
  display: inline-block;
  width: 1.45em;
  height: .72em;              /* Versalhöhe der 12px-Schrift */
  margin-right: .6em;
  content: "";
  background: var(--purple);
  vertical-align: baseline;
}

/* ---------------------------------------------------------------------------
   Persönlicher Kontakt am Seitenende (Übersicht und Artikel)
   ---------------------------------------------------------------------------
   Band mit eigenem Verlauf (Header-Verlauf, vertikal gespiegelt), direkt über dem Footer. Headline
   und Subline stehen auf der linken Rasterkante (.container), das Foto
   steht rechts auf der Unterkante des Bands.
   --------------------------------------------------------------------------- */

.blog-kontakt {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Verlauf (gespiegelt) läuft oben in Papierfarbe aus – ohne Kante zur Sektion davor */
  background: var(--paper) url("blog/kontakt-bg-1600.jpg") 70% 100% / cover no-repeat;
  background-image: image-set(url("blog/kontakt-bg-2560.webp") type("image/webp"),
                              url("blog/kontakt-bg-1600.jpg") type("image/jpeg"));
}

/* Oben immer in Papierfarbe auslaufen – egal, wie das Bild bei der
   jeweiligen Breite beschnitten wird */
.blog-kontakt::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 45%;
  content: "";
  background: linear-gradient(var(--paper), rgba(244, 243, 240, 0));
  pointer-events: none;
}

.blog-kontakt-inner {
  position: relative;
  min-height: 460px;
  padding: 200px 0 64px;
}

.blog-kontakt-text {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 340px);
}

.blog-kontakt h2 {
  margin: 0 0 22px;
  overflow-wrap: normal;
  hyphens: manual;
  color: var(--purple);
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.05;
}

.blog-kontakt-lead {
  margin: 0 0 26px;
  color: var(--ink);
  font-size: 18px;
  font-weight: var(--subline-weight);
  line-height: 1.4;
}

.blog-kontakt-name {
  margin: 0 0 26px;
  font-size: 18px;
  line-height: 1.35;
}

.blog-kontakt-name b {
  display: block;
  font-weight: 700;
}

.blog-kontakt-name span {
  font-weight: var(--subline-weight);
}

/* Foto rechts, Unterkante bündig mit dem Band */
.blog-kontakt-foto {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 300px;
}

.blog-kontakt-foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tablet und Handy: Text oben, Foto darunter auf der Unterkante */
@media (max-width: 1020px) {
  .blog-kontakt {
    background-image: image-set(url("blog/kontakt-bg-900.webp") type("image/webp"),
                                url("blog/kontakt-bg-1600.jpg") type("image/jpeg"));
  }

  .blog-kontakt-inner {
    min-height: 0;
    padding: 120px 0 0;
  }

  .blog-kontakt-text {
    max-width: none;
  }

  .blog-kontakt-foto {
    position: static;
    display: block;
    width: min(260px, 70%);
    margin: 36px auto 0;
  }
}

@media (max-width: 620px) {
  .blog-kontakt h2 br,
  .blog-kontakt-lead br {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Startseite: Presentation Insights (Einstieg links, zwei neueste Beiträge)
   --------------------------------------------------------------------------- */

.insights {
  padding: 88px 0 8px;
  background: var(--paper);
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.insights-intro {
  display: flex;
  flex-direction: column;
  padding-right: 12px;
}

.insights-intro h2 {
  margin: 0 0 18px;
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: var(--h2-weight);
  line-height: 1.08;
}

.insights-intro p:not(.eyebrow) {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: var(--text-m);
  line-height: 1.5;
}

.insights-intro .text-link {
  align-self: flex-start;
  margin: auto 0 0;
  text-align: left;
}

.insights-list {
  display: contents;
  list-style: none;
}

@media (max-width: 1020px) {
  .insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .insights-intro {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .insights-intro .text-link {
    margin: 0;
  }
}

@media (max-width: 620px) {
  .insights {
    padding-top: 64px;
  }

  .insights-grid {
    grid-template-columns: 1fr;
  }
}