.about-intro {
  grid-column: 1 / -1;
  display: flow-root;
}

.about-intro__aside {
  width: 100%;
  margin-bottom: var(--space-4);
}

.about-contact {
  margin-top: var(--space-8);
  color: var(--color-black);
  font-size: var(--font-size-base);
  line-height: var(--line-height-sm);
}

.about-contact__description {
  margin: 0 0 var(--space-6);
}

.about-contact__links {
  margin: 0;
}

.about-contact__link {
  display: block;
  font-weight: var(--font-weight-semibold);
}

.about-intro__description + .about-intro__description {
  margin-top: var(--space-6);
}

.about-interests__description {
  margin: 0;
}

@media (width < 48rem) {
  .about-intro,
  .about-intro__aside {
    display: contents;
  }

  .about-intro__portrait {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .about-intro__text {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .about-interests {
    grid-row: 6;
  }

  .about-contact {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 0;
  }
}

@media (min-width: 48rem) {
  .about-intro__aside {
    float: right;
    width: calc((100% - 3 * var(--grid-gap)) / 2 + var(--grid-gap));
    margin-left: var(--grid-gap);
  }
}

@media (48rem <= width < 64rem) {
  .about-interests {
    grid-template-columns: subgrid;
  }

  .about-interests__section {
    grid-column: span 4;
  }

  .about-interests__section:first-child {
    grid-column: 1 / -1;
  }

  .about-intro {
    display: contents;
  }

  .about-intro__text {
    grid-column: 1 / 5;
    grid-row: 2;
    color: var(--color-black);
  }

  .about-intro__aside {
    grid-column: 5 / 9;
    grid-row: 2;
    float: none;
    width: 100%;
    margin: 0;
  }
}

@media (min-width: 64rem) {
  .about-interests {
    grid-row: 3;
    grid-template-columns: subgrid;
  }

  .about-interests__section {
    grid-column: span 5;
  }

  .about-intro {
    display: contents;
  }

  .about-intro__text {
    grid-column: 2 / 11;
    grid-row: 2;
    color: var(--color-black);
  }

  .about-intro__aside {
    grid-column: 12 / 17;
    grid-row: 2;
    float: none;
    width: 100%;
    margin: 0;
  }
}