.content
  .card
    .headcard
      %span
    .infos
      .logo
      %h1 Travel to Mars
      %h2.price 4000
      %p 30 years to go!
      %span.btn Buy it
    %img.nasa(src="https://www.nasa.gov/sites/default/files/images/nasaLogo-570x450.png")

$primary: #ffffff;
$highlight: #2F86D4;
$highlight_2: #585858;
$highlight_3: #969696;
html {
  height: 100%;
}
body{
  background: #CADBFF;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  }

.content{
  min-width: 900px;
  height:auto;
  padding: 3em;
  display: flex; 
  justify-content: center;
  align-items: center;
  
}

.card{
   width: auto;
  height: auto;
  padding: 2em;
  border-radius: 0.5em;
  background: $primary;
  text-align:center;
  justify-content: center;
  align-items: center;
  display:flex;
  flex-direction: row;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.1);
  transition: 0.2s all ease-in-out;
  
    transform: perspective(1200px) rotate(90deg) rotateY(-45deg) rotateZ(-55deg);
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.2), 20px 20px 40px #ADBFE4;
  .infos, img.nasa{
    padding: 0em 1em;
  }
  
  h1{
    margin: 0;
    color: $highlight_2;
    
  }
  h2.price{
    font-size: 3em;
    color: $highlight;
    margin: 0;
    &::after{
      content:'/Year';
      font-size: 0.4em;
    }
    &::before{
      content:'$';
      font-size: 0.5em;
      top:-10px;
      position:relative;
      
    }
  }
  p{
    color:$highlight_3;
  }
  span.btn{
   text-transform: uppercase;
   border: 1px solid $highlight;
   padding: 1em 4em;
   border-radius: 0.4em;
   font-size: 0.7em;
   color: $highlight; 
  letter-spacing: 0.1em;
  margin-top: 2em;
  display: inline-flex;
  transition: .2s all ease-in-out;
  cursor: pointer;
    &:hover{
      
      color: $primary;
      background-color: $highlight;
     
    }
  }
  
}

@media screen and (max-width: 768px) {
  .card{ 
    
     flex-direction: column-reverse;
    }
  .infos{
    margin: 3em 0em;
  }
  
}


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}