:root {
  --gs-side: max(5vw, calc((100vw - 1440px) / 2));
  --gs-content-width: calc(100% - 2 * var(--gs-side));
}

#b1 .hero-copy {
  left: var(--gs-side);
}
#b1 .hero-bottom {
  left: var(--gs-side);
  right: var(--gs-side);
}

#b2 .fraction-heading,
#ghent .section-heading,
#technische-gegevens .section-heading {
  text-align: left;
}
@media (min-width: 1024px) {
  #ghent .project-swap-gallery {
    --gallery-scale: var(--screen-scale, 1);
    position: relative;
    /* Center the gallery in the viewport while the scaled heading stays aligned left. */
    inset-inline-start: calc((1 - var(--gallery-scale)) * (50vw - var(--gs-side)) / var(--gallery-scale));
  }
}

body > #b4.site-block > section.stortkost,
body > #b7.site-block .case {
  box-sizing: border-box;
  width: var(--gs-content-width);
  max-width: none;
  padding-inline: 0;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  body > .site-block:not(#b1, #b2) .screen-stage {
    left: var(--gs-side);
    width: var(--gs-content-width);
    transform: translateY(-50%) scale(var(--screen-scale, 1));
    transform-origin: left center;
  }
  body > #b6.site-block .screen-stage {
    transform: translateY(-50%) scale(var(--screen-scale, 1)) !important;
    transform-origin: left center !important;
  }
  #b6 .wrap,
  #technische-gegevens .wrap,
  #ghent .wrap,
  #b5 .materials,
  #b3 .technology {
    max-width: none;
    padding-inline: 0;
  }
  /* The drawing and parts use the original centered stage. Keep the heading on the shared margin. */
  #b2 .fraction-heading {
    --fraction-scale: var(--screen-scale, 1);
    --original-heading-offset: calc(max(0px, (100vw - 1600px) / 2) + 5vw);
    position: relative;
    inset-inline-start: calc(
      (var(--gs-side) - (1 - var(--fraction-scale)) * 50vw) / var(--fraction-scale)
      - var(--original-heading-offset)
    );
  }
}

@media (max-width: 1023px) {
  :root { --gs-side: 6vw; }
  #b6 .wrap,
  #technische-gegevens .wrap,
  #ghent .wrap,
  #b5 .materials,
  #b3 .technology,
  #b2 .fractions,
  #b2 .ribbon {
    box-sizing: border-box;
    width: var(--gs-content-width);
    padding-inline: 0;
    margin-inline: auto;
  }
}

@media print {
  body.printing-stortkost > #b4.site-block > section.stortkost {
    width: 100%;
  }
}

/* Keep the last row of material photos clear of the green edge. */
#b5 .materials {
  padding-inline: clamp(20px, 4vw, 52px);
  padding-bottom: clamp(24px, 2.4vw, 36px);
}
#b5 .materials header h1 {
  white-space: normal;
}

#technische-gegevens .technical-data table {
  table-layout: fixed;
}
#technische-gegevens .technical-data thead th,
#technische-gegevens .technical-data tbody th {
  width: 25%;
}