.media-hero {
  background: rgba(var(--color-background));
  color: rgba(var(--color-text));
  overflow: hidden;
}
.media-hero__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: center;
}
.media-hero__copy { padding: 72px var(--gutter); }
.media-hero__heading { font-size: clamp(46px, 6.4vw, 92px); line-height: 0.92; margin-top: 22px; }
.media-hero__accent { color: var(--theme-accent); }
.media-hero__lede { max-width: 470px; margin-top: 22px; }
.media-hero__ctas { gap: 12px; margin-top: 32px; }
.media-hero__form, .media-hero__product-form { display: contents; }
.media-hero__error { display: none; }
.media-hero__error:not(.hidden) { display: block; width: 100%; color: var(--theme-coral); font: 500 12px/1.4 var(--font-body); }
.media-hero__error:not(.hidden)::after { content: attr(data-message); }
.media-hero__facts {
  display: flex; flex-wrap: wrap; gap: 20px 28px; margin-top: 34px;
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--theme-text-on-dark-faint);
}
.media-hero__media {
  position: relative; min-height: 420px; background: transparent;
  display: flex; align-items: center; justify-content: center; padding: 24px var(--gutter);
}
.media-hero__media img { width: 100%; height: 100%; max-height: 520px; object-fit: contain; background: transparent; }
.media-hero__media.is-tiltable { transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }
@media (max-width: 980px) {
  .media-hero__inner { grid-template-columns: 1fr; }
  .media-hero__copy { text-align: left; }
}
@media (max-width: 900px) {
  .media-hero__copy { padding: 52px var(--gutter) 24px; }
  .media-hero__media { min-height: 280px; padding: 0 var(--gutter) 44px; }
  .media-hero__media img { max-height: 380px; }
}
@media (max-width: 760px) {
  .media-hero__heading { font-size: clamp(38px, 10vw, 58px); }
  .media-hero__facts { gap: 14px 20px; margin-top: 26px; }
}
@media (max-width: 480px) {
  .media-hero__copy { padding: 44px var(--gutter) 20px; }
  .media-hero__heading { font-size: clamp(34px, 11vw, 46px); }
}