[data-section-type="hero"] {
  --content-max-width-mobile: none;
  --content-max-width-tablet: 750px;
  --content-max-width-desktop: 800px;

  .badge-box--large {
    --badge-padding: 7px 38px;
    font-size: 1rem;
    font-weight: 500;
  }

  .hero__content {
    max-width: var(--content-max-width-mobile);

    @media (min-width: 750px) {
      max-width: var(--content-max-width-tablet);
    }

    @media (min-width: 990px) {
      max-width: var(--content-max-width-desktop);
    }
  }
}