header {
  width: 100%;
  top: 0;
}

.page-container {
  margin-top: var(--main-content-top-margin);
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-background);
  padding-bottom: 4rem;
}
.page-container .content-section {
  width: 100vw;
  display: flex;
  flex-direction: column;
  padding: 2rem var(--edge-margin);
  align-items: center;
}
.page-container .page-title {
  margin-bottom: 0.5rem;
}

.content-container {
  width: 100%;
  max-width: var(--max-width);
}
.content-container > * {
  max-width: 100%;
}
.content-container h3,
.content-container figure,
.content-container ul,
.content-container ol,
.content-container .content-block {
  margin: 1rem 0;
}
.content-container h4,
.content-container h5,
.content-container h6 {
  margin: 0.5rem 0;
}
.content-container p {
  margin: 1.125rem 0;
}
.content-container .page-title {
  margin-bottom: 0.75rem;
}

.read-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}
.read-container .block,
.read-container > * {
  width: 100%;
  max-width: var(--max-width-small);
}
.read-container p {
  hyphens: auto;
  hyphenate-limit-chars: 4 4;
  hyphenate-limit-lines: 1;
}

.featured-section {
  background-color: var(--color-background-accent);
  gap: var(--grid-gap);
  color: var(--color-text-inverted);
  margin: 1rem 0;
}
.featured-section.featured-section-secondary {
  background-color: var(--color-background-secondary);
  color: var(--color-text-subtle);
}
.featured-section .featured-section-headline {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 2rem;
}
.featured-section .featured-section-headline::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
  margin-top: 0.5rem;
}

@media screen and (min-width: 75rem) {
  .column.auto-column .block-type-text {
    column-count: 2;
    column-gap: var(--grid-gap);
    widows: 3;
  }
  .column.auto-column .block-type-text p:first-child {
    margin-top: 0;
  }
}
@media screen and (max-width: 40rem) {
  .column {
    min-width: 18rem;
  }
  .page-container .content-section {
    padding: 2rem var(--edge-margin);
  }
  .page-container .intro-section {
    padding-bottom: 2rem;
  }
}
.intro-seperator, .content-seperator {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

/*# sourceMappingURL=layout.css.map */