@if ($use_masonry==1 and $separate_containers ==1) {
  // Fallback until masonry is triggred

  @media only screen and (min-width: $mobile_portrait_width) {

    #articles :not(.masonry-brick).entry {
      margin-right: 20px
    }

    #articles :not(.masonry-brick).entry:nth-child( #{$masonry_column_count}n+1 ) {
      margin-right: 0
    }

    .post-thumbnail {
      margin: 0 -20px 10px
    }
  }

  #articles .entry-title {
    font-size: 1.3em
  }

  .post-thumbnail img {
    width: 100%;
    margin-bottom: 10px;
    height: auto; //Added to fix the issue with stretching
  }
  .more-link {
    text-align: center;
    span {
      display: none
    }
    .he-btn {
      background: hsla(hue($primary), 50, 99, 1);
      border: solid 2px hsla(hue($primary), 50, 90, 1);
      color: hsla(hue($primary), 50, 80, 1);
      padding: .3em 1em!important;
      @include border-radius(20px)
    }
  }
  #articles article {
    float: left;
    box-sizing: border-box;
  }

  @media only screen and (min-width: $mobile_width) {

    //$gutter: ($padding*.5)/($site_width - $padding)*$main_width;

    $site_width_inner: $site_width - $padding;
    $gutter: (($padding/2) / ($site_width_inner*$main_width/100))*100;

    $article_width: (100 - ($masonry_column_count - 1)*$gutter)/$masonry_column_count;

    #articles article {
      width: $article_width*1%;
      margin: 0 0 $padding/2;
    }
    .gutter-sizer {
      width: $gutter*1%
    }
  }

  @media only screen and (min-width: $mobile_portrait_width) and (max-width: $mobile_width) {

    $gutter: ($padding/2px)/(768-40)*100;
    $masonry_column_count: 2;
    $article_width: (100 - ($masonry_column_count - 1)*$gutter)/$masonry_column_count;

    #articles article {
      width: $article_width * 1%;
      margin: 0 0 $padding/2;
    }
    .gutter-sizer {
      width: $gutter*1%
    }

  }
}
