<section class="bm-cards bm-cards--simple" style="
  background-color:var(--bm-bg);
  background-image:var(--bm-bg-gradient, none);
  color:var(--bm-text);
  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));
">
  <div class="bm-cards__grid" style="
    display:grid;
    grid-template-columns:repeat(var(--bm-card-columns, 4), minmax(0, 1fr));
    grid-auto-rows:minmax(min-content, auto);
    align-items:stretch;
    gap:var(--bm-gap);
  ">
    {{#cards}}
      <article class="bm-card" data-bm-card-index="{{@index}}" style="
        display:var(--bm-card-display, block);
        flex-direction:column;
        align-self:stretch;
        height:var(--bm-card-height, auto);
        padding:var(--bm-card-padding, 0);
        border-top-left-radius:var(--bm-card-border-top-left-radius, var(--bm-card-border-radius, 8px));
        border-top-right-radius:var(--bm-card-border-top-right-radius, var(--bm-card-border-radius, 8px));
        border-bottom-right-radius:var(--bm-card-border-bottom-right-radius, var(--bm-card-border-radius, 8px));
        border-bottom-left-radius:var(--bm-card-border-bottom-left-radius, var(--bm-card-border-radius, 8px));
        border-style:var(--bm-card-border-style, solid);
        border-color:var(--bm-card-border-color, rgba(0, 0, 0, 0.08));
        border-top-width:var(--bm-card-border-top-width, var(--bm-card-border-width, 1px));
        border-right-width:var(--bm-card-border-right-width, var(--bm-card-border-width, 1px));
        border-bottom-width:var(--bm-card-border-bottom-width, var(--bm-card-border-width, 1px));
        border-left-width:var(--bm-card-border-left-width, var(--bm-card-border-width, 1px));
        box-shadow:var(--bm-card-shadow, none);
        box-sizing:border-box;
        background:var(--bm-card-bg, var(--bm-bg));
      ">
        <div class="bm-card__body" style="
          display:var(--bm-card-body-display, flex);
          flex-direction:column;
          flex:var(--bm-card-body-flex, 1 1 auto);
          min-height:auto;
          align-items:stretch;
          gap:var(--bm-card-body-gap, 1rem);
          order:1;
          padding:var(--bm-card-body-padding, 1.5rem);
          text-align:var(--bm-text-align, left);
          box-sizing:border-box;
        ">
          <div class="bm-card__icon-wrapper" data-bm-el="icon" style="
            display:inline-flex;
            align-items:center;
            justify-content:center;
            align-self:var(--bm-align-items, flex-start);
            box-sizing:border-box;
            margin-top:var(--bm-icon-margin-top, 0);
            margin-right:var(--bm-icon-margin-right, 0);
            margin-bottom:var(--bm-icon-margin-bottom, var(--bm-card-icon-margin));
            margin-left:var(--bm-icon-margin-left, 0);
            background:var(--bm-icon-bg, transparent);
            padding-top:var(--bm-icon-padding-top, 0);
            padding-right:var(--bm-icon-padding-right, 0);
            padding-bottom:var(--bm-icon-padding-bottom, 0);
            padding-left:var(--bm-icon-padding-left, 0);
            border-style:var(--bm-icon-border-style, none);
            border-color:var(--bm-icon-border-color, transparent);
            border-top-width:var(--bm-icon-border-top-width, var(--bm-icon-border-width, 0));
            border-right-width:var(--bm-icon-border-right-width, var(--bm-icon-border-width, 0));
            border-bottom-width:var(--bm-icon-border-bottom-width, var(--bm-icon-border-width, 0));
            border-left-width:var(--bm-icon-border-left-width, var(--bm-icon-border-width, 0));
            border-top-left-radius:var(--bm-icon-border-top-left-radius, var(--bm-icon-border-radius, 0));
            border-top-right-radius:var(--bm-icon-border-top-right-radius, var(--bm-icon-border-radius, 0));
            border-bottom-right-radius:var(--bm-icon-border-bottom-right-radius, var(--bm-icon-border-radius, 0));
            border-bottom-left-radius:var(--bm-icon-border-bottom-left-radius, var(--bm-icon-border-radius, 0));
            box-shadow:var(--bm-icon-shadow, none);
            {{iconWrapperStyle}}
          ">{{iconHtml}}</div>
          <h4 class="bm-card__title" data-bm-el="title" style="
            margin-top:var(--bm-title-margin-top, 0);
            margin-bottom:var(--bm-title-margin-bottom, var(--bm-card-title-margin));
            padding-left:var(--bm-title-padding-left, 0);
            padding-right:var(--bm-title-padding-right, 0);
            color:var(--bm-title-color, var(--bm-card-title-color, var(--bm-text)));
            font-family:var(--bm-title-font-family, inherit);
            font-size:var(--bm-title-font-size, var(--bm-card-title-font-size));
            font-weight:var(--bm-title-font-weight, var(--bm-card-title-font-weight));
            line-height:var(--bm-title-line-height, var(--bm-card-title-line-height));
            letter-spacing:var(--bm-title-letter-spacing, normal);
            box-sizing:border-box;
          ">{{title}}</h4>
          <div class="bm-card__description" data-bm-el="description" style="
            margin-top:var(--bm-description-margin-top, 0);
            margin-bottom:var(--bm-description-margin-bottom, var(--bm-card-description-margin));
            padding-left:var(--bm-description-padding-left, 0);
            padding-right:var(--bm-description-padding-right, 0);
            color:var(--bm-description-color, var(--bm-card-description-color, var(--bm-text)));
            font-family:var(--bm-description-font-family, inherit);
            font-size:var(--bm-description-font-size, var(--bm-card-description-font-size));
            line-height:var(--bm-description-line-height, var(--bm-card-description-line-height));
            font-weight:var(--bm-description-font-weight, 400);
            letter-spacing:var(--bm-description-letter-spacing, normal);
            box-sizing:border-box;
          ">{{description}}</div>
          <div class="bm-card__buttons" data-bm-el="buttons" style="
            display:flex;
            flex-wrap:wrap;
            justify-content:var(--bm-justify-content, flex-start);
            align-items:center;
            gap:var(--bm-buttons-gap, 0.75rem);
            width:100%;
            box-sizing:border-box;
            order:var(--bm-buttons-flex-order, 999);
            margin:var(--bm-buttons-margin-top, 0) 0 var(--bm-buttons-margin-bottom, 0);
            margin-top:var(--bm-buttons-pin-top, var(--bm-buttons-margin-top, 0));
          ">
            {{#buttons}}
              <a class="bm-card__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.625rem)) 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>
        </div>
      </article>
    {{/cards}}
  </div>
</section>
