.crane-v4-svg {
  width: 100%;
  aspect-ratio: 1200 / 650;
  overflow: hidden;
  background: #f8fafc;
}

.crane-v4-svg svg,
.crane-v4-reference-frame svg {
  display: block;
  width: 100%;
  height: 100%;
}

.crane-v4-reference-frame {
  width: 100%;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: #f8fafc;
}

@media (max-width: 520px) {
  .crane-v4-svg {
    aspect-ratio: 900 / 650;
  }

  .crane-v4-svg svg {
    width: 106% !important;
    max-width: none;
    transform: translateX(-3%);
  }

  .crane-v4-reference {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .crane-v4-reference-frame {
    aspect-ratio: 2.2 / 1;
  }

  .crane-v4-reference-frame svg {
    width: 112%;
    max-width: none;
    transform: translateX(-5%);
  }
}

@media print {
  .crane-print-diagram .crane-v4-svg {
    aspect-ratio: 1200 / 650 !important;
    max-height: none !important;
  }

  .crane-print-diagram .crane-v4-svg svg {
    width: 100% !important;
    height: auto !important;
    max-height: 110mm !important;
    transform: none !important;
  }

  .crane-v4-reference-frame {
    break-inside: avoid;
  }
}