.animated {
  margin: 0;
  animation-name: taglineEmerge;
  animation-fill-mode: forwards;
  animation-duration: 1400ms;
  opacity: 0;
  transform: translateY(50px);
}

@keyframes taglineEmerge {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

article {
  .max-width {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .media {
      width: 100%;
    }
    .image-overlay {
      img {
        border-radius: 1em 1em 0 0;
      }
    }
    .text-content {
      margin-top: 2em;
      padding: 0 2em;
    }
  }

  &.fullpage {
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 4em 1em;

    .media + .text {
      margin-top: 1em;
    }

    h4 {
      margin: 0;
      padding: 0;
    }
    p {
      font-family: var(--font-secondary);
    }
  }

  &.rounded {
    display: flex;
    justify-content: center;
    .max-width {
      padding: 0 1em;
      width: 100%;
    }
    .box {
      width: 100%;
      box-sizing: border-box;
      border-radius: 1em;
      margin: 1em 0;
      overflow: hidden;
      h1 {
        margin: 0;
        line-height: 1;
        overflow: hidden;
        &.larger {
          font-size: $box-larger-font-size;
          line-height: $box-larger-line-height;
        }
        &.shift {
          margin-top: $box-shift-top-margin;
          text-shadow: $box-shift-shadow;
        }
      }
      p {
        font-family: var(--font-secondary);
      }
      .image-overlay {
        position: relative;
        .overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: linear-gradient( 0deg, black, transparent);
        }
        transition: all 5s ease-out;
      }
      .text-content {
        position: relative;
      }
    }
  }

  @mixin large() {
    h1 { font-size: 80px; }
    h1.smaller { font-size: 70px; }
    h4, p { font-size: 35px; }
    ul { font-size: 33px; }
    .hide-large { display: none; }
  }

  @mixin medium() {
    h1 { font-size: 50px; }
    h1.smaller { font-size: 40px; }
    h4, p, ul { font-size: 30px; }
    .hide-medium { display: none; }
  }

  @mixin small() {
    h1 { font-size: 40px; }
    h1.smaller { font-size: 30px; }
    h4, p { font-size: 24px; }
    ul { font-size: 23px; }
    .hide-small { display: none; }
  }

  @media screen and (max-width:767px) { @include small(); }

  @media screen and (min-width:767px) {
    @include medium();
    &.rounded {
      margin: 20px 0;
    }
    .max-width.split-content {
      flex-direction: row;
      &.align-right {
        flex-direction: row-reverse;
      }
      .box, .media, .text {
        flex: 0 0 49%;
      }
      .box {
        height: 100%;
      }
    }
  }

  @media screen and (min-width:1024px) {
    @include large();
  }

  &.rounded .max-width,
  .split-content { @include small(); }
}