{% with v=hero_variant|default:"primary" %}
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
  <tr>
    <td class="hero-band"
      {% if v == "success" %}style="background-color:#E8F6ED;padding:16px;border-radius:8px 8px 0 0;position:relative;" bgcolor="#E8F6ED"{% endif %}
      {% if v == "error" %}style="background-color:#FCE9E9;padding:16px;border-radius:8px 8px 0 0;position:relative;" bgcolor="#FCE9E9"{% endif %}
      {% if v == "warning" %}style="background-color:#FBF1E6;padding:16px;border-radius:8px 8px 0 0;position:relative;" bgcolor="#FBF1E6"{% endif %}
      {% if v == "secondary" %}style="background-color:#F7F6FF;padding:16px;border-radius:8px 8px 0 0;position:relative;" bgcolor="#F7F6FF"{% endif %}
      {% if v == "solid-primary" %}style="background-color:#0D41FF;padding:16px;border-radius:8px 8px 0 0;position:relative;" bgcolor="#0D41FF"{% endif %}
      {% if v == "neutral" %}style="background-color:#F5F5F6;padding:16px;border-radius:8px 8px 0 0;position:relative;" bgcolor="#F5F5F6"{% endif %}
      {% if v != "success" and v != "error" and v != "warning" and v != "secondary" and v != "solid-primary" and v != "neutral" %}style="background-color:#E7ECFF;padding:16px;border-radius:8px 8px 0 0;position:relative;" bgcolor="#E7ECFF"{% endif %}
    >
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td class="hero-icon-cell" width="80" valign="middle" style="padding-right:16px;">
            <div style="width:80px;height:80px;border-radius:320px;text-align:center;line-height:80px;
              {% if v == "success" %}background-color:#D0EDDB;{% elif v == "error" %}background-color:#F8D4D4;{% elif v == "warning" %}background-color:#F7E4CD;{% elif v == "secondary" %}background-color:#EDE9FF;{% elif v == "solid-primary" %}background-color:#0C3BE6;{% elif v == "neutral" %}background-color:#EEEEEF;{% else %}background-color:#CFD9FF;{% endif %}
            ">
              {% if hero_icon %}
              <img src="{{ email_assets_url }}/email/hero/{{ hero_icon }}" alt="" width="48" height="48" style="display:inline-block;vertical-align:middle;width:48px;height:48px;" />
              {% endif %}
            </div>
          </td>
          <td class="hero-text-cell" valign="middle">
            <p class="hero-title" style="margin:0 0 4px;font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;line-height:28px;letter-spacing:0.2px;
              {% if v == "success" %}color:#16A34A;{% elif v == "error" %}color:#DC2626;{% elif v == "warning" %}color:#D97706;{% elif v == "secondary" %}color:#6B5CE0;{% elif v == "solid-primary" %}color:#FFFFFF;{% elif v == "neutral" %}color:#01071A;{% else %}color:#0D41FF;{% endif %}
            ">{{ hero_title }}</p>
            {% if hero_subtitle %}
            <p class="hero-subtitle" style="margin:0;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:500;line-height:26px;
              {% if v == "success" %}color:#16A34A;{% elif v == "error" %}color:#DC2626;{% elif v == "warning" %}color:#D97706;{% elif v == "secondary" %}color:#6B5CE0;{% elif v == "solid-primary" %}color:#FFFFFF;{% elif v == "neutral" %}color:#5C5C5D;{% else %}color:#0D41FF;{% endif %}
            ">{{ hero_subtitle }}</p>
            {% endif %}
          </td>
          {% if hero_accent_icon %}
          <td class="hero-accent-cell" width="40" valign="top" style="padding-left:8px;">
            <div style="width:40px;height:40px;border-radius:40px;text-align:center;line-height:40px;
              {% if v == "success" %}background-color:#D0EDDB;{% elif v == "error" %}background-color:#F8D4D4;{% elif v == "warning" %}background-color:#F7E4CD;{% else %}background-color:#CFD9FF;{% endif %}
            ">
              <img src="{{ email_assets_url }}/email/hero/{{ hero_accent_icon }}" alt="" width="32" height="32" style="display:inline-block;vertical-align:middle;width:32px;height:32px;" />
            </div>
          </td>
          {% endif %}
        </tr>
      </table>
    </td>
  </tr>
</table>
{% endwith %}