.c-preface {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: map(spaces, medium) map(spaces, large) calc(map(spaces, large) / 2);
  background-color: $color-year;
  background-color: var(--color-year, $color-year);
  background-image: inline('diamond.svg');
  background-repeat: repeat;

  @media (--from-medium-screen) {
    min-height: 9rem;
  }

  @media (--from-large-screen) {
    padding-top: map(spaces, xxlarge);
    padding-left: 25%;
  }
}

.c-preface__title {
  @apply --typeset-title;

  display: flex;
  align-items: flex-start;
  position: relative;
  margin-top: auto;
  color: map(colors, primary, light);

  svg {
    width: 1em;
    height: 1em;
    margin-right: map(spaces, small);
  }
}

.c-preface__main {
  position: relative;
  margin-top: map(spaces, small);
  color: color(white a(75%));

  .s-prose p:first-of-type {
    @apply --typeset-lede;
  }

  .s-prose p:last-of-type {
    margin-bottom: 0;
  }

  .c-avatar {
    width: 50%;
    float: right;
    margin-top: -7.5%;
    margin-right: -7.5%;

    @media (--from-large-screen) {
      width: auto;
      float: left;
      margin-left: -33%;
      margin-right: map(spaces, medium);
    }
  }

  a {
    border-bottom: 1px solid color(white a(25%));
    color: white;

    &:hover {
      border-bottom-color: color(white a(25%));
    }
  }
}
