<div class="recipe-card">

  <aside>

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/oatmeal.jpg" alt="Chai Oatmeal" />

    <a href="#" class="button"><span class="icon icon-play"></span></a>

  </aside>

  <article>

    <h2>Chai Oatmeal</h2>
    <h3>Breakfast</h3>

    <ul>
      <li><span class="icon icon-users"></span><span>1</span></li>
      <li><span class="icon icon-clock"></span><span>15 min</span></li>
      <li><span class="icon icon-level"></span><span>Beginner level</span></li>
      <li><span class="icon icon-calories"></span><span>248</span></li>
    </ul>

    <p>For an extra thick and creamy bowl, add oat bran.  It'll make for a hearty helping and also add more fiber to your meal.  If you love the taste of chai, you'll enjoy this spiced version with coriander, cinnamon, and turmeric.</p>

    <p class="ingredients"><span>Ingredients:&nbsp;</span>Milk, salt, coriander, cardamom, cinnamon, turmeric, honey, vanilla extract, regular oats, oat bran.</p>

  </article>

</div>

@import "bourbon";

* {
  @include box-sizing(border-box);
}

html {
  height: 100%;
}

body {
  @include linear-gradient(-45deg, #19d3d1 5%, #57abf2, $fallback: #57abf2);
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.recipe-card {
  background: #fff;
  margin: 4em auto;
  width: 90%;
  max-width: 496px;
  @include border-top-radius(5px);
  @include border-bottom-radius(5px);

  aside {
    position: relative;

    img {
      @include border-top-radius(5px);
    }

    .button {
      background: #57abf2;
      display: inline-block;
      position: absolute;
      top: 80%;
      right: 3%;
      width: em(65);
      height: em(65);
      border-radius: em(65);
      line-height: em(65);
      text-align: center;

      .icon {
        vertical-align: middle;
      }
    }
  }

  article {
    padding: 1.25em 1.5em;

    ul {
      list-style: none;
      margin: 0.5em 0 0;
      padding: 0;
      li {
        display: inline-block;
        margin-left: 1em;
        line-height: 1em;
        &:first-child {
          margin-left: 0;
        }

        .icon {
            vertical-align: bottom;
        }

        span:nth-of-type(2) {
          margin-left: 0.5em;
          font-size: 0.8em;
          font-weight: 300;
          vertical-align: middle;
          color: #838689;
        }
      }
    }

    h2, h3 {
      margin: 0;
      font-weight: 300;
    }

    h2 {
      font-size: em(28);
      color: #222222;
    }

    h3 {
      font-size: em(15);
      color: #838689;
    }

    p {
      margin: 1.25em 0;
      font-size: em(13);
      font-weight: 400;
      color: #222222;

      span {
        font-weight: 700;
        color: #000000;
      }
    }

    .ingredients {
      margin: 2em 0 0.5em;
    }
  }

  .icon {
      display: inline;
      display: inline-block;
      background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg);
      background-repeat: no-repeat;
  }

  .icon-calories,.icon-calories\:regular {
      background-position: 0 0;
      width: 16px;
      height: 19px;
  }

  .icon-clock,.icon-clock\:regular {
      background-position: 0 -19px;
      width: 20px;
      height: 20px;
  }

  .icon-level,.icon-level\:regular {
      background-position: 0 -39px;
      width: 16px;
      height: 19px;
  }

  .icon-play,.icon-play\:regular {
      background-position: 0 -58px;
      width: 21px;
      height: 26px;
  }

  .icon-users,.icon-users\:regular {
      background-position: 0 -84px;
      width: 18px;
      height: 18px;
  }
}