/* Ivory introduction: what Flowalto does. The heading on the left, the
   reading column on the right; stacked on portrait tablets and phones.
   Its background sits under the hero's canvas (which overlaps its top), so
   only its content is raised above it. */
.intro {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  align-items: start;
  padding: clamp(96px, 17svh, 210px) var(--gutter) clamp(120px, 19svh, 220px);
  background: var(--ivory);
  color: var(--ink);
}

.intro > * {
  position: relative;
  z-index: 2;
}

.intro .title {
  grid-column: 1 / span 5;
}

/* The first line of the reading column sits level with the heading's. */
.intro__body {
  grid-column: 7 / span 6;
  padding-top: 0.5em;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .intro .title {
    grid-column: 1 / -1;
    max-width: 16em;
  }
  .intro__body {
    grid-column: 1 / -1;
    margin-top: clamp(28px, 4.5svh, 48px);
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  .intro {
    padding: 72px var(--gutter) 104px;
  }
}