/* components__HomeIntro */
.intro-inner:not(.mc-s) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  .intro-sentence:not(.mc-s) {
    max-width: 22ch;
    margin-bottom: var(--space-m);
    font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  }

  .intro-sub:not(.mc-s) {
    max-width: var(--measure);
    margin-bottom: var(--space-l);
    color: var(--muted);
    font-size: var(--type-body-lg);
    line-height: 1.6;
  }

  /* Rozsypanie: siatka 12×6, w której każdy kadr dostaje własny prostokąt.
     Różne rozmiary i różne wysokości są tu sensem, nie ozdobą — równy rząd
     pięciu zdjęć czytałby się jak pasek logotypów partnerów. */
  .intro-scatter:not(.mc-s) {
    /* `minmax(0, 1fr)`, nie `1fr`: domyślne minimum toru to `auto`, czyli
       naturalna szerokość obrazu (1200 px) — przy dwunastu torach kolaż
       wychodził daleko poza kolumnę tekstu. */
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(6, 3.6rem);
    gap: 0.6rem;
  }

  .intro-shot:not(.mc-s) {
    margin: 0;
    min-width: 0;
  }

  .intro-shot:not(.mc-s) .card-media:not(.mc-s) {
    /* `aspect-ratio: auto` jest tu konieczne: globalna `.card-media` ma 16/9,
       a przy `height: 100%` szerokość liczyła się z wysokości i rozpychała
       kolaż poza kolumnę. W rozsypaniu proporcje wyznacza siatka, nie obraz. */
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
  }


  .intro-shot:not(.mc-s) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  /* Kafle wypełniają siatkę bez nakładek — wcześniej i1 i i5 dzieliły
     kolumny 5–6 w trzecim rzędzie i jedno zdjęcie przykrywało drugie. */
  .i1:not(.mc-s) { grid-column: 1 / 7;   grid-row: 1 / 4; }
  .i2:not(.mc-s) { grid-column: 7 / 13;  grid-row: 1 / 3; }
  .i3:not(.mc-s) { grid-column: 10 / 13; grid-row: 3 / 7; }
  .i4:not(.mc-s) { grid-column: 1 / 7;   grid-row: 4 / 7; }
  .i5:not(.mc-s) { grid-column: 7 / 10;  grid-row: 3 / 7; }

  .intro-shot:not(.mc-s) .card-media:not(.mc-s) {
    border-radius: calc(var(--radius) - 0.4rem);
  }

  @media (max-width: 900px) {
    .intro-inner:not(.mc-s) {
      grid-template-columns: minmax(0, 1fr);
    }

    /* Na wąskim ekranie rozsypanie schodzi do dwóch kolumn, nie do stosu
       pięciu zdjęć nad tekstem — inaczej sekcja rośnie na pół ekranu. */
    .intro-scatter:not(.mc-s) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: none;
      gap: 0.5rem;
    }

    .intro-shot:not(.mc-s) {
      grid-column: auto !important;
      grid-row: auto !important;
    }

    .intro-shot:not(.mc-s) img {
      aspect-ratio: 4 / 3;
      height: auto;
    }

    .i1:not(.mc-s) {
      grid-column: 1 / -1 !important;
    }
  }