.e-face {
  align-items    : stretch;
  display        : flex;
  flex-direction : column;
  justify-content: space-between;
  @extend %background;
  @extend %bg;
  height         : auto !important;

  & > img {
    max-width: 77% !important;
    margin   : auto;
  }

  & .e-nav {
    &.white {
      @extend %dark-color;
    }
  }
}

.face-body {
  margin     : 0 auto;
  width      : 100%;
  display    : flex;
  flex-wrap  : wrap;
  flex-grow  : 1;
  flex-shrink: 0;
  padding    : 1.5rem;
  text-align : center;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);

  & .e-btn {
    text-shadow: none;
  }
  @include desktop-plus {
    max-width: 80rem;
  }

  &.centered {
    text-align: center;
  }
}

.face-item {
  padding: 0.55rem;
  margin : auto auto 0.625rem;
  @include tablet {
    max-width: 49.5%;
    margin   : auto;
  }

  & > .e-title {
    padding-bottom: 0.70rem;
  }

  & > .e-subtitle {
    padding-bottom: 0.40rem;
  }
}
@media only screen and (max-width: 1024px) {
  .e-face,
  .face-body,
  .face-item {
    overflow: hidden;
  }
}