.layout {
  margin-inline: auto
}

@media (min-width:960px) {
  .layout {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    gap: 1.5rem;
    /* padding-inline: var(--grid-gap) */
  }
}


.layout__region {
  display: flex;
  flex-direction: column;
  grid-column: span 12;
  gap: 3rem;
  /* padding-b: 3rem; */

}

.layout-container {
  padding-top: 3rem;
  position: relative;
}

.layout__region>div {
  width: 100%;
  /* padding-bottom: 3rem; */
}

.layout__region>.centered {
  padding-inline: 0
}

@media (min-width:960px) {
  .layout__region {
    /* margin-bottom: 0 !important */
  }
}

@media (min-width:960px) {
  .layout__region--span-1 {
    grid-column: span 1
  }

  .layout__region--span-2 {
    grid-column: span 2
  }

  .layout__region--span-3 {
    grid-column: span 3
  }

  .layout__region--span-4 {
    grid-column: span 4
  }

  .layout__region--span-5 {
    grid-column: span 5
  }

  .layout__region--span-6 {
    grid-column: span 6
  }

  .layout__region--span-7 {
    grid-column: span 7
  }

  .layout__region--span-8 {
    grid-column: span 8
  }

  .layout__region--span-9 {
    grid-column: span 9
  }

  .layout__region--span-10 {
    grid-column: span 10
  }

  .layout__region--span-11 {
    grid-column: span 11
  }

  .layout__region--span-12 {
    grid-column: span 12
  }
}

.layout--bg-color>.layout {
  background-color: var(--color-bg);
  padding: 0 1rem;
  /* margin-bottom: 3rem; */
  border-radius: .25rem;
  margin-top: -3rem;
}

.layout--bg-color .layout__region {
  padding: 2rem 1rem;
}
.layout--bg-color .layout__region > div {
  /* padding-bottom: 3rem; */
  margin-bottom: 0;
}

.layout--bg-color {
  padding-top: 0;
}

.layout--bg-white {
  --color-bg: var(--color-white)
}

.layout--bg-grey {

  --color-bg: var(--color-grey-light-aaa);
}

.layout--bg-blue {

  --color-bg: var(--color-primary-d);
}

.layout--bg-green {
  --color-bg: var(--color-secondary-f)
}

.layout--bg-purple {
  --color-bg: var(--color-tertiary-c);
}

.layout--bg-navy {
  --color-bg: var(--color-primary-b);
}


/* mobile */
@media screen and (max-width: 959px) {
  .layout--bg-color>.layout {
    background-color: transparent;
    margin-top: 3rem;
    padding-inline: 0;
  }

  .layout--bg-color .layout__region--first {
    background-color: var(--color-bg);
    border-radius: .25rem;
  }

  .layout--bg-color .layout__region--second {
    background-color: var(--full-bg);
    padding-inline: 0;

  }
  .layout--bg-color .layout__region--second > div:last-child {
    margin-bottom: 0;
  }
}