// MOBILE FIRST FEATURED LAYOUTS: note.io/1xyZPLu

%featured-4

.node-featured 
  float: left
  width: 100%

+breakpoint($phone-l-tab-p)
  .node-featured 
    float: left
    width: 49%
    .pane-node-field-image
      +img-left
      max-width: 50%
  .views-row-2,
  .views-row-4
    .node-featured  
      margin-left: 1%
  .views-row-3
    .node-featured  
      clear: left

+breakpoint($tablet-portrait)
  .node-featured 
    float: left
    width: 24%
  .views-row-2,
  .views-row-3,
  .views-row-4
    .node-featured  
      clear: none
      margin-left: 1%

%featured-3

.node-featured 
  float: left
  width: 100%

+breakpoint($phone-l-tab-p)
  .node-featured 
    width: 32%
    .pane-node-field-image
      +img-left
      max-width: 50%
  .views-row-2,
  .views-row-3
    .node-featured  
      margin-left: 1%

%featured-1-3

.node-featured .pane-node-field-image
  max-width: 100%
  width: 100%
  +img-no-float
.field--name-field-image
  text-align: center
.views-row-1 
  .node-featured
    width: 100%
    margin-bottom: 0.5em

.views-row-2,
.views-row-3,
.views-row-4
  .node-featured
    width: 32%
    float: left
  .pane-node-title, 
  .pane-node-created
    display: none

.views-row-2 .node-featured  
  margin-left: 0
.views-row-3 .node-featured  
  margin-left: 2%
  clear: none
.views-row-4 .node-featured  
  margin-left: 2%