/* ======================================
   LAYOUT CONTAINER
====================================== */
.layout-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

.main__content {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}

.layout__region--content {
  display: flex;
  flex-direction: column;
}

/* ======================================
   GRID ROW
====================================== */
.grid-row {
  width: calc(100% - 3rem);
  margin: 0 auto;
  z-index: 5;
}

/* ======================================
   DESKTOP (999px+)
====================================== */
@media all and (min-width: 999px) {
  .grid-row--12 { max-width: 1640px; }
  .grid-row--10 { max-width: 1367px; }
  .grid-row--8  { max-width: 1093px; }
  .grid-row--6  { max-width: 820px;  }
}

/* ======================================
   SECTION BACKGROUNDS
====================================== */
.section-bg--tertiary {
  width: 100vw;
  background: var(--color-tertiary--dark);
  background-size: cover;
}

.bgr--blue {
  background-color: var(--color-tertiary);
}

.bgr--blue > .background {
  position: relative;
  z-index: 0;
}

.bgr--blue > .background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 270px;
  background: var(--color-tertiary);
  z-index: -1;
}