////
/// Card Module - header
/// @group card
////

#{ns(card)} {
  &__header {
    order: 1;
    position: relative;
    flex: 0 0 auto;
  }

  &__header #{ns(badges-group)} {
    position: absolute;
    top: 0;
    left: 0;
    @include padding(3v);
  }

  @include hover-brighten(#{&}#{ns(enlarge-link)}, '#{&}__img, #{&}__vid');
  @include hover-brighten(#{&}#{ns(enlarge-button)}, '#{&}__img, #{&}__vid');

  &__img,
  &__vid {
    @include hover-brighten-filter;
  }

  &__img img,
  &__img svg,
  &__vid iframe,
  &__vid video {
    @include aspect-ratio(16x9);
    @include fit-cover-center;
  }

  &__img img {
    display: block;
  }
}