_card.scss

// @file
// Styles for Cards.

$card-accent-border-color: gesso-color(ui, generic, accent) !default;
$card-link-color: gesso-color(text, on-light) !default;
$card-link-color-hover: gesso-color(ui, generic, text-dark) !default;
$card-meta-color: gesso-color(ui, generic, text-dark) !default;
$card-padding: rem(gesso-spacing(sm)) !default;

.card {
  @include uw-flex-grid(card);
  //background:$test-color-1;
  width: 100%;

  .views-row &{
    height:100%;
  }
  .uw-label{
    display:block;
    margin-top:1rem;
  }

  &__catalog-tags {
    padding-bottom: rem(gesso-spacing(sm));
  }
}

// if card--show-hover class is present then show "
.card--show-hover{
  border-bottom: 3px solid $card-accent-border-color;
  box-shadow: gesso-box-shadow(1);
  transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
  &:hover,
  &:focus-within {
    box-shadow: gesso-box-shadow(3);
  }
}
.card__featured-image{
  background-position:center center;
  background-repeat:no-repeat;
  background-size: cover;
  height:45rem;
  min-height: 44rem;

}
// top
.card__header{
  @include uw-no-breakout();
  color: $card-meta-color;
  margin-bottom: rem(gesso-spacing(sm));
  width: 100%;

}
.card__date {
  font-size: rem(gesso-font-size(0));
  margin-bottom: rem(gesso-spacing(sm));
}
.card__title {
  margin:rem(gesso-spacing(xs)) 0;
  padding:0;
  width: 100%;
  a {
    @include link-reverse(
        $card-link-color,
        $card-link-color-hover
    );
  }
}
.card__author{
  @include uw-no-breakout();
  font-family: gesso-font-family(systemmedium);
  font-size: gesso-font-size(-1);
  a {
    @include link(
        $card-link-color,
        $card-link-color-hover
    );
  }
}
// body
.card__body {
  @include uw-flex-grid();
  //background:$test-color-10;
  gap:inherit;
  padding: $card-padding;
  width: 100%;
  p:last-child {
    margin-bottom: 0;
  }
}
.card__content {
  //background:$test-color-9;
  margin-bottom: rem(gesso-spacing(md));
  width: 100%;
}
.card__media {
  //background:$test-color-4;
  margin-bottom: rem(gesso-spacing(md));
  order:-1;
  width: 100%;
  a {

    display:inline-block;
    height: 100%;
    width: 100%;
    &:hover,
    &:focus{
      img{
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        transition:filter gesso-duration(shortest) gesso-easing(ease-in);
      }
    }
  }
  img {
    //-webkit-filter: grayscale(0);
    //filter: grayscale(0);
    //transition:filter gesso-duration(shortest) gesso-easing(ease-in);
    width: 100%;
    &:hover{
      //-webkit-filter: grayscale(100%);
      //filter: grayscale(100%);
      //transition:filter gesso-duration(shortest) gesso-easing(ease-in);
    }
  }
}

.card__position {
  color: $uw-black;
  font-size: 1.26562rem;
}

// footer
.card__footer {
  @include uw-no-breakout();
  margin-top: auto;
  padding: rem(gesso-spacing(md));
  width: 100%;

  > div {
    margin-bottom: rem(gesso-spacing(sm));
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.card__tags{
  width: 100%;

}
.card__readmore {
  text-align: right;
}
.card__social{
  max-width:20rem;
  width: 100%;
}



.card--feature {
  .card__body {
    padding-top: $card-padding;
  }

  .card__media {

    margin-bottom: 0;
  }

  @include breakpoint(gesso-breakpoint(md)) {
    flex-direction: row;

    .card__title {

    }

    .card__body {
      max-width: 600px;
      padding: $card-padding 2vw 0;
    }

    .card__media {
      order: initial;
    }
  }
}