/*
 * Intro of a service page: the page heading, then a column with the lead
 * text and a button next to a column with an accordion.
 *
 *   <section class="yb-intro yb-container">
 *     <h1 class="yb-h2">…</h1>
 *     <div class="yb-intro__body"><p>…</p><a class="yb-button yb-button--plain" href="#yb-consultation">Kirjuta meile</a></div>
 *     <div class="yb-intro__aside yb-accordion">…</div>
 *   </section>
 */
.yb-intro {
  display: grid;
  grid-template-columns: 1fr 559px;
  column-gap: var(--yb-space-m);
  row-gap: var(--yb-space-m);
  padding-top: 70px;
}

.yb-intro > h1,
.yb-intro > h2 {
  grid-column: 1;
  max-width: 513px;
}

.yb-intro__body {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--yb-space-m);
}

.yb-intro__body p {
  max-width: 440px;
  margin: 0;
  font-size: var(--yb-size-lead);
  line-height: 1.55;
}

.yb-intro__aside {
  grid-column: 2;
  grid-row: 2;
}

@media (max-width: 1024px) {
  .yb-intro__body p {
    max-width: none;
  }
}

@media (max-width: 1024px) {
  .yb-intro {
    grid-template-columns: 1fr;
    padding-top: 60px;
  }

  .yb-intro > h1,
  .yb-intro > h2 {
    max-width: 45%;
  }

  .yb-intro__aside {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--yb-space-l);
  }
}

@media (max-width: 767px) {
  .yb-intro {
    padding-top: 40px;
  }

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