.about {
  @include constrain(800px);

  margin-top: 15px;
  margin-bottom: 15px;

  @include media(">=medium") {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

.about__image {
  $headshot-radius: 180px;
  $polygon: circle(#{$headshot-radius} at 50% 50%);

  border-radius: 50%;
  display: none;
  filter: grayscale(100%);
  margin: 0 auto 40px auto;
  transition: -webkit-filter 500ms linear;
  width: #{$headshot-radius * 2};

  &:hover {
    filter: none;
  }

  @supports (shape-outside: #{$polygon}) or (-webkit-shape-outside: #{$polygon}) {
    shape-outside: #{$polygon};
    -webkit-shape-outside: #{$polygon};
    float: right;
    margin: 0;
  }

  @include media(">=medium") {
    display: block;
  }
}

.about__copy {
  >p:first-of-type {
    @include drop-cap;
  }
}

.about__links {
  margin-top: 60px;
  text-align: center;
}

.about__link {
  @include transition(transform opacity);
  display: inline-block;

  &:hover {
    transform: translateY(-3px);
    opacity: 0.6;
  }

  & + & {
    margin-left: 20px;
  }

  svg {
    vertical-align: bottom;
  }
}
