.card {

$card-padding: 20px;

@include outer-container;
@include pad($section-pad $outer-pad);
display: flex;
flex-wrap: wrap;

@include media($mobile) {
  @include pad($section-pad/2 $outer-pad);
}

&__item {
  opacity: 1;
  background: $white;
  margin-bottom: $gutter;
  transition: opacity 0.4s ease 0s, transform 0.4s ease 0s, box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: $base-border-radius;

  &--clickable:focus,
  &--clickable:hover,
  &--clickable:active {
    border: 0;
    box-shadow: 0 9px 12px -6px rgba($black, 0.15), 0 18px 32px 3px rgba($black, 0.1), 0 8px 49px 7px rgba($black, 0.08);
  }

  @include media($desktop) {
    @include span-columns(4);
    @include omega(3n);
    display: flex;
  }

  @include media($tablet) {
    @include span-columns(6);
    @include omega(2n);
    display: flex;
  }

  @include media($mobile) {
    @include span-columns(12);
    @include omega(1n);
    display: flex;
  }
}

&__content {
  border-radius: $base-border-radius;
  padding: $card-padding;
  border: $base-border;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

&__thumbnail {
  $thumbnail-height: 200px;
  @include border-top-radius($base-border-radius);
  display: flex;
  width: 100%;
  height: auto;
  overflow: hidden;
  border: $base-border;
  max-height: $thumbnail-height;
  min-height: $thumbnail-height;

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

&__thumbnail + &__content {
  @include border-top-radius(0);
  border-top: 0;
}

&__title {
  margin-bottom: 10px;
  font-size: 22px;
  color: $heading-color;
}

&__description {
  margin: 0;
  line-height: 1.5;
  font-size: 16px;
  color: $text-color;
}

}