/* Zelfde maatvoering als two_column_section; zie de toelichting daar. Die CSS
   laadt alleen mee als dat blok ook op de pagina staat, dus staan de regels
   die dit blok nodig heeft hier. */
.sq-generic-content__layout {
  --bs-gutter-y: 6.4rem;
}

.sq-generic-content__title {
  color: var(--text-color--accent);
}

/* Als h1 houdt de titel de marge van de h2-variant. */
h1.sq-generic-content__title {
  margin-bottom: 1rem;
}

.sq-generic-content__title-reveal {
  overflow: hidden;
}

.sq-generic-content__intro,
.sq-generic-content__body {
  color: var(--text-color--support);
}

@media only screen and (max-width: 999px) {
  .sq-generic-content__left,
  .sq-generic-content__right {
    width: 100%;
  }
}

@media only screen and (min-width: 1000px) {
  .sq-block--generic-content {
    min-height: var(--window-height);
    padding: 0;
  }

  .sq-generic-content__layout {
    min-height: var(--window-height);
    align-items: stretch;
    gap: var(--gutter);
    margin: 0;
  }

  .sq-generic-content__layout > .sq-generic-content__left,
  .sq-generic-content__layout > .sq-generic-content__right {
    width: calc((100% - var(--gutter)) / 2);
    padding: var(--header-height) 0;
    margin-top: 0;
  }

  /* Meelopende titel op een verticale pagina, zoals in two_column_section. De
     intro loopt mee met de titel, anders schuift hij eronder. */
  :where(body.scroll_vertical) .sq-generic-content__left-content {
    position: sticky;
    top: 4rem;
  }
}