Large Card

.card-large {
  position: relative;
  color: $color-base-white;
  background-color: $color-blue-dark;
  margin-bottom: 2.4rem;
  max-width: 38.4rem;

  &.is-active {
    background-color: $color-base-blue;

    &::after {
      position: absolute;
      z-index: 1;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 100%);
      content: "";
      width: 0;
      height: 0;
      border-left: 1.2rem solid transparent;
      border-right: 1.2rem solid transparent;
      border-top: 2.4rem solid $color-base-blue;
    }
  }

  // Add optional color bars
  &.card-large--decoration .card-large__media {
    position: relative;

    &::before,
    &::after {
      position: absolute;
      z-index: 1;
      content: "";
      width: 3.2rem;
      height: 100%;
      top: 0;
      left: 0;
    }

    &::after {
      left: 3.2rem;
    }
  }

  // Specify decoration bar colors based on position
  &.card-large--decoration.is-even {
    .card-large__media::before {
      background-color: rgba($color-green-medium, 0.7);
    }

    .card-large__media::after {
      background-color: rgba($color-green-medium, 0.3);
    }
  }

  &.card-large--decoration.is-odd {
    .card-large__media::before {
      background-color: rgba($color-green-light, 0.7);
    }

    .card-large__media::after {
      background-color: rgba($color-green-light, 0.3);
    }
  }
}

.card-large__badge {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
}

.card-large__body {
  padding: 2.4rem 2.4rem 0.8rem;
}

.card-large__toggle {
  // Hide toggle link when active
  .card-large.is-active & {
    visibility: hidden;
  }
}

.card-large__image {
  display: block;
  max-width: 100%;
  height: auto;
}

.card-large__title {
  @include typeHeadline(true);
}

.card-large__action {
  color: $color-blue-light;

  &:hover {
    color: $color-base-white;
  }
}

.card-large__footer {
  padding: 0 1.2rem 0.8rem;
}

// Large Card grouping layout
.cards-large-group {
  display: flex;
  flex-wrap: wrap;

  @media (min-width: $breakpoint-desktop) {
    margin-left: -4.8rem;
  }

  > .card-large {
    @media (min-width: $breakpoint-tablet) {
      flex: 0 0 calc(33.3333% - 4.8rem);
      margin-left: 4.8rem;
    }
  }
}