%content-stream-node

border-bottom: 1px solid $border-tertiary
padding-bottom: 1em
margin-bottom: 1em
margin-right: 1em

%content-stream-image-max

+image-pane
  @extend %img-left
  width: 100%
.field--type-image,
.field--type-image a,
img
  width: 100%
  vertical-align: top //remove unnecessary spacing at the bottom of it's container
// target everyting except the taxonomy term tag

.panel-pane,
.embedded_photo
  float: left
  margin-bottom: 0
  h2
    margin-bottom: 1px

// these are in the variables partial: // $content-stream-img-sm: 50% // $content-stream-img-md: 58% %content-stream-image-sm

@extend %content-stream-image-max
+teaser-items
  width: 40%
  width: calc(100% - #{$content-stream-img-sm} - 20px)
  float: left
+image-pane
  @extend %img-left
  max-width: #{$content-stream-img-sm}

%content-stream-image-md

@extend %content-stream-image-max
+breakpoint($smartphone-landscape)
  +teaser-items
    width: 40%
    width: calc(100% - #{$content-stream-img-md} - 20px)
    float: left
  +image-pane
    max-width: #{$content-stream-img-md}

%content-stream-image-lg

+image-pane
  width: 100%
  max-width: 100%
  .field--type-image,
  .field--type-image a,
  img
    width: 100%
h2
  margin-bottom: 1px

%float-thumb-left

+clearfix
@extend %content-stream-image-sm

%full-size-thumb

+image-pane
  +img-no-float
  max-width: 100%
  width: 100%

%no-float-thumb

@extend %full-size-thumb
.pane-node-title,
.pane-node-body
  width: 100%
  max-width: 100%
  float: none
  margin-bottom: 0

%content-stream-basic

.views-row
  float: left
  width: 100%
  max-width: 100%

@mixin content-stream-1

@extend %content-stream-basic
.views-row
  margin-top: 10px
.views-row~.views-row
  @extend %view_row

%layout-2

+grid-desktop
+fluid-grid(2, $padding: 1%)

%layout-3

+grid-desktop
+fluid-grid(3, $padding: 1.4%)

%layout-4

+grid-desktop
+fluid-grid(4, $padding: 1%)

%layout-5

+grid-desktop
+fluid-grid(5, $padding: 1%)

%layout-6

+grid-desktop
+fluid-grid(6, $padding: 1%)

%layout-7

+grid-desktop
+fluid-grid(7, $padding: 1%)

%layout-8

+grid-desktop
+fluid-grid(8, $padding: 1%)

%layout-1-3

.views-row
  @extend %no-float-thumb

.views-row-1
  float: left
  width: 100% !important
  max-width: 100%
  margin-bottom: 0.5em
  @extend %no-float-thumb
  +fallback
    img
      @extend %lg-thumbnail

.views-row-2,
.views-row-3,
.views-row-4
  width: 32%
  float: left
  clear: none
  .pane-node-title,
  .pane-node-created,
  .pane-node-posted-on
    display: none
  .field--name-field-cover-photo:after
    display: none
  +image-pane
    img
      width: 100% !important
      +fallback
        @extend %xxs-thumbnail

  .field--type-image
    width: 100%
    max-width: 100%
    #page &
      img
        width: 100%

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

@mixin content-stream-1-3

@extend %layout-1-3

@mixin content-stream-3

.views-row
  //@extend %float-thumb-left
  @extend %content-stream-basic

@include pane-eq-md-up
  @extend %layout-3

+fallback
  @extend %layout-3

@mixin content-stream-3-parent

.views-row
  //@extend %float-thumb-left
  @extend %content-stream-basic
@include pane-parent-eq-md-up
  @extend %layout-3
+fallback
  @extend %layout-3

@mixin content-stream-4

.views-row
  //@extend %float-thumb-left
  @extend %content-stream-basic

&[data-eq-state="pane-sm"]
  @extend %layout-2

@include pane-eq-md-up
  @extend %layout-4
+fallback
  //@extend %layout-4

@mixin content-stream-4-parent

.views-row
  //@extend %float-thumb-left
  @extend %content-stream-basic

[data-eq-state="pane-sm"] &
  @extend %layout-2

@include pane-parent-eq-md-up
  @extend %layout-4

+fallback
  @extend %layout-4

@mixin content-stream-6

+grid-desktop
+breakpoint($max-tab-p)
  +fluid-grid(2, $padding: 1%)
+breakpoint($tab-p-desk)
  +fluid-grid(3, $padding: 1%)
+breakpoint($desktop)
  +fluid-grid(6, $padding: 1%)

@mixin content-stream-6-custom

+grid-desktop
+breakpoint($max-tab-p)
  +fluid-grid(2, $padding: 1%)
+breakpoint($tab-p-desk)
  +fluid-grid(2, $padding: 1%)
  .views-row-5, .views-row-6 //Show only 4 items
    display: none
  .views-row-4
    margin-left: 0
+breakpoint($desktop)
  +fluid-grid(6, $padding: 1%)

@mixin content-stream-5

+grid-desktop
+breakpoint($max-tab-p)
  +fluid-grid(2, $padding: 1%)
+breakpoint($tab-p-desk)
  +fluid-grid(3, $padding: 1%)
+breakpoint($desktop)
  +fluid-grid(5, $padding: 1%)

@mixin content-stream-7

[data-eq-state="pane-xl"]
  @extend %layout-7
[data-eq-state="pane-lg"]
  @extend %layout-6
[data-eq-state="pane-md"]
  @extend %layout-4
+pane-container-eq-sm-down
  @extend %layout-2

@mixin content-stream-8

[data-eq-state="pane-xl"]
  @extend %layout-8
[data-eq-state="pane-lg"]
  @extend %layout-6
[data-eq-state="pane-md"]
  @extend %layout-4
+pane-container-eq-sm-down
  @extend %layout-2

%latest-content-list-pane

.more-link
  display: inline-block
.feed
  position: absolute
  left: 10px
  bottom: 0px
  a
    font-size: 0