elyseholladay
9/9/2015 - 4:55 PM

Generated by SassMeister.com.

Generated by SassMeister.com.

<div class="merchant-header">

    <div class="merchant-logo">
      <img src="http://o.rmncdn.com/thumbs/logos/l/target.com-coupons.jpg">
      <!--<img src="http://s3.amazonaws.com/wsm-cdn-rmn-int/thumbs/logos/l/journeys.com-coupons.jpg">-->
      <!--<img src="http://s3.amazonaws.com/wsm-cdn-rmn-int/thumbs/logos/l/footaction.com-coupons.jpg">-->
      <!--<img src="http://o.rmncdn.com/thumbs/logos/l/gapoutlet.com-coupons.jpg">-->
    </div>

    <div class="merchant-info">
      <h1 class="h1">
        <span class="merchant-name">Target</span>
        <span class="merchant-tagline">Coupon Codes and Sales</span>
      </h1>

      <div class="favorite favorite-merchant">
        {{>design_standards/_helpers/icon "icon-heart"}}
        <a href="#" class="favorite-link">Favorite</a>
      </div>

    </div>
</div>
.merchant-logo {
  background-color: transparent;
  border: 1px solid #ddd;
  border-radius: 3px;
  display: inline-block;
  height: 75px;
  line-height: 75px;
  overflow: hidden;
  text-align: center;
  width: 75px;
  padding: 5px;
  display: block;
  margin-right: 20px;
  float: left; }
  .merchant-logo img {
    max-height: 70px;
    max-width: 70px;
    vertical-align: middle; }

img, video, audio {
  max-width: 100%;
  height: auto; }

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit; }
// ----
// libsass (v3.2.5)
// ----


@mixin square-image($img-size, $background: transparent, $padding: 0, $border-width: 0, $border-color: #ddd, $border-radius: 0) {

    background-color: $background;
    border: $border-width solid $border-color;
    border-radius: $border-radius;
    display: inline-block;
    height: $img-size;
    line-height: $img-size;
    overflow: hidden;
    text-align: center;
    width: $img-size;
    padding: $padding;

    img {
      @if $padding > 0 {
        max-height: ($img-size - 5px);
        max-width: ($img-size - 5px);
      }
      @else {
        max-height: $img-size;
        max-width: $img-size;
      }
      vertical-align: middle;
    }
}



.merchant-logo {
  @include square-image(75px, transparent, 5px, 1px, #ddd, 3px);
  display: block;
  margin-right: 20px;
  float: left;
}

img, video, audio {
    max-width: 100%;
    height: auto;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
<div class="merchant-header">

    <div class="merchant-logo">
      <img src="http://o.rmncdn.com/thumbs/logos/l/target.com-coupons.jpg">
      <!--<img src="http://s3.amazonaws.com/wsm-cdn-rmn-int/thumbs/logos/l/journeys.com-coupons.jpg">-->
      <!--<img src="http://s3.amazonaws.com/wsm-cdn-rmn-int/thumbs/logos/l/footaction.com-coupons.jpg">-->
      <!--<img src="http://o.rmncdn.com/thumbs/logos/l/gapoutlet.com-coupons.jpg">-->
    </div>

    <div class="merchant-info">
      <h1 class="h1">
        <span class="merchant-name">Target</span>
        <span class="merchant-tagline">Coupon Codes and Sales</span>
      </h1>

      <div class="favorite favorite-merchant">
        {{>design_standards/_helpers/icon "icon-heart"}}
        <a href="#" class="favorite-link">Favorite</a>
      </div>

    </div>
</div>