.learn-page-container .card {
  max-width: 100%;
}

.learn-page-header {
  width: 100%;
  max-width: calc(50% - 0.5 * var(--space-card));
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;
  color: var(--text-primary);
}

.learn-page-header h1 {
  /* Sans/Desktop/Regular/3XL */
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  /* 64px */
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
  align-self: stretch;
  font-variation-settings: "wdth" 84;
}

.learn-page-header p {
  padding: 0;
  color: var(--color-text-secondary);

  /* Sans/Desktop/Regular/Large/Loose */
  font-size: var(--font-size-large);

  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose-alt);
  /* 31.92px */
  letter-spacing: -0.24px;
}

.card-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-card);
}

.three-column .why-boost-cards__grid {
  grid-template-columns: repeat(3, 1fr);
}

.three-column .content-detail-icon {
  height: 100%;
}

.card-masonry {
  display: flex;
  gap: var(--space-card);
}

/* Each column stacks independently, so a short card never inherits leftover
   height from a taller card in another column. */
.masonry-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-card);
  flex: 1 1 0;
  min-width: 0;
}

.card-masonry .item-a {
  grid-area: a;
}

.card-masonry .item-b {
  grid-area: b;
}

.card-masonry .item-c {
  grid-area: c;
}

.card-masonry .item-d {
  grid-area: d;
}

.card-masonry .item-e {
  grid-area: e;
}

@media (max-width: 1279px) {
  /* Narrower layouts keep the original grid; the column wrappers dissolve so
     the cards are grid items again. */
  .card-masonry {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "a b"
      "a d"
      "c d"
      "c d"
      "c e"
      "c .";
  }

  .masonry-col {
    display: contents;
  }

  .card,
  .card-group {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .card-row {
    grid-template-columns: repeat(1, 1fr);
  }

  .three-column .why-boost-cards__grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .card-masonry {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c"
      "d"
      "e";
  }

  .learn-page-header {
    max-width: none;
  }
}

/* Tablet: the design stacks the three sentences one per line at 64px, which is
   already the base size here - only the breaks need forcing, since natural
   wrapping lands mid-sentence. Below 812px the longest sentence (382px) exceeds
   the 50% column and wraps to a fourth line; the narrowest tablet we target is
   820px. Desktop and mobile keep natural wrapping. */
@media (min-width: 768px) and (max-width: 1279px) {
  .learn-page-header h1 span {
    display: block;
  }
}