.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; }
}