_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 {

  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);
  padding: $card-padding;
  transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
  &:hover,
  &:focus-within {
    box-shadow: gesso-box-shadow(3);
  }
}
.card__image{}
.card__featured-image {
  align-items: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  height: 45rem;
  justify-items: center;
  min-height: 44rem;
  position: relative;
  .card__header {
    align-self: end;
    margin-bottom: 0;
    margin-top: 0;
    max-width: $max-width;
    padding: 0 gesso-spacing(md);
    @include xl {
      padding: 0;
    }


    .card__date {
      margin-bottom: 0;
      margin-top: 0;
    }

    .card__title {
      background: gesso-brand(org-default, uw-white, primary);
      font-size: gesso-font-size(8);
      margin-bottom: 0;
      margin-top: 0;
      padding: gesso-spacing(sm) gesso-spacing(md);
    }

    .card__sub-title {
      background: gesso-brand(org-default, uw-white, primary);
      font-size: gesso-font-size(4);
      margin-bottom: 0;
      margin-top: 0;
      padding: gesso-spacing(xs) gesso-spacing(md);
    }

    .card__author {
      background: gesso-brand(org-default, uw-white, primary);
      margin-bottom: 0;
      margin-top: 0;
      padding: gesso-spacing(xs) gesso-spacing(md);
    }
  }
}
.card__header{
  @include uw-no-breakout();
  margin-bottom: rem(gesso-spacing(xs));
  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__sub-title{}
.card__author{
  @include uw-no-breakout();
  font-family: gesso-font-family(systemmedium);
  font-size: gesso-font-size(-1);
  margin-top: 0;
  padding: 0 0 gesso-spacing(xs) 0;
  a {
    @include link(
        $card-link-color,
        $card-link-color-hover
    );
  }
}
// body
.card__body {
  width: 100%;
}
.card__content {
  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 {
  width: 100%;
}
.card__tags{
  margin:0;
  padding:0;
  width: 100%;


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

// Have not worked on card feature.
.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;
    }
  }
}