/* Vanguard: a clear visual for each illustrated solution. */
.offer-list {
  border: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.offer-list article.offer-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  gap: 20px;
  padding: 24px;
  border: 1px solid #cbd4d7;
  background: #edf0f0;
  align-content: start;
}

.offer-list article.offer-card:hover { background: #e5e9ea; }
.offer-list article.offer-card-primary { grid-column: 1 / -1; }
.offer-list article.offer-card-primary p { max-width: 760px; }
.offer-list .offer-illustration {
  grid-column: 1 / -1;
  margin: -24px -24px 2px;
  background: #1b282d;
  overflow: hidden;
}
.offer-list .offer-illustration img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.offer-list .offer-illustration figcaption {
  padding: 10px 16px;
  color: #c0cdd0;
  font: 600 10px / 1.4 var(--mono, monospace);
  letter-spacing: .08em;
}
.offer-list .offer-icon { justify-self: end; }

@media (max-width: 760px) {
  .offer-list { grid-template-columns: 1fr; gap: 14px; }
  .offer-list article.offer-card { padding: 20px; gap: 15px; }
  .offer-list article.offer-card-primary { grid-column: auto; }
  .offer-list .offer-illustration { margin: -20px -20px 0; }
}