<section class="bm-hero bm-hero--simple" style="
  position:relative;
  overflow:visible;
  border-top-left-radius:var(--bm-border-top-left-radius, var(--bm-border-radius, 0px));
  border-top-right-radius:var(--bm-border-top-right-radius, var(--bm-border-radius, 0px));
  border-bottom-right-radius:var(--bm-border-bottom-right-radius, var(--bm-border-radius, 0px));
  border-bottom-left-radius:var(--bm-border-bottom-left-radius, var(--bm-border-radius, 0px));
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
  background-color:var(--bm-bg);
  background-image:var(--bm-bg-image, none),var(--bm-bg-gradient, none);
  background-size:cover;
  background-position:center;
  color:var(--bm-text);
  min-height:var(--bm-min-height, 0);
  padding-top:var(--bm-padding-top, var(--bm-padding-y));
  padding-right:var(--bm-padding-right, var(--bm-padding-x));
  padding-bottom:var(--bm-padding-bottom, var(--bm-padding-y));
  padding-left:var(--bm-padding-left, var(--bm-padding-x));
  margin-top:var(--bm-margin-top, var(--bm-margin-y));
  margin-right:var(--bm-margin-right, var(--bm-margin-x));
  margin-bottom:var(--bm-margin-bottom, var(--bm-margin-y));
  margin-left:var(--bm-margin-left, var(--bm-margin-x));
  text-align:var(--bm-text-align, center);
">
  <div class="bm-hero__overlay" aria-hidden="true" style="
    position:absolute;
    top:0;right:0;bottom:0;left:0;
    z-index:1;
    background:var(--bm-overlay);
    pointer-events:none;
  "></div>
  <div class="bm-hero__inner" style="
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:var(--bm-align-items, center);
    gap:var(--bm-gap);
    max-width:var(--bm-content-max-width, 48rem);
    width:100%;
    margin:var(--bm-inner-margin, 0 auto);
  ">
    {{contentStack}}
  </div>
</section>

<!-- bm-partial:badge -->
<span class="bm-hero__badge" data-bm-el="badge" style="
  display:inline-block;
  font-size:var(--bm-badge-font-size);
  font-weight:var(--bm-badge-font-weight);
  line-height:var(--bm-badge-line-height);
  letter-spacing:var(--bm-badge-letter-spacing);
  color:var(--bm-badge-color, var(--bm-text));
  background:var(--bm-badge-bg);
  margin-top:var(--bm-badge-margin-top, 0);
  margin-bottom:var(--bm-badge-margin-bottom, 0);
  padding-top:0.35rem;
  padding-right:var(--bm-badge-padding-right, 0.75rem);
  padding-bottom:0.35rem;
  padding-left:var(--bm-badge-padding-left, 0.75rem);
  border-style:var(--bm-badge-border-style, none);
  border-color:var(--bm-badge-border-color, transparent);
  border-top-width:var(--bm-badge-border-top-width, var(--bm-badge-border-width, 0));
  border-right-width:var(--bm-badge-border-right-width, var(--bm-badge-border-width, 0));
  border-bottom-width:var(--bm-badge-border-bottom-width, var(--bm-badge-border-width, 0));
  border-left-width:var(--bm-badge-border-left-width, var(--bm-badge-border-width, 0));
  border-top-left-radius:var(--bm-badge-border-top-left-radius, var(--bm-badge-border-radius, 4px));
  border-top-right-radius:var(--bm-badge-border-top-right-radius, var(--bm-badge-border-radius, 4px));
  border-bottom-right-radius:var(--bm-badge-border-bottom-right-radius, var(--bm-badge-border-radius, 4px));
  border-bottom-left-radius:var(--bm-badge-border-bottom-left-radius, var(--bm-badge-border-radius, 4px));
  box-shadow:var(--bm-badge-shadow, none);
  box-sizing:border-box;
">{{badge}}</span>
<!-- /bm-partial:badge -->

<!-- bm-partial:header -->
<{{headerTag}} class="bm-hero__header" data-bm-el="header" style="
  font-size:var(--bm-header-font-size);
  font-weight:var(--bm-header-font-weight);
  line-height:var(--bm-header-line-height);
  letter-spacing:var(--bm-header-letter-spacing);
  color:var(--bm-header-color, var(--bm-text));
  margin-top:var(--bm-header-margin-top, 0);
  margin-bottom:var(--bm-header-margin-bottom, 0);
  padding-left:var(--bm-header-padding-left, 0);
  padding-right:var(--bm-header-padding-right, 0);
  align-self:stretch;
  width:100%;
  box-sizing:border-box;
">{{header}}</{{headerTag}}>
<!-- /bm-partial:header -->

<!-- bm-partial:subheader -->
<{{subheaderTag}} class="bm-hero__subheader" data-bm-el="subheader" style="
  font-size:var(--bm-subheader-font-size);
  font-weight:var(--bm-subheader-font-weight);
  line-height:var(--bm-subheader-line-height);
  letter-spacing:var(--bm-subheader-letter-spacing);
  color:var(--bm-subheader-color, var(--bm-text));
  margin-top:var(--bm-subheader-margin-top, 0);
  margin-bottom:var(--bm-subheader-margin-bottom, 0);
  padding-left:var(--bm-subheader-padding-left, 0);
  padding-right:var(--bm-subheader-padding-right, 0);
  align-self:stretch;
  width:100%;
  box-sizing:border-box;
">{{subheader}}</{{subheaderTag}}>
<!-- /bm-partial:subheader -->

<!-- bm-partial:image -->
{{image.html}}
<!-- /bm-partial:image -->

<!-- bm-partial:logos -->
<div class="bm-hero__logos" data-bm-el="logos" style="
  display:flex;
  flex-wrap:wrap;
  justify-content:var(--bm-justify-content, var(--bm-align-items, center));
  align-items:center;
  gap:var(--bm-logos-gap, 1.5rem);
  margin:var(--bm-logos-margin-top, 1rem) 0 var(--bm-logos-margin-bottom, 0);
  width:100%;
">
{{#logos}}
  <img class="bm-hero__logo" src="{{image.url}}" alt="{{image.alt}}" loading="lazy" decoding="async" style="
    display:block;
    height:var(--bm-logos-height, 2.75rem);
    width:auto;
    max-width:100%;
    object-fit:contain;
  " />
{{/logos}}
</div>
<!-- /bm-partial:logos -->

<!-- bm-partial:buttons -->
<div class="bm-hero__buttons" data-bm-el="buttons" style="
  display:flex;
  flex-wrap:wrap;
  justify-content:var(--bm-justify-content, var(--bm-align-items, center));
  align-items:center;
  gap:var(--bm-buttons-gap, 0.75rem);
  flex-direction:var(--bm-buttons-flex-direction, row);
  margin:var(--bm-buttons-margin-top, 0) 0 var(--bm-buttons-margin-bottom, 0);
  width:100%;
">
{{#buttons}}
  <a class="bm-hero__btn" data-bm-btn-index="{{@index}}" href="{{link.url}}"{{link.targetAttr}} style="
    display:inline-flex;
    align-items:center;
    gap:0.45em;
    flex-direction:{{btnIconFlex}};
    text-decoration:none;
    border-style:var(--bm-btn-border-style, none);border-color:var(--bm-btn-border-color, transparent);border-top-width:var(--bm-btn-border-top-width, var(--bm-btn-border-width, 0));border-right-width:var(--bm-btn-border-right-width, var(--bm-btn-border-width, 0));border-bottom-width:var(--bm-btn-border-bottom-width, var(--bm-btn-border-width, 0));border-left-width:var(--bm-btn-border-left-width, var(--bm-btn-border-width, 0));border-top-left-radius:var(--bm-btn-border-top-left-radius, var(--bm-btn-radius, 8px));border-top-right-radius:var(--bm-btn-border-top-right-radius, var(--bm-btn-radius, 8px));border-bottom-right-radius:var(--bm-btn-border-bottom-right-radius, var(--bm-btn-radius, 8px));border-bottom-left-radius:var(--bm-btn-border-bottom-left-radius, var(--bm-btn-radius, 8px));
    padding:var(--bm-btn-pad-y, var(--bm-buttons-pad-y, 0.75rem)) var(--bm-btn-pad-x, var(--bm-buttons-pad-x, 1.25rem));
    box-shadow:var(--bm-btn-shadow, none);
    font-size:var(--bm-btn-font-size, 1rem);
    font-weight:600;
    {{btnStyle}};
  ">{{iconHtml}}{{labelHtml}}</a>
{{/buttons}}
</div>
<!-- /bm-partial:buttons -->
