/* Дополняет assets/css/styles.css. Только то, чего нет в purged-бандле.
   Брейкпоинты повторяют бандл: sm 40rem, md 48rem, lg 64rem. */

.market-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}

/* Пятая ячейка не должна оставлять дыру в незаполненном ряду. */
.market-grid > :last-child {
  grid-column: 1 / -1;
}

/* Первая ячейка обнуляет левый внутренний padding, чтобы её текст лёг ровно
   на левый край контейнера (там же, где H1 «The used Land Rovers…» ниже).
   Без этого содержимое было сдвинуто на 20px внутрь от края и весь strip
   визуально плыл вправо относительно hero. Правый край не трогаем — какая
   ячейка там окажется зависит от брейкпоинта (2/3/5 колонок). */
.market-grid > :first-child {
  padding-left: 0;
}

@media (width >= 40rem) {
  .market-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .market-grid > :last-child {
    grid-column: span 2;
  }
}

@media (width >= 64rem) {
  .market-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .market-grid > :last-child {
    grid-column: auto;
  }
}

/* Обёртка узла — grid-элемент, её растягивает сам грид. Карточка внутри тянется
   за ней, иначе пояснения разной длины дают пять карточек разной высоты. */
@media (width >= 48rem) {
  .chain-node > :first-child {
    height: 100%;
  }
}

.result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 2rem;
  row-gap: 1.5rem;
}

@media (width >= 40rem) {
  .result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 64rem) {
  .result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}