.plans-hero {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  align-items: center;
  gap: 42px;
}

.plans-hero-copy { max-width: 720px; }

.plans-hero-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-md);
  background: var(--mx-surface);
  box-shadow: var(--mx-shadow-card);
}

.plans-hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

@media (max-width: 820px) {
  .plans-hero { grid-template-columns: 1fr; }
  .plans-hero-visual { width: min(100%, 560px); aspect-ratio: 16 / 10; }
}