:root {
  --canvas-h: 340px;
  --hero-gap: 1.25rem;
  --icon-w: clamp(96px, 18vw, 144px);
}

.hero {
  display: grid;
  grid-template-columns: max-content auto;
  justify-content: center;
  align-items: center;
  column-gap: var(--hero-gap);
  transform: translateX(calc((var(--icon-w) + var(--hero-gap)) / 2));
}

.hero__media {
  order: 2;
}

.hero__main {
  text-align: center;
}

.hero__metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.metric {
  aspect-ratio: auto;
}

.grid--extras {
  grid-template-columns: 1fr 1fr;
}