/* Hold only the robot backdrop; the heading, button and cards scroll together. */
.design-page { overflow: clip; }
.technology {
  --scene-height: calc(100svh - var(--header-height));
  --u: min(calc(100cqw / 1920), calc((100svh - var(--header-height)) / 975));
  height: calc(var(--scene-height) + var(--pin-distance, 0px));
  min-height: 0;
  overflow: visible;
  background: #03060b;
}
.technology-scene {
  position: sticky;
  top: var(--header-height);
  width: 100%;
  height: var(--scene-height);
  overflow: clip;
  background: #03060b;
}
.technology-backdrop {
  background-attachment: scroll;
  background-position: center;
  background-size: cover;
}
.technology .section-heading {
  top: calc(80 * var(--u));
  width: 100%;
  left: 0;
  will-change: transform;
}
.technology-cards-viewport {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 46.82%;
  width: 48.07%;
  z-index: 2;
  overflow: clip;
  mask-image: linear-gradient(transparent, #000 20px, #000 calc(100% - 20px), transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
.technology-cards {
  width: 100%;
  margin: 0;
  padding: calc(360 * var(--u)) 0 calc(160 * var(--u));
  will-change: transform;
}
.technology-cards .tech-card,
.technology-cards .tech-card:hover { transform: none; }

@media (max-width: 767px) {
  .technology {
    --u: 1px;
    height: auto;
    min-height: 0;
    padding: 0;
  }
  .technology-scene {
    position: relative;
    top: auto;
    height: auto;
    padding: 55px 20px 45px;
  }
  .technology .section-heading { position: relative; top: auto; left: auto; transform: none; will-change: auto; }
  .technology-backdrop { background-position: 25% center; background-size: auto 100%; }
  .technology-cards-viewport {
    position: relative;
    inset: auto;
    width: 100%;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .technology-cards { width: 100%; margin: 110px 0 0; padding: 0; transform: none; will-change: auto; }
}