<div class="source">
	  <a href="https://www.behance.net/gallery/53500361/Daily-UI-Set-One" target="_blank"/>Behance</a>
</div>
<div class="container card">
		<div class="card_left">
			<a href="#"><i class="fa fa-long-arrow-left left" aria-hidden="true"></i></a>
			<a href="#"><i class="fa fa-long-arrow-right right" aria-hidden="true"></i></a>
			<img src="http://res.cloudinary.com/dzkfmthai/image/upload/v1498119804/card_img_zghqta.jpg">
		</div>
		<div class="card_right">
			<span>global chair</span>
			<h3>Eero Aarnio Style Ball Chair</h3>
			<p>Our Reproduction of the Aarnio Ball Chair comes in a selection of colors and meets the architectural specifications of the original. </p>
			<div class="colours">
				<div class="colour orange active"></div>
				<div class="colour green"></div>
				<div class="colour gray"></div>
			</div>
			<div class="card_footer">
				<span class="price">$890</span>
				<a href="#" class="btn">
					buy now
				</a>
			</div>
		</div>
	</div>

$behance: #0057ff;


$mont : 'Montserrat', sans-serif;

$background : linear-gradient(30deg, rgb(204, 59, 40) 0%, rgba(249, 140, 87, 0.98) 100%);
$white: #fff;
$white_25: #f7f5f5;
$whitish : #e8e8e8;
$orange : #f37d3a;

$yellow : #ffb33a;
$black : #262626;
$gray: #4f4f4f;

$green: #3af361;
$grey : #7c7c7c;
html{ height: 100%;}

body{
  background: $background;
  font-family: $mont;
  color: $black;
  min-height: 100%;
  margin: 0;
}
.source{
  background-color: $behance;
  color: $white;
  font-weight: 700;
  text-decoration: none;
  position: absolute;
  padding: 10px;
  top: 10px;
  border-radius: 5px;
	margin-left: 20px;
  a{
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
}
.container{
  border:1px solid transparent;
  background-color: $white;
  width: 600px;
  max-width: 60%;
  margin: 0 auto;
  display: flex;
  box-shadow: 0px 11px 46.44px 7.56px rgba(0, 0, 0, 0.44);
  top: 3rem;
  position: relative;
  @media(max-width: 1000px){
    flex-direction: column;
  }
	@media(max-width: 780px){
    width: 300px;
  }
  .card_left{
    flex: 1 1 50%;
    padding: 60px;
		position: relative;
		.fa{
      font-size: 1.5rem;
      color: $whitish;
      position: absolute;
      top: 25px;
    }
		.fa:hover { color: $orange; }
    .left{
      left: 20px;
    }
    .right{
      right: 20px;
    }
    img{
      max-width: 100%;
      @media(max-width: 1000px){
        width: 90%;
        max-width: 200px;
        display: block;
        margin: 0 auto;
      }
    }
  }
  .card_right{
    flex: 1 1 50%;
    padding: 40px;
    background: $white_25;
    span{
      text-transform: uppercase;
      color: $orange;
      letter-spacing: 1.2px;
      font-size: .7rem;
    }
    h3{
      font-weight: 500;
      color: $black;
      font-size: 1.25rem;
    }
    p{
      font-size: .85rem;
      color: $gray;
      font-weight: 300;
    }
    .colours{
      display: flex;
      .colour{
        border-radius: 20px;
        height: 12px;
        width: 12px;
        background: $white;
        margin:0 8px;
        position: relative;
      }
      .colour:nth-child(1){
        margin-left: 0;
      }
      .colour:after{ 
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        border-radius: 30px;
      }
      .orange:after{ background: $orange;}
      .green:after{ background: $green;}
      .gray:after{ background: $gray;}
      .colour:hover{ opacity: .3;}
      .active.colour:after{
        height: 6px;
        width: 6px;
        position: absolute;
        top: 3px;
        left: 3px;
      }
    }
    .card_footer{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 25px;
      .price{
        color: rgba($black, .59);
        letter-spacing: 1px;
        font-size: 1.25rem;
      }
      .btn{
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 500;
        color: $white;
        background: $orange;
        font-size: .7rem;
        padding: 10px 30px;
        border-radius: 30px;
        letter-spacing: 1.2px;
        margin-left: 15px;
      }
      .btn:hover{
        color: $orange;
        background: $white;
      }
    }
  }
}