/*
 * A section opening with a big heading on the left and a short text on
 * the right, then a button.
 *
 *   <section class="yb-heading-split yb-container">
 *     <p class="yb-tag">…</p>
 *     <h1 class="yb-h2">…</h1>
 *     <div class="yb-heading-split__aside"> icon badge, <p>… </div>
 *     <p class="yb-heading-split__actions"><a class="yb-button" href="…">…</a></p>
 *   </section>
 */
.yb-heading-split {
  display: grid;
  grid-template-columns: 50fr 40fr;
  column-gap: 10%;
  row-gap: 20px;
  align-items: start;
  margin-top: 80px;
  margin-bottom: 72px;
}

.yb-heading-split > .yb-tag {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0;
}

.yb-heading-split > h1,
.yb-heading-split > h2 {
  max-width: 400px;
  margin: 0;
}

.yb-heading-split__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  align-self: stretch;
  gap: 20px;
}

.yb-heading-split__aside .yb-icon-badge {
  margin-bottom: 5px;
}

.yb-heading-split__aside p {
  margin: 0;
}

.yb-heading-split__aside p + p {
  margin-top: -4px;
}

.yb-heading-split__actions {
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 1024px) {
  .yb-heading-split {
    grid-template-columns: 1fr 45%;
    column-gap: var(--yb-space-m);
    margin-bottom: 30px;
  }

  .yb-heading-split > h1,
  .yb-heading-split > h2 {
    max-width: 351px;
  }
}

@media (max-width: 767px) {
  .yb-heading-split {
    grid-template-columns: 1fr;
    row-gap: 30px;
    margin-top: 80px;
    margin-bottom: 40px;
  }

  .yb-heading-split > h1,
  .yb-heading-split > h2 {
    max-width: none;
  }
}

/* --text: no icon, the text column reads top-down beside the heading. */
.yb-heading-split--text {
  grid-template-rows: auto 1fr;
  margin-top: 105px;
  margin-bottom: 0;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--yb-color-border);
}

.yb-heading-split--text > .yb-tag {
  grid-column: 1;
  font-size: 9px;
  font-weight: var(--yb-weight-medium);
  line-height: 2;
  letter-spacing: 0;
}

.yb-heading-split--text > h2 {
  grid-column: 1;
  max-width: 560px;
}

.yb-heading-split--text .yb-heading-split__aside {
  grid-column: 2;
  grid-row: 1 / 3;
  justify-content: flex-start;
  gap: 12px;
  padding-top: 40px;
}

.yb-heading-split--text .yb-heading-split__aside p + p {
  margin-top: 0;
}

.yb-overview {
  margin-top: 70px;
}

@media (max-width: 767px) {
  .yb-heading-split--text {
    margin-top: 50px;
    padding-bottom: 30px;
  }

  .yb-overview {
    margin-top: 40px;
  }

  .yb-heading-split--text .yb-heading-split__aside {
    grid-column: 1;
    grid-row: auto;
    padding-top: 0;
  }
}