/**
 * @file
 * Section styles
 */

.section {
  overflow-x: clip;
}

.section--primary {
  background-color: var(--color-neutral--5);
}
.section--highlight-1{
  background-color: var(--color-highlight--1);
}
.section--highlight-2{
  background-color: var(--color-highlight--2);
}
.section--secondary {
  background-color: var(--color-highlight--3);
}
.section--highlight-4{
  background-color: var(--color-highlight--4);
}

.section.no-grid .layout--twocol {
  display: block;
}
@media all and (min-width: 900px) {
  .section .layout--twocol .layout__region--second p:first-child {
    margin-top: 0;
  }
}
@media all and (min-width: 1500px) {
  .section.no-grid .layout--twocol {
    display: flex;
    flex-direction: row;
  }
  .section.no-grid .layout--twocol .layout__region--first {
    width: 60%;
    flex-grow: 1;
    margin-left: -20%;
  }
  .section.no-grid .layout--twocol .layout__region--second {
    width: 45%;
    flex-grow: 1;
  }
  .section.no-grid .layout--twocol .layout__region--second p:first-child {
    margin-top: 0;
  }
}