/*
 * @file
 * Provides the layout styles for four-column layout section.
 */

.layout--fourcol-section .layout-wrapper {
  display: flex;
}

.layout--fourcol-section .layout-wrapper > .layout__region {
  flex: 0 1 100%;
  .content-wrap {
    @apply gap-y-[5.5rem]
  }
}

.layout--fourcol-section #odd-content,
.layout--fourcol-section article.odd{
  height: auto;
}

body .layout--fourcol-section.layout > .layout-wrapper > .layout__region .content-wrap {
  grid-row-gap: 2rem;
  row-gap: 2rem;
}
@media screen and (min-width: 40em) {
  .layout--fourcol-section .layout-wrapper > .layout__region {
    flex: 0 1 25%;
  }
  body .layout--fourcol-section.layout > .layout-wrapper > .layout__region .content-wrap {
    grid-row-gap: 2rem;
    row-gap: 4rem;
  }
}