Card partial. Material Design look

_card.scss

@mixin box-s {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}


/*  .card_______________
/*  |  &__body          |
/*  |    &__header      |
 *  |      &__img--top  |
 *  |    &__title       |
 *  |    &__text        |
 *  |    &__footer      |
 *  |___________________|
*/

.card {
  display: block;
  max-width: 25rem;
  overflow: hidden;
  border: $color-dark solid 1px;
  border-radius: 5px;
  text-align: left;

  @include box-s;

  &__header {
    overflow: hidden;
    display: inline-block;
  }
  &__body {
    padding: 3em 1.9em;
    margin: -5px 0;
  }
  &__img--top {
    width: 100%;
    height: auto;
    vertical-align: middle;
    transition: transform 800ms ease-out;

    &:hover {
      transform: scale(1.02);
    }
  }

  &__title {
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1.2px;
    margin-bottom: 1em;
  }

  &__text {
    line-height: 1.6;
    font-size: 1rem;
    letter-spacing: 0.6px;
    font-weight: 400;
  }

  &__footer {
    width: 100%;
    font-size: 0.9rem;
    padding: 1.2em 2.2em;
  }
}