/* Place the animated PROJECT scene to the left of the ABOUT catchphrase. */
.about-catch-row {
  grid-template-columns: minmax(440px, 1.35fr) minmax(210px, .65fr);
  gap: clamp(24px, 3vw, 44px);
}

.about-catch-row h2 { font-size: clamp(38px, 4.2vw, 64px); }
.about-nowrap { white-space: nowrap; font-weight: inherit; }

.about > .about-project-animation {
  position: absolute;
  left: 1.5%;
  top: 10%;
  width: 27%;
  aspect-ratio: 1322 / 814;
  opacity: 1;
  isolation: isolate;
  z-index: 2;
}

.about-project-animation .project-board { left: 1.5%; top: 4%; width: 59%; }
.about-project-animation .project-console-wrap { right: 1.5%; top: 12%; width: 40%; }
.about-project-animation .project-robot-note { left: 23%; bottom: 1%; width: 16%; }
.about-project-animation .project-robot-card { left: 57%; bottom: 1.5%; width: 16%; }
.about-project-animation .project-placed-note { left: 29%; top: 46%; width: 4.8%; }

@media (max-width: 760px) {
  .about-catch-row { grid-template-columns: 1fr; }
  .about-catch-row h2 { font-size: 39px; }
  .about > .about-project-animation { position: relative; left: auto; top: auto; width: 100%; grid-column: 1; opacity: 1; }
  .about-project-animation .project-board { left: -5%; top: 7%; width: 65%; }
  .about-project-animation .project-console-wrap { right: -3%; top: 17%; width: 44%; }
  .about-project-animation .project-robot-note { left: 22%; bottom: 2%; width: 18%; }
  .about-project-animation .project-robot-card { left: 57%; bottom: 2%; width: 18%; }
  .about-project-animation .project-placed-note { left: 25%; top: 48%; width: 6%; }
}