<!DOCTYPE html>
<html>
  <head>
    <style>
       .header {{
         display: flex;
         display: -webkit-flex;
         flex-wrap: wrap;
         -webkit-flex-wrap: wrap;
         -webkit-align-items: flex-start;
         min-height: 96px;
       }}
       .header .informations {{
         -webkit-flex-grow: 1;
         flex-grow: 1;
       }}
       .logo, .informations, .links, .description {{
         margin: 10px;
       }}
       .logo {{
         max-width: 96px;
         max-height: 96px;
         width: auto;
         height: auto;
         -webkit-align-self: center;
       }}
       h3 {{
         margin-top: 0;
         margin-bottom: 0;
       }}
       p {{
         margin-top: 10px 0;
       }}
       p:first-of-type {{
         margin-top: 0;
       }}
       p:last-of-type {{
         margin-bottom: 0;
       }}
    </style>
  </head>
  <body>
    <div class="header">
      <img class="logo" src="{episode.image:96}" />
      <div class="informations">
        <h3>{episode.title}</h3>
        <p>of <em>{episode.podcast.title}</em></p>
        <p>
          Released on {episode.pubdate:%d/%m/%Y}<br />
          {episode.display_duration}
        </p>
      </div>
      <div class="links">
        <a href="{episode.link}">site</a>
      </div>
    </div>

    <div class="description">
      {episode.summary}
    </div>
  </body>
</html>
