@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");

$color-primary-light: #7ed56f;
$color-primary-dark: #28b485;
$color-secondary-light: #FFB900;
$color-secondary-dark: #FF7730;
$color-tertiary-light: #2998FF;
$color-tertiary-dark: #5643FA;

*, *::after, *::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
}

.flipcontent {
  height: 100vh;
  background: linear-gradient(to bottom right, aqua, lightblue);
  text-align: center;
  padding: 4em 0;
}

.flipcards {
  display: flex;
  justify-content: space-evenly;
}

.flipcard {
  width: 25%;
  position: relative;
  height: 25em;
  perspective: 150em;
  
  &__side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25em;
    backface-visibility: hidden;
    transition: all .6s ease;
    box-shadow: 1em 1em 2em rgba(0,0,0,.2);
    
    &--front {
      background-color: #FFF; 
    }
    
    &--back {
      color: #FFF;
      transform: rotateY(180deg);
      
      &-1 {
        background-image: linear-gradient(to right bottom, $color-primary-light, $color-primary-dark);;        
      }
      
      &-2 {
        background-image: linear-gradient(to right bottom, $color-tertiary-light, $color-tertiary-dark);
      }
      
      &-3 {
        background-image: linear-gradient(to right bottom, $color-secondary-light, $color-secondary-dark);
      }
    }
  }
  
  &:hover &__side--front {
    transform: rotateY(-180deg);
  }
  
  &:hover &__side--back {
    transform: rotate(0);
  }
  
  &__description {
    text-transform: uppercase;
    font-size: 5em;
    padding: 1em 0;
    
    svg {
      width: 1.5em;
      height: 1.5em;
      fill: #FFF;
    }
  }
}