<style>
  a {
    color: #4285F4;
    text-decoration: none;
  }

  * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }

  html, body {
    min-height: 100%;
  }

  .sponsored-post {
    background-color: #fff;
    border: 1px solid #ddd;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    display: flex;
  }

  .image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  @media only screen and (max-width: 400px) {
    .sponsored-post {
      flex-direction: column;
    }

    .image {
      width: 100%;
      max-height: 125px;
      min-height: 125px;
      overflow: hidden;
    }
  }
</style>

<div class='sponsored-post'>
  <div class='image'>
    <script>
      document.getElementsByClassName('image')[0].style.backgroundImage =
      "url('%%PATTERN:hb_native_image%%')";
    </script>
  </div>

  <div class='content'>
    <div class='title'>
      <a href='%%CLICK_URL_UNESC%%%%PATTERN:hb_native_linkurl%%' target='_blank'>
        <p>%%PATTERN:hb_native_title%%</p>
      </a>
    </div>

    <div class='body'>
      <p>%%PATTERN:hb_native_body%%</p>
    </div>

    <div class='separator'></div>

    <div class='attribution'>
      <div class='logo'>
        <script>
          var i = document.createElement('img');
          if ('%%PATTERN:hb_native_icon%%' !== '') {
            i.src = '%%PATTERN:hb_native_icon%%';
          } else {
            i.src = 'https://tpc.googlesyndication.com/simgad/40933678460698624';
          }
          document.getElementsByClassName('logo')[0].appendChild(i);
        </script>
      </div>

      <div class='advertiser'>
        <span>%%PATTERN:hb_native_brand%%</span>
      </div>

      <div class='call-to-action'>
        <a href='%%CLICK_URL_UNESC%%%%PATTERN:hb_native_linkurl%%' target='_blank'>
          <span></span>
        </a>
      </div>
    </div>
  </div>
</div>