(function(){
  window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
  window.BridgeBlocksCustomElements.push(function(ctx){
    const { bm, addOnce, css } = ctx;
    addOnce(bm, 'cust-hero', { id:'cust-hero', label:'🌄 Hero',
      content:`<div style="${css({'text-align':'center',margin:'0 0 16px',padding:'12px','background-color':'#eef2ff',color:'#1e3a8a','border':'1px solid #c7d2fe','border-radius':'8px'})}">
        <img src="https://placehold.co/640x240" alt="Hero" style="${css({width:'100%',height:'auto','max-width':'640px',border:'0',display:'inline-block','border-radius':'6px'})}">
        <h2 style="${css({'font-family':'Arial,sans-serif',margin:'12px 0 8px','font-size':'22px'})}">Titel des Newsletters</h2>
        <p style="${css({'font-size':'14px',margin:'0 0 12px'})}">Kurzer Untertitel oder Einleitung.</p>
        </div>`
    });
  });
})();