<% title "#{@badge.title} Badge" %>

<div class="blank-space"></div>
<div class="container article">
  <h1 style="text-align: center;font-size:calc(1.66vw + <%= 34 - (@badge.title.size / 1.1).to_i %>px);max-width:96%;margin: 30px auto;padding-top:8px;">🏅 <%= @badge.title %> Badge 🏅</h1>
  <div class="body" style="text-align: center">
    <p>
      <img src="<%= cloudinary(@badge.badge_image_url, 375) %>" style="height: 250px" alt="<%= @badge.title %> badge">
    </p>
    <h4 style="max-width:550px;margin: 50px auto">
      <%= @badge.description %>
    </h4>
  </div>
</div>
