{% include "header" %}
{% include "sub_navigation" %}
<main class="np-main np-training-events np-subpage-container np-max-width">
  <div class="row">
    <div class="col-xs-12 col-sm-10">
      <div class="np-resource-title">
        {% t .title %}
      </div>
      <div class="np-resource-subtitle">
        {% t .subtitle %}.
      </div>
    </div>
    <div class="col-xs-12 col-sm-2">
      {% include "training_events_filter" %}
    </div>
  </div>
  {% include "training_events_index" %}
</main>
{% include "footer" %}

<style>
  @media only screen and (min-width: 768px) {
    body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "header" "subnav" "main" "footer" "powered";
    grid-template-rows: 120px 50px 1fr 160px 60px;
    }
    header {
      grid-area: header;
    }
    nav {
      grid-area: subnav;
    }
    main {
      grid-area: main;
      margin-top: 0 !important;
    }
    footer {
      grid-area: footer;
    }
    .np-powered-by {
      grid-area: powered;
    }
  }
</style>