@media (max-width: 700px) {
  :root { background: #1b2429; }
  body { display: flex; flex-direction: column; min-height: 100svh; }
  .project-summary {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: max(774px, 176vw);
    flex: 1 0 auto;
    padding: 58px 0 0;
    background:
      radial-gradient(ellipse at 95% 12%, rgb(211 225 244 / 32%), transparent 48%),
      radial-gradient(ellipse at 4% 86%, rgb(211 225 244 / 28%), transparent 46%),
      #fff;
  }
  .summary-category { margin: 0 11%; font-size: 11px; line-height: 18px; letter-spacing: .2em; }
  .summary-category::before { content: ''; display: block; width: 32px; height: 1px; background: #333; margin-bottom: 23px; }
  .summary-copy,
  .summary-microgel .summary-copy,
  .summary-manipulator .summary-copy { position: relative; z-index: 1; margin: 25px 11% 0; }
  .summary-copy h1 { font-size: 22px; line-height: 32px; font-weight: 600; letter-spacing: -.04em; word-break: keep-all; }
  .summary-english { margin-top: 5px; font-size: 14px; line-height: 22px; }
  .summary-description { margin-top: 32px; font-size: 14px; line-height: 23px; font-weight: 400; word-break: keep-all; }
  .summary-industrial .summary-description,
  .summary-robot .summary-description { color: #777; }
  .summary-tags { gap: 10px; margin-top: 25px; }
  .summary-tags li { padding: 1px 12px; font-size: 12px; line-height: 19px; border-color: #777; }
  .project-summary .summary-media { position: absolute; inset: 0; margin: 0; pointer-events: none; }
  .summary-media figure { position: absolute; margin: 0; }
  .summary-media svg { width: 100%; height: 100%; }
  .summary-industrial .summary-media figure { left: 2%; top: 47%; width: 96%; height: 38%; }
  .summary-robot .summary-media figure:first-child { left: 1%; top: 44%; width: 98%; height: 54%; }
  .summary-robot .summary-media figure + figure { display: none; }
  .summary-laser .summary-media figure:first-child { left: 0; top: 46%; width: 100%; height: 20%; }
  .summary-laser .summary-media figure + figure { left: 1%; top: 75%; width: 98%; height: 23%; margin: 0; }
  .summary-microgel .summary-media figure { left: 6%; top: 50%; width: 88%; height: 50%; }
  .summary-manipulator .summary-media figure { left: 11%; top: 34%; width: 78%; height: 66%; }
  .summary-footer { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 16px 5%; background: #1b2429; color: #b5b5b5; }
  .summary-footer a { display: flex; flex-shrink: 0; }
  .summary-footer img { display: block; width: 62px; height: 18px; filter: brightness(0) invert(1); }
  .summary-footer small { font-size: 11px; line-height: 18px; letter-spacing: .025em; }
}