{% set hero_text_width = module.hero_dimensions.hero_text_width %}

.hero {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hero__columns {
  --gap: 1rem;

  display: flex;
  flex-direction: column;
  gap: var(--gap, 1rem);
}

.hero__content {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 5vw, 3rem);
}

.hero-content__text {
  flex: 1 1 20rem;
}

.hero-content__image {
  flex: 1 1 28rem;
}

.hero__image {
  height: auto;
  max-width: 100%;
}

.hero__info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hero__info + .hero__info {
  margin-top: 1.5rem;
}