.sq-block--intro {
  padding: 6.4rem 0 0;
}

.sq-intro-section__container {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  position: relative;
}

.sq-intro-section__image-container,
.sq-intro-section__text-container {
  position: relative;
  padding: 0 var(--horizontal-margin);
}

.sq-intro-section__text-container {
  display: flex;
  flex-direction: column-reverse;
}

.sq-intro-section__illustration {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: calc((calc(100vw - var(--gutter) * 2) * .6666666667) - var(--gutter) * .3333333333);
  margin: 2.4rem auto 0;
}

/* .sq-theme-section img zet object-fit:cover en wint op specificiteit (klasse+type)
   van een kale klasse-selector. Daarom hier met de blokklasse ervoor. */
.sq-block--intro .sq-intro-section__illustration-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.sq-intro-section__title,
.sq-intro-section__link,
.sq-intro-section__additional-title,
.sq-intro-section__additional-link {
  color: var(--text-color--accent) !important;
}

/* Het origineel geeft de titel geen bodemmarge; de ruimte komt van de margin-top
   van wat eronder staat. */
.sq-block--intro .sq-intro-section__content-block h1,
.sq-block--intro .sq-intro-section__content-block h2,
.sq-block--intro .sq-intro-section__additional-title {
  margin-bottom: 0;
}

.sq-intro-section__subtitle {
  margin-top: 2.4rem;
  color: var(--text-color--interface);
}

.sq-intro-section__content {
  margin-top: 1.6rem;
}

.sq-intro-section__subtitle + .sq-intro-section__content {
  margin-top: 6.4rem;
}

/* De --large variant draagt geen sq-body meer, dus valt de reset van Bootstrap's
   p { margin-bottom: 1rem } hier weg; zonder deze regel staat de link eronder
   10px te laag. */
.sq-intro-section__text > * {
  margin-bottom: 0;
}

.sq-intro-section__text > * + * {
  margin-top: 3.2rem;
}

/* text_style = 'large' krijgt in het origineel de headingH3-schaal, niet bodyLarge.
   Zie blocks/nestable/intro-section: .text.isLarge * { @include mixins.headingH3; } */
.sq-intro-section__text--large,
.sq-intro-section__text--large * {
  font-family: var(--font-macan);
  font-weight: 500;
  letter-spacing: -0.05em;
  font-size: 2.8rem;
  line-height: 125%;
}

/* In het origineel komt deze kleur uit inline spans in de inhoud, die bij de
   import verloren zijn gegaan. De twee varianten van het sjabloon vallen precies
   samen met die scheiding: `large` is de homepage-intro, de gewone variant zijn de
   productpagina's. */
.sq-block--intro.sq-theme-light .sq-intro-section__text,
.sq-block--intro.themeDefault .sq-intro-section__text {
  color: var(--text-color);
}

.sq-block--intro.sq-theme-light .sq-intro-section__text--large,
.sq-block--intro.themeDefault .sq-intro-section__text--large {
  color: var(--color-grey--3);
}

@media only screen and (min-width: 600px) {
  .sq-intro-section__text--large,
  .sq-intro-section__text--large * {
    font-size: 3.2rem;
  }
}

@media only screen and (min-width: 1400px) {
  .sq-intro-section__text--large,
  .sq-intro-section__text--large * {
    font-size: 4rem;
  }
}

@media only screen and (min-width: 1792px) {
  .sq-intro-section__text--large,
  .sq-intro-section__text--large * {
    font-size: max(4rem, min(-3.4666666667rem + 4.1666666667vw, 7.2rem));
  }
}

.sq-intro-section__link {
  margin-top: 2.4rem;
}

.sq-intro-section__image-container {
  padding-bottom: 4.8rem;
}

.sq-intro-section__image-container[class*='--overlap-']::before {
  content: '';
  position: absolute;
  height: 50%;
  right: 0;
  bottom: 0;
  left: 0;
}

.sq-intro-section__image-container--overlap-dark::before {
  background: var(--color-purple--4);
}

.sq-intro-section__image-container--overlap-light::before {
  background: var(--color-grey--1);
}

.sq-intro-section__image-container--overlap-purple::before {
  background: var(--color-purple--2);
}

.sq-intro-section__parallax-image {
  position: relative;
  overflow: hidden;
  border-radius: 4.8rem 0 0;
}

.sq-intro-section__figure {
  position: relative;
}

.sq-intro-section__image {
  width: 100%;
  height: auto;
  position: relative;
}

.sq-intro-section__additional-content {
  position: relative;
  padding: 2.4rem var(--horizontal-margin) 6.4rem;
}

.sq-intro-section__additional-content::after {
  content: '';
  position: absolute;
  inset: 0 var(--horizontal-margin);
  border-bottom: .1rem solid var(--border-color);
}

.sq-intro-section__additional-subtitle,
.sq-intro-section__additional-link {
  margin-top: 2.4rem;
}

.sq-intro-section__additional-subtitle p {
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -.02em;
  font-variant-ligatures: none;
  font-feature-settings: "ss03" on, "liga" off, none;
  letter-spacing: -.03em;
  font-size: max(2.2rem,min(2.05rem + .25vw,2.4rem));
  line-height: 150%;
}


@media only screen and (max-width: 999px) {
  .sq-intro-section__container.has-additional-content .sq-intro-section__image-container {
    padding-bottom: 0;
  }
}

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

  .sq-intro-section__container {
    max-width: none;
    min-width: var(--window-width);
    height: 100%;
    flex-flow: row nowrap;
    gap: var(--gutter);
    padding-right: 0;
  }

  /* Alleen de paneelbreedte hangt aan de scrollrichting; de rest van de
     desktoplayout houdt het origineel ook op een verticale pagina aan. Het
     origineel heeft hier geen `width: max-content` nodig omdat de track de breedte
     levert, maar `overflow-x: clip` op .sq-block maakt de min-content-bijdrage
     nul — vandaar deze expliciete breedte, en alleen binnen de track. */
  body.scroll_horizontal .sq-block--intro,
  body.scroll_horizontal .sq-intro-section__container {
    width: max-content;
  }

  .sq-intro-section__image-container,
  .sq-intro-section__text-container {
    padding: var(--header-height) 0;
  }

  .sq-intro-section__image-container {
    flex: 0 0 auto;
    width: max-content;
    min-width: max-content;
  }

  .sq-intro-section__text-container {
    display: block;
    width: calc((calc(100vw - var(--gutter) * 2) * .75) - var(--gutter) * .25);
    flex-shrink: 0;
  }

  .sq-intro-section__content-block {
    padding-top: 8rem;
  }

  .sq-intro-section__subtitle {
    max-width: calc((calc(100vw - var(--gutter) * 2) * .5) - var(--gutter) * .5);
    margin-top: 4rem;
  }

  .sq-intro-section__content {
    max-width: calc((calc(100vw - var(--gutter) * 2) * .5) - var(--gutter) * .5);
    margin-top: 4rem;
    margin-left: auto;
  }

  .sq-intro-section__subtitle + .sq-intro-section__content {
    margin-top: 3.2rem;
  }

  .sq-intro-section__illustration {
    position: absolute;
    bottom: calc(var(--header-height) / 2);
    left: 0;
    max-width: 24rem;
    margin: 0;
  }

  .sq-intro-section__image-container {
    padding-bottom: var(--header-height);
  }

  .sq-intro-section__image-container[class*='--overlap-']::before {
    inset: 0 0 0 auto;
    width: calc(50% - var(--horizontal-margin) * 1.25);
    height: auto;
  }

  .sq-intro-section__parallax-image,
  .sq-intro-section__figure {
    height: 100%;
    width: max-content;
  }

  .sq-intro-section__parallax-image {
    border-radius: 7.2rem 0 0;
  }

  .sq-intro-section__image {
    width: auto;
    height: 100%;
    display: block;
    max-width: none;
  }

  .sq-intro-section__image img {
    width: auto;
    height: 100%;
    max-width: none;
  }

  .sq-intro-section__image img {
    object-fit: cover;
    object-position: center center; 
  }
  

  /* Geen flex-shrink: 0 — het origineel laat dit paneel krimpen, zodat het op een
     verticale pagina inklapt in plaats van de sectie op te rekken. */
  .sq-intro-section__additional-content {
      width: calc((calc(100vw - var(--gutter) * 2) * .5) - var(--gutter) * .5);
      padding: var(--header-height) var(--horizontal-margin) 0 0;
  }

  .sq-intro-section__additional-content::after {
    display: none;
  }

  .sq-intro-section__additional-title {
    max-width: calc((calc(100vw - var(--gutter) * 2) * .4166666667) - var(--gutter) * .5833333333);
    margin-top: 4.8rem;
  }

  .sq-intro-section__additional-subtitle {
    margin-top: 3.2rem;
  }
}

@media only screen and (min-width: 1400px) {
  .sq-intro-section__content {
    margin-top: 4.8rem;
  }

  .sq-intro-section__illustration {
    max-width: 32rem;
  }

  .sq-intro-section__image-container[class*='--overlap-']::before {
    width: calc(50% - var(--horizontal-margin) / 2);
  }
}

@media only screen and (min-width: 1536px) {
  .sq-intro-section__image-container[class*='--overlap-']::before {
    width: calc(50% - var(--horizontal-margin));
  }
}

@media only screen and (min-width: 1792px) {
  .sq-intro-section__illustration {
    max-width: 43.2rem;
  }

  .sq-intro-section__additional-subtitle p {
    font-size: max(2.4rem, min(-2.2666666667rem + 2.6041666667vw, 4.4rem));
  }
}

@media only screen and (min-width: 2560px) {
  .sq-intro-section__illustration {
    max-width: 54.4rem;
  }

  .sq-intro-section__image-container[class*='--overlap-']::before {
    width: calc(50% - var(--horizontal-margin) * 1.5);
  }
}