.animated {
  margin: 0;
  line-height: 1.2;
  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 {
      margin-bottom: 20px;
      img {
        border-radius: 1em;
      }
    }
  }

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

    .media + .text {
      margin-top: 20px;
    }

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

  &.rounded {
    display: flex;
    justify-content: center;
    .max-width {
      align-items: flex-start;
      padding: 0 1em;
      width: 100%;
    }
    .box {
      width: 100%;
      box-sizing: border-box;
      border-radius: 2em;
      padding: 2em;
      margin: 1em 0;
      h1 {
        margin: 0;
        line-height: 1;
      }
      p {
        font-family: var(--font-secondary);
      }
    }
  }

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

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

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

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

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

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