.hero-banner__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hero-buttons-gap);
}

.hero-banner__content .hero-banner__button--primary {
  text-transform: none;
}

.hero-banner__buttons--horizontal {
  flex-direction: row;
}

.hero-banner__buttons--vertical {
  flex-direction: column;
}

@media screen and (max-width: 749px) {
  .hero-banner__buttons {
    justify-content: center;
  }
}