<div class="card">

  <div class="title">Standard</div>

  <div class="icon">
    <svg enable-background="new 0 0 512 512" height="512px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M468.493,101.637L371.955,5.098H159.57v77.231H43.724v424.769h308.923v-77.231h115.846V101.637z   M371.955,32.401l69.236,69.235h-69.236V32.401z M63.031,487.79V101.637h173.769v96.538h96.538V487.79H63.031z M256.108,109.632  l69.236,69.235h-69.236V109.632z M352.647,410.56V178.867l-96.538-96.538h-77.231V24.406h173.769v96.538h96.538V410.56H352.647z" fill="#37404D"/></svg>
  </div><!--/icon-->

  <div class="features">
    <ul>
      <li><span>5</span> Edits</li>
      <li><span>1GB</span> Storage</li>
      <li><span>3</span> Pages</li>
      <li><span>1</span> Hour free support</li>
    </ul>
  </div><!--/features-->

  <a href="#" class="btn">Check it out</a>

</div><!--/card-->

<div class="card">

  <div class="title">Expert</div>

  <div class="icon">
    <svg enable-background="new 0 0 512 512" height="512px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M285.928,113.067c62.492,0,113.327,50.827,113.327,113.327c0,0.344-0.041,0.705-0.066,1.049  c-0.049,0.836-0.107,1.672-0.123,2.525l-0.426,17.133l17.159,0.065c41.53,0.115,75.313,34.005,75.313,75.535  c0,41.415-33.718,75.305-75.157,75.518l-3.664,0.016H104.977c-46.244-0.049-83.872-37.693-83.872-83.929  c0-35.825,22.806-67.714,56.737-79.356l9.444-3.229l1.664-9.838c4.115-24.282,24.97-41.907,49.588-41.907  c7.846,0,15.428,1.82,22.536,5.394l15.306,7.689l7.386-15.444C202.531,138.398,242.635,113.067,285.928,113.067 M285.928,96.277  c-51.778,0-96.358,30.315-117.303,74.092c-9.059-4.558-19.256-7.182-30.086-7.182c-33.233,0-60.762,24.184-66.14,55.893  C32.82,232.657,4.316,270.104,4.316,314.307c0,55.597,45.063,100.669,100.644,100.718h311.084v-0.016  c50.777-0.263,91.856-41.481,91.856-92.308c0-50.909-41.177-92.177-92.053-92.324c0.033-1.344,0.197-2.639,0.197-3.984  C416.044,154.532,357.79,96.277,285.928,96.277L285.928,96.277z" fill="#37404D"/></svg>
  </div><!--/icon-->

  <div class="features">
    <ul>
      <li><span>10</span> Edits</li>
      <li><span>10GB</span> Storage</li>
      <li><span>9</span> Pages</li>
      <li><span>5</span> Hour free support</li>
    </ul>
  </div><!--/features-->

  <a href="#" class="btn">Check it out</a>

</div><!--/card-->

<div class="card">

  <div class="title">Elite</div>

  <div class="icon">
    <svg enable-background="new 0 0 512 512" height="512px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M316.01,199.02L256.134,14.817L196.239,199.02H1.134l158.102,113.324L98.53,496.487l157.604-114.232  l157.585,114.232l-60.687-184.143L511.134,199.02H316.01z M335.084,318.257l42.407,128.63L267.22,366.963l-11.086-8.033  l-11.086,8.033l-110.291,79.923l42.408-128.63l4.353-13.18l-11.289-8.08L59.903,217.909h136.336h13.724l4.242-13.051l41.929-128.957  l41.91,128.957l4.242,13.051h13.724h136.336l-110.327,79.088l-11.27,8.08L335.084,318.257z" fill="#37404D"/></svg>
  </div><!--/icon-->

  <div class="features">
    <ul>
      <li><span>Unlimited</span> Edits</li>
      <li><span>20GB</span> Storage</li>
      <li><span>unlimited</span> Pages</li>
      <li><span>Unlimited</span> free support</li>
    </ul>
  </div><!--/features-->

  <a href="#" class="btn">Check it out</a>

</div><!--/card-->

@import url(https://fonts.googleapis.com/css?family=Varela+Round);

// Colors
$color-one: #1F2124;
$color-two: #383A3F;
$color-three: #F68657;
$color-four: #F6B352;

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

body {
  background: $color-two;
  font-family: "Varela Round", sans-serif;
}

.card {
  background: $color-one;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  border-radius: 5px;
  margin: 50px 20px 20px 20px;
  width: calc(33.3333% - 40px); /* 1/3 minus the margins (20+20) */
  padding: 20px;
  text-align: center;
  color: white;
  float: left;
  @media (max-width: 768px) {
    margin: 10px 20px;
    width: calc(100% - 40px);
    &:first-child {
      margin-top: 20px;
    }
  }
  &:nth-child(2) {
    margin: 20px 0px;
    width: 33.3333%;
    padding: 50px 20px;
    @media (max-width: 768px) {
      margin: 10px 20px;
      width: calc(100% - 40px);
    }
  }
  .title {
    font-size: 25px;
  }
  .icon {
    margin: 50px 0;
    svg {
      width: 100px;
      height: 100px;
      path {
        fill: $color-four;
      }
    }
  }
  .features {
    ul {
      padding: 0;
      margin: 20px 0 50px 0;
      list-style-type: none;
      li {
        margin: 10px 0;
        font-size: 14px;
        span {
          border-bottom: 2px dotted $color-four;
        }
      }
    }
  }
  .btn {
    display: block;
    background: $color-four;
    color: white;
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 5px;
    box-shadow: rgba(0,0,0,0.9);
    transition: all 200ms ease-in-out;
    text-decoration: none;
    &:hover {
      background: $color-three;
    }
  }
}