/*
  hero.desktop.css — dès 1024px : deux colonnes côte à côte.
*/
.hero {
  padding-block: var(--space-8) var(--space-9);
}

.hero__inner {
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
}

.hero__content {
  flex: 1;
  max-width: 560px;
}

.hero h1 {
  font-size: var(--text-4xl);
}

.hero__media {
  flex: 1;
  aspect-ratio: 4 / 3;
  max-width: 560px;
}