.images-intro {
  margin: 60px 0;
}

.images-intro .images-intro__title {
  margin-bottom: 2.6rem;
  font-size: 2.4rem;
  font-weight: 500;
}

/* Layout: vertical stack of rows */
.images-intro .images-intro__layout {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* All images share base styles */
.images-intro .images-intro__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.images-intro .images-intro__img:hover:not(a[href="javascript:void(0)"] > .images-intro__img) {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #111 !important;
}

/* Link wrapper — inherits full size of its parent cell */
.images-intro .images-intro__link {
  display: block;
  width: 100%;
}

/* ─── Variant 2+3 ──────────────────────────────── */

/* Row of 2 */
.images-intro .images-intro__layout--v1 .images-intro__row--2 {
  display: flex;
  gap: 3rem;
}

.images-intro .images-intro__layout--v1 .images-intro__row--2 .images-intro__img {
  flex: 1;
  min-width: 0;
}

/* Row of 3 */
.images-intro .images-intro__layout--v1 .images-intro__row--3 {
  display: flex;
  gap: 3rem;
}

.images-intro .images-intro__layout--v1 .images-intro__row--3 .images-intro__img {
  flex: 1;
  min-width: 0;
}

/* ─── Variant 1+2 ──────────────────────────────── */

/* Wide image row */
.images-intro .images-intro__layout--v2 .images-intro__row--wide {
  display: block;
}

.images-intro .images-intro__img--wide {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Row of 2 */
.images-intro .images-intro__layout--v2 .images-intro__row--2 {
  display: flex;
  gap: 3rem;
}

.images-intro .images-intro__layout--v2 .images-intro__row--2 .images-intro__img {
  flex: 1;
  min-width: 0;
}

/* ─── Variant 3: baner + lewa/prawa kolumna ──────────────────── */

/* Baner: pełna szerokość, naturalna wysokość */
.images-intro .images-intro__layout--v3 .images-intro__row--banner {
  display: block;
}

/*
 * Wiersz podziału: lewa (1 img) i prawa (2 img jedna pod drugą).
 * align-items: stretch — obie kolumny mają identyczną wysokość (wyższa kolumna ją
 * wyznacza). Obrazki wypełniają kolumny przez object-fit: cover bez zniekształceń.
 * Jeśli treść jest przygotowana tak, że h(lewa) = h(prawa-t) + 3rem + h(prawa-b),
 * żaden kadr nie będzie zauważalny.
 */
.images-intro .images-intro__layout--v3 .images-intro__row--split {
  display: flex;
  gap: 3rem;
  align-items: stretch;
}

/* Obie kolumny: równa szerokość, flex-kolumna wewnętrznie */
.images-intro .images-intro__layout--v3 .images-intro__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Prawa kolumna: odstęp między dwoma obrazkami */
.images-intro .images-intro__layout--v3 .images-intro__col--right {
  gap: 3rem;
}

/*
 * Linki w kolumnach split: muszą rosnąć razem z kolumną (flex: 1),
 * by obrazki mogły wypełnić całą dostępną wysokość.
 */
.images-intro .images-intro__layout--v3 .images-intro__row--split .images-intro__link {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* Obrazki w wierszu split: wypełniają link (100% × 100%), cover zachowuje proporcje */
.images-intro .images-intro__layout--v3 .images-intro__row--split .images-intro__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  flex: 1;
}

/* Mobile: ≤991.98px */
@media (max-width: 991.98px) {
  .images-intro {
    margin: 30px 0;
  }
  /* Row of 2 → stack vertically */
  .images-intro .images-intro__layout--v1 .images-intro__row--2 {
    flex-direction: column;
  }

  /* Row of 3 → 2 per row (3rd wraps to new line) */
  .images-intro .images-intro__layout--v1 .images-intro__row--3, .images-intro .images-intro__layout--v2 .images-intro__row--2 {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .images-intro .images-intro__layout--v1 .images-intro__row--3 .images-intro__img, .images-intro .images-intro__layout--v2 .images-intro__row--2 .images-intro__img {
    flex: unset;
  }

  /* Variant 3: split → kolumny stack się pionowo */
  .images-intro .images-intro__layout--v3 .images-intro__row--split {
    flex-direction: column;
    gap: 1.5rem;
  }
  .images-intro .images-intro__layout--v3 .images-intro__col--right {
    gap: 1.5rem;
  }
  /* Linki i obrazki wracają do naturalnych rozmiarów (height: auto) */
  .images-intro .images-intro__layout--v3 .images-intro__row--split .images-intro__link {
    flex: unset;
    display: block;
  }
  .images-intro .images-intro__layout--v3 .images-intro__row--split .images-intro__img {
    object-fit: unset;
    height: auto;
    flex: unset;
  }
}