/* Keep the two feature-card descriptions on one baseline on wide screens. */
.insights-main > main > .insights-hero + section {
  margin-top: clamp(44px, 6vw, 88px);
}

@media (min-width: 851px) {
  .insights-grid .insight-card h2 {
    height: 3.36em;
    min-height: 3.36em;
    line-height: 1.12;
    overflow: visible;
  }
}

/* Match the lower sections to the inset rhythm of the hero and card area. */
.insights-main > main > .editorial-note,
.insights-main > main > .final-cta {
  width: calc(100% - clamp(24px, 4vw, 60px));
  max-width: 1380px;
  margin: 24px auto 0;
  padding: clamp(52px, 6vw, 88px) clamp(28px, 4.5vw, 68px);
  border-radius: var(--radius-xl);
}

.insights-main > main > .final-cta {
  margin-bottom: 24px;
  background: var(--sand);
}

@media (max-width: 850px) {
  .insights-main > main > .editorial-note,
  .insights-main > main > .final-cta {
    width: calc(100% - 24px);
    padding: 40px 26px;
    border-radius: var(--radius-lg);
  }
}

/* Keep each guide image attached to its own card content. */
.insights-main .insight-card {
  overflow: hidden;
  padding: 0;
}

.insights-main .insight-card-image {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: clamp(220px, 24vw, 320px);
  margin: 0 0 28px;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.insights-main .insight-card > :not(.insight-card-image) {
  margin-left: 34px;
  margin-right: 34px;
}

.insights-main .insight-card > small {
  display: block;
}

.insights-main .insight-card > .card-link {
  margin-bottom: 34px;
}