.intro-block {
  background-color: #fff;
  width: 100vw;
  position: relative;
  right: 50%;
  left: 50%;
  margin-right: -50vw;
  margin-left: -50vw;
  margin-top: 6rem;
}

.intro-block--grey {
  background-color: #f3f5f6;
}

.intro-block__container {
  display: grid;
  grid-template-columns: minmax(0, 491fr) minmax(0, 595fr);
  align-items: center;
  gap: 13.4rem;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 11rem;
}

.intro-block__media {
  order: 1;
  align-self: stretch;
}

.intro-block--image-right .intro-block__media {
  order: 2;
}

.intro-block--image-right .intro-block__container {
  grid-template-columns: minmax(0, 595fr) minmax(0, 491fr);
}

.intro-block__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: 0.3rem;
}

/* Landscape photos lose a lot of width in this portrait frame, so the
   editor picks which side of the photo stays in view. */
.intro-block--focus-left .intro-block__media img {
  object-position: 10% center;
}

.intro-block--focus-right .intro-block__media img {
  object-position: 90% center;
}

.intro-block__content {
  order: 2;
}

.intro-block--image-right .intro-block__content {
  order: 1;
}

.intro-block__heading {
  margin: 0 0 1.5rem;
  font-family: "Flanders Art Sans", sans-serif;
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 1.38;
  color: #333332;
}

.intro-block__text {
  font-family: "Flanders Art Sans", sans-serif;
  font-size: 1.8rem;
  line-height: 1.5;
  color: #333332;
}

.intro-block__text > :first-child {
  margin-top: 0;
}

.intro-block__text > :last-child {
  margin-bottom: 0;
}

.intro-block__text p {
  margin: 0 0 1.8rem;
}

@media screen and (max-width: 1023px) {
  .intro-block__container,
  .intro-block--image-right .intro-block__container {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.2rem;
    padding: 0 3.2rem;
  }

  .intro-block__media,
  .intro-block--image-right .intro-block__media {
    order: 1;
  }

  .intro-block__content,
  .intro-block--image-right .intro-block__content {
    order: 2;
  }

  .intro-block__media img {
    aspect-ratio: 16 / 9;
  }
}

@media screen and (max-width: 767px) {
  .intro-block__container,
  .intro-block--image-right .intro-block__container {
    padding: 0 2.4rem;
  }

  .intro-block__heading {
    font-size: 2.8rem;
  }
}