{% include 'header' %}
<main class="np-main np-homepage">
  <div class="np-homepage-hero">
    <h1 class="community-headline">Community page</h1>
  </div>
  {% include 'sub_navigation' %}
  <div class='discussion-container'>
    <iframe class="discussion-frame" src="https://northpass.tribeplatform.com/" title="tribeplatform"></iframe>
  </div>
</main>
{% include 'footer' %}

<style>
  .discussion-frame {
    min-width: 100%;
    height: 1000px;
  }

  .discussion-container {
    margin-top: 50px;
    display: flex;
    justify-content: center;
  }

  .community-headline {
    font-size: 32px;
    line-height: 48px;
    font-family: "Roboto", sans-serif;
    color: #ffffff;
  }

  @media screen and (min-width: 768px) {
    .community-headline {
      font-size: 36px;
      line-height: 45px;
    }
  }

  @media screen and (min-width: 992px) {
    .community-headline {
      font-size: 58px;
      line-height: 72px;
    }
  }
</style>