<div class="green-banner-wrapper homepage-banner">
  <div class="green-banner width-limit">
    <img class="homepage-banner-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage_banner.svg" alt="banner">
    <div class="green-banner-content">
      <h1 class="green-banner-title">
        <!-- add &nbsp after 'Hi' to keep space between words -->
        <span class="lang-en">Hi&nbsp</span>
        <span class="lang-de">Hallo&nbsp</span>
        <span class="lang-es">Hola&nbsp</span>
        <span class="lang-fr">Bonjour&nbsp</span>
        <span class="lang-br">Oi&nbsp</span>
        <span class="first-name-field">
          {% if current_person.first_name %}
            {{ current_person.first_name }}
          {% else %}
            <script>
              document.querySelector('.first-name-field').innerText = window.sessionStorage.getItem('nameSetup');
            </script>
          {% endif %}
        </span>!
      </h1>
      <div class="green-banner-text">
        <span class="lang-en">Welcome to your Pipedrive training hub! Learn the basics of sales CRM software and browse dozens of video guides to expand your knowledge</span>
        <span class="lang-de">Willkommen in Ihrem Pipedrive-Trainingszentrum! Verstehen Sie die Grundlagen von Vertriebs-CRM-Software und erweitern Sie Ihr Wissen mit Dutzenden von Videoanleitungen</span>
        <span class="lang-es">¡Bienvenido a tu centro de capacitación de Pipedrive! Aprende los conceptos básicos del software de CRM de ventas y navega por docenas de guías en video para ampliar tus conocimientos</span>
        <span class="lang-fr">Bienvenue dans votre centre de formation Pipedrive ! Découvrez les bases pour bien utiliser votre logiciel CRM commercial et parcourez des dizaines de guides vidéo pour approfondir vos connaissances.</span>
        <span class="lang-br">Bem-vindo(a) ao seu centro de treinamento do Pipedrive! Aprenda o básico sobre nosso software de CRM de vendas e navegue por dezenas de guias em vídeo para expandir seu conhecimento.</span>
      </div>
    </div>
  </div>
</div>

<style>
  .homepage-banner-image {
    width: 100%;
  }
  .homepage-banner-stat > div {
    text-align: center;
    margin-right: 8px;
  }
  
  @media only screen and (min-width: 768px) {
    .homepage-banner .green-banner {
      padding-bottom: 0;
      overflow: clip;
    }
    .homepage-banner .green-banner-title  {
      word-break: break-word;
      display: flex;
    }
    .homepage-banner .green-banner {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
    }
    .homepage-banner .green-banner-content {
      padding-bottom: 40px;
      align-self: center;
    }
    .homepage-banner-image {
      height: 250px;
      align-self: end;
      object-fit: contain;
      width: auto;
      margin-right: -10%;
    }
  }
  @media only screen and (min-width: 880px) {
    .homepage-banner-image {
      height: 300px;
    }
  }
  @media only screen and (min-width: 1200px) {
    .homepage-banner-image {
      margin-right: -5%;
      height: 350px;
    }
    .homepage-banner .green-banner-content {
      flex: 1 1 0px;
      width: 0;
    }
  }
  @media only screen and (min-width: 1400px) {
    .homepage-banner-image {
      margin-right: 0;
      height: 100%;
    }
  }
</style>
