/* ------------------------------------ *\
  #CARDS
\* ------------------------------------ */

.c-card {
  @include clearfix();
  margin-bottom: $spacing-unit;
  width: 100%; //So cards by default always take up 100% of the available width available to it.
  position: relative; //So absolutely positioned elements are positioned based on the card itself.
  background-color: palette(gray, lightest);
  border-radius: $global-border-radius;
  margin-bottom: 32px;
  
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.c-card__link {
  @include font-size(medium);
  @include font-weight(bold);
  // display: block;
  display: inline-block;
}

.c-card__body {
  padding: $spacing-unit;
  margin-bottom: auto;
}

.c-card__intro {
  padding-top: $spacing-unit;
}

.c-card__image {
  position: relative;
  border-top-left-radius: $global-border-radius;
  border-top-right-radius: $global-border-radius;
  overflow: hidden; //Needed for border-radius to work
  
  .c-card--rev & {
    order: 2;
    
    @supports (display: flex){
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-left-radius: $global-border-radius;
      border-bottom-right-radius: $global-border-radius;
    }
  }
}

.c-card__image:before {
  content: '';
  border-bottom: $spacing-unit solid palette(gray, lightest);
  border-left: $spacing-unit solid transparent;
  border-right: $spacing-unit solid transparent;
  content: "";
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  position: absolute;
  opacity: 0;
  z-index: 10;
  
  .c-card--rev & {
    top: 0;
    bottom: auto;
    transform: translateX(-50%) scaleY(-1);
  }
}

.c-card__image--clipped:before {
  opacity: 1;
}