.content-navigation-card {
  @extend %nicer-card-grid;
  border: 0;

  .media-container {
    border-radius: $border-radius-normal;
  }

  &:link:hover {
    .content-navigation-text {
      background: linear-gradient(to bottom, rgba($color-black, 0) 0%, rgba($color-black, .7) 100%);
    }
  }

  &.tui-card.full-width {
    @include breakpoint(xs) {
      width: 100%;

      h3 {
        max-height: none;
        -webkit-line-clamp: initial;

        /* autoprefixer: ignore next */
        -webkit-box-orient: initial;
        overflow: visible;
        text-overflow: initial;
      }
    }
  }
}

.content-navigation-text {
  background: linear-gradient(to bottom, rgba($color-black, 0) 0%, rgba($color-black, .56) 100%);
  position: absolute;
  letter-spacing: .05em;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: $margin-normal;
  margin: 0;
  transition: all .2s;
  border-radius: $border-radius-normal;
  color: $color-white;
  font-weight: bold;

  @include breakpoint(sm) {
    padding: $margin-double;
  }
}

.content-navigation-text-center {
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &.awesome-sauce {
    h3 {
      font-family: 'awesome_sauceitalic', sans-serif;
      text-align: center;
      hyphens: none;
    }

    @include breakpoint(xs) {
      h3 {
        font-size: 2.2rem;
      }
    }

    @include breakpoint(sm) {
      h3 {
        font-size: 2.2rem;
      }
    }

    @include breakpoint(md) {
      h3 {
        font-size: 3.2rem;
        margin-bottom: $margin-enterprise;
      }
    }

    @include breakpoint(lg) {
      h3 {
        font-size: 3.6rem;
        margin-bottom: $margin-double;
      }
    }
  }

  .sub-line {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 0;

    &:last-child {
      margin-bottom: 0;
    }

    @include breakpoint(sm) {
      margin-bottom: $margin-third;
    }

    @include breakpoint(md) {
      font-size: 1.8rem;
    }
  }
}