.vb-slot { position: relative; }
.vb-slot-scherm { position: relative; padding: 4rem var(--rand) 8rem; }
.vb-slot-titel { max-width: 64rem; color: var(--wit); }
.vb-slot .vb-onderzoek { margin: 2.4rem 0 0; max-width: 46rem; font-size: 1.5rem; line-height: 1.55; color: rgba(255, 255, 255, .62); }
.vb-slot-knop { margin-top: 3.2rem; }

.vb-soldaat { display: none; }
.vb-slot-aan .vb-soldaat { position: relative; display: flex; justify-content: center; min-width: 0; }
.vb-slot-aan .vb-soldaat::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; pointer-events: none;
  background: linear-gradient(180deg, rgba(27, 23, 19, 0) 0%, rgba(27, 23, 19, .4) 38%, rgba(27, 23, 19, .82) 72%, #1B1713 100%);
}
.vb-soldaat-svg {
  display: block; height: 100%; width: auto; max-width: 100%; aspect-ratio: 460 / 700; overflow: visible;
  fill: none; stroke: #E2CFA6; stroke-linecap: round; stroke-linejoin: round;
}
.vb-soldaat-pen circle { stroke: none; }
.vb-soldaat-penkern { fill: #FFF8EA; }

.vb-slot-aan .vb-slot-scherm { display: flex; flex-direction: column; justify-content: flex-end; }
.vb-slot-aan .vb-soldaat { order: -1; height: 56vh; height: 56svh; margin: 0 0 3.2rem; }

@media (min-width: 1024px) {
  .vb-slot-aan .vb-slot-scherm {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6rem;
    padding: var(--kop) var(--rand) 0;
  }
  .vb-slot-aan .vb-soldaat { order: 0; height: min(84vh, 92rem); margin: 0 4vw 0 0; }
  .vb-slot .vb-onderzoek { font-size: 1.7rem; margin-top: 3.2rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .vb-slot-aan { height: 100vh; height: 100svh; }
  .js .vb-slot-aan .vb-slot-scherm { height: 100vh; height: 100svh; overflow: hidden; padding-bottom: 5.6rem; }
  @supports (animation-timeline: view()) {
    .js .vb-slot-aan { height: 160svh; view-timeline: --vb-slot block; }
    .js .vb-slot-aan .vb-slot-scherm {
      animation: vb-slot-rem cubic-bezier(.37, 0, .63, 1) both; animation-timeline: --vb-slot;
      animation-range: cover 55svh cover 205svh;
    }
  }
  .js .vb-slot-aan .vb-soldaat { flex: 1 1 auto; min-height: 0; height: auto; max-height: 58svh; }
  @media (min-width: 1024px) {
    .js .vb-slot-aan .vb-slot-scherm { padding-bottom: 0; }
    .js .vb-slot-aan .vb-soldaat { flex: none; align-self: end; height: calc(100svh - var(--kop) - 2rem); max-height: none; }
  }
}
@keyframes vb-slot-rem { from { transform: none; } to { transform: translateY(60svh); } }