<div class="grid">
  <div class="card">
    <div class="card__side card__side--front">
      <div class="card__picture card__picture--1">
        &nbsp;
      </div>
      <h4 class="card__heading">
        <span class="card__heading-span card__heading-span--1">Card 1 Description</span>
      </h4>
      <div class="card__details">

      </div>
    </div>
    <div class="card__side card__side--back card__side--back-1">
      Back
    </div>
  </div>

  <div class="card">
    <div class="card__side card__side--front">
      <div class="card__picture card__picture--2">
        &nbsp;
      </div>
      <h4 class="card__heading">
        <span class="card__heading-span card__heading-span--2">Card 2 Description</span>
      </h4>
      <div class="card__details">

      </div>
    </div>
    <div class="card__side card__side--back card__side--back-2">
      Back
    </div>
  </div>

  <div class="card">
    <div class="card__side card__side--front">
      <div class="card__picture card__picture--3">
        &nbsp;
      </div>
      <h4 class="card__heading">
        <span class="card__heading-span card__heading-span--3">Card 3 Description</span>
      </h4>
      <div class="card__details">

      </div>
    </div>
    <div class="card__side card__side--back card__side--back-3">
      Back
    </div>
  </div>
</div>

$color-primary: #55c57a;
$color-primary-light: #7ed56f;
$color-primary-dark: #28b485;
$color-secondary-light: #ffb900;
$color-secondary-dark: #ff7730;
$color-tertiary-light: #2998ff;
$color-tertiary-dark: #5643fa;
$color-white: #fff;
$color-light-grey: #777;
$color-grey-light-1: #f7f7f7;
$color-black: #000;

html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 10px;
  background-color: $color-light-grey;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 4.5rem;
  width: 80%;
  margin: 0 auto;
  margin-top: 5rem;
}

.card {
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 40rem;
  
  &__side {
    font-size: 2rem;
    height: 40rem;
    transition: all 1s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
    border-radius: 3px;
    box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
  
    &--front {
      background-color: $color-white;
    }

    &--back {
      background-color: green;
      transform: rotateY(180deg);
      
      &-1 {
        background-image: linear-gradient(to right bottom, $color-secondary-light, $color-secondary-dark);
      }

      &-2 {
        background-image: linear-gradient(to right bottom, $color-primary-light, $color-primary-dark);
      }

      &-3 {
        background-image: linear-gradient(to right bottom, $color-tertiary-light, $color-tertiary-dark);
      }
    }
  }

  &:hover &__side--front {
    transform: rotateY(-180deg);
  }

  &:hover &__side--back {
    transform: rotateY(0deg);
  }
  &__picture {
        background-size: cover;
        height: 23rem;
        background-blend-mode: screen;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

        &--1 {
            background-image: linear-gradient(to right bottom, $color-secondary-light, $color-secondary-dark), url("https://source.unsplash.com/y2azHvupCVo/1600x900");
        }

        &--2 {
            background-image: linear-gradient(to right bottom, $color-primary-light, $color-primary-dark), url("https://source.unsplash.com/01_igFr7hd4/1600x900");
        }

        &--3 {
            background-image: linear-gradient(to right bottom, $color-tertiary-light, $color-tertiary-dark), url("https://source.unsplash.com/_hpk_92Crhs/1600x900");
        }
    }

    &__heading {
        font-size: 2.8rem;
        font-weight: 300;
        text-transform: uppercase;
        text-align: right;
        color: $color-white;
        position: absolute;
        top: 12rem;
        right: 2rem;
        width: 75%;
    }

    &__heading-span {
        padding: 0.5rem 1rem;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;

        &--1 {
            background-image: linear-gradient(to right bottom, rgba($color-secondary-light, .85), rgba($color-secondary-dark, .85));
        }

        &--2 {
            background-image: linear-gradient(to right bottom, rgba($color-primary-light, .85), rgba($color-primary-dark, .85));
        }

        &--3 {
            background-image: linear-gradient(to right bottom, rgba($color-tertiary-light, .85), rgba($color-tertiary-dark, .85));
        }
    }
}