.footer {

background: $header-bg;
margin-top: 2em;
z-index: 100;
position: relative;

.container {
  padding-bottom: 2em;
  padding-top: 3em;
}

.nav-link {
  padding-right: 1em;

  &.nav-link:hover {
    color: $link-hover;
    text-decoration: none;
  }
}

.nav {
  margin-bottom: 1em;
}

.navbar {
  margin-bottom: 2em;
}

}

.bio {

@extend %flex;
@extend %flex-space-between;

margin-bottom: 3em;

.bio-img,
.bio-details {
  @extend %flex-child;
}

.bio-img.bio-img {
  @extend %flex-child-no-shrink;

  display: none;

  @include breakpoint(medium) {
    display: block;
    margin-right: 2em;
  }
}

.bio-img-container {
  width: 8em;
  margin: 0;

  img {
    margin: 0;
    border-radius: 100%;
  }
}

}