/* LAYOUT GRID */

.grid {
  --gap: var(--gutter);
  --column-gap: var(--gap);
  --row-gap: var(--gap);
  display: -ms-grid;
  display: grid;
  grid-gap: var(--column-gap) var(--row-gap);
  gap: var(--column-gap) var(--row-gap);
  grid-template-columns: 1fr;
  position: relative;
  width: 100%;
}

.grid > * {
  margin-bottom: var(--gap);
  display: flex;
  flex-direction: column;
  justify-content: var(--justify-content, flex-start);
  align-items: var(--align-items, baseline);
}

.grid-center {
  display: -ms-grid;
  display: grid;
  place-items: center;
  position: relative;
}

@media (min-width: 35rem) { /* >= 560px */

  .grid {
    -ms-grid-columns: repeat(6, 1fr);
    grid-template-columns: repeat(6, 1fr);
  }

  .grid > * {
    -ms-grid-column: span 6;
    grid-column: span 6;
  }

  .grid > *[style*="--columns:3"] {
    -ms-grid-column: span 3;
    grid-column: span 3;
  }

}

@media (min-width: 67.5rem) { /* >= 1080px */

  .grid {
    -ms-grid-columns: repeat(12, 1fr);
     grid-template-columns: repeat(12, 1fr);
  }

  .grid > * {
    -ms-grid-column: span var(--columns);
    grid-column: span var(--columns);
  }

}