////
/// Card Module - horizontal
/// @group card
////

#{ns(card)} {
  @include respond-from(md) {
    &--horizontal,
    &--horizontal-half,
    &--horizontal-tier {
      flex-direction: row;
    }

    &--horizontal &__img,
    &--horizontal-half &__img,
    &--horizontal-tier &__img {
      height: 100%;

      img {
        height: 100%;
        object-fit: cover;
      }
    }

    &--horizontal &__header {
      @include width(40%);
      flex: 0 0 40%;
    }

    &--horizontal-half &__header {
      @include width(50%);
      flex: 0 0 50%;
    }

    &--horizontal-tier &__header {
      @include width(calc(100% / 3));
      flex: 0 0 #{calc(100% / 3)};
    }
  }
}