/**
 * @file
 * Default layout implementation for the microview row type
 */
.rw-paragraph--microview {
  margin: 30px 0;
  margin: var(--rw-gutter, 30px) 0;
  box-sizing: border-box;
}
.rw-paragraph--microview .node--view-mode-banner,
.rw-paragraph--microview .node--view-mode-slide {
  padding: var(--rw-gutter, 30px);
  box-sizing: border-box;
}
.rw-paragraph--microview .node {
  box-sizing: border-box; /* AE: This will probably end up !important */
}

/* --== HORIZONTAL SETUP ==-- */
.rw-paragraph--microview--full {
  position: relative;
  z-index: 1;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 0 var(--rw-gutter);
}
.rw-paragraph--microview--wide {
  position: relative;
  z-index: 1;
}

@media only screen
and (min-width : 1440px) {
  .rw-paragraph--microview--wide {
    margin: var(--rw-gutter) -72px;
    margin-left: calc(-1 * var(--rw-pull-size));
    margin-right: calc(-1 * var(--rw-pull-size));
  }
}

/* --== COLUMN ==-- */
/* AE: This should already be styled to fit in a non-formatted column */
.rw-paragraph--microview--col {
  display: block;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  margin-left: -15px;
  margin-left: calc(var(--rw-gutter, 30px) / 2);
  margin-right: -15px;
  margin-right: calc(var(--rw-gutter, 30px) / 2);
}
.rw-paragraph--microview--col .node {
  /* float: left;
  max-width: 100%;
  width: 100%;
  margin: 0 0 var(--rw-gutter, 30px) 0; */
  flex-grow: 1;
  width: 100%;
  height: auto;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  margin-bottom: 30px;
  margin-bottom: var(--rw-gutter, 30px);
}

/* --== ROW ==-- */
.rw-paragraph--microview--row {
  display: block;
  display: var(--rw-display--flex, block);
  justify-content: space-between;
}
.rw-paragraph--microview--row .node {
  display: block;
  float: left;
  margin-right: var(--rw-gutter, 30px);
}
.rw-paragraph--microview--row .node:last-child {
  margin-right: 0;
}
.rw-paragraph--microview--row--1 .node {
  width: 100%;
}
.rw-paragraph--microview--row--2 .node {
  --rw-width-minus-gutter: calc((100% - (1 * 30px))/2);
  max-width: var(--rw-width-minus-gutter, 48%)
}
.rw-paragraph--microview--row--3 .node {
  --rw-width-minus-gutter: calc((100% - (2 * 30px))/3);
  max-width: var(--rw-width-minus-gutter, 32%);
}
.rw-paragraph--microview--row--4 .node {
  --rw-width-minus-gutter: calc((100% - (3 * 30px))/4);
  max-width: var(--rw-width-minus-gutter, 23%);
}
.rw-paragraph--microview--row--5 .node {
  --rw-width-minus-gutter: calc((100% - (4 * 30px))/5);
  max-width: var(--rw-width-minus-gutter, 20%);
}
.rw-paragraph--microview--row--6 .node {
  --rw-width-minus-gutter: calc((100% - (5 * 30px))/6);
  max-width: var(--rw-width-minus-gutter, 15%);
}

/* --== GRID ==-- */
.rw-paragraph--microview--grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: var(--rw-gutter, 30px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  grid-gap: var(--rw-gutter, 30px);
}

@media only screen and (max-width: 479px) {
  .rw-paragraph--microview--grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

.rw-paragraph--microview--grid .node {
  height: auto;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(33.333333% - 20px);   
  min-width: auto;  
}

.rw-paragraph--microview--grid .node:nth-child(n+4) {
  margin-top: 30px;
}

@supports(display: grid) {
  .rw-paragraph--microview--grid .node:nth-child(n+4) {
    margin-top: 0;
  }
}

/* @supports not (display: grid) {
  .rw-paragraph--microview--grid {
    margin-left: -15px;
    margin-right: -15px;
  }
  .rw-paragraph--microview--grid .node {
    max-width: 100%;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px;
    margin-bottom: var(--rw-gutter, 30px);
  }
} */

/* --== MASONRY ==-- */
.rw-paragraph--microview--mason { /* Masonry container */
  -moz-column-width: 16em;
  -webkit-column-width: 16em;
  column-width: 16em;
  -moz-column-gap: var(--rw-gutter, 30px);
  -webkit-column-gap: var(--rw-gutter, 30px);
  column-gap: var(--rw-gutter, 30px);
  margin-left: calc(-1 * var(--rw-gutter));
}
.rw-paragraph--microview--mason .node { /* Masonry bricks or child elements */
  display: inline-block;
  margin:  calc(var(--rw-gutter) / 2);
  padding:  calc(var(--rw-gutter) / 2);
  width:  100%;
}