<div class="np-resource-header np-resource-header-card np-card-padding-large">
  {% include "training_session_header" %}
</div>
<div class="row np-training-session-row">
  <div class="col-xs-12 col-sm-8">
    <div class="np-training-container">
      <div class="np-card-padding-large">
        <div>
          {% include "training_session_status" %}
          {% include "training_session_date" %}
        </div>
        <div class="np-training-session-details">
          {% include "training_session_details" %}
          {% include "training_session_cta" %}
        </div>
      </div>
      <div class="np-card-content-divider"></div>
      <div class="np-card-padding-large">
        {% include "training_session_description" %}
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 np-grid-spacing">
    <div class="np-training-session-container">
        <div class="np-training-session-sessions-title">
          {% t shared.more_sessions %}
        </div>
        {% if training_event.sessions.size > 1 %}
          {% include "training_session_more_sessions" %}
        {% else %}
          <div class="np-training-session-zero-state">
            <img
              alt="{% t .empty %}"
              class="np-zero-state-training-sessions"
            />
            <div class="np-training-session-zero-state-text">
              {% t .empty %}
            </div>
          </div>
        {% endif %}
    </div>
  </div>
</div>
<style>
@media screen and (min-width: 768px) {
	.np-training-container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
}
	.np-training-container {
		background: #fff;
		border-radius: 4px !important;
		box-shadow: 0 2px 4px 0 rgba(72,103,118, .5) !important;
		z-index: 30;
		position: relative;
	}
.lp-heading {
	font-size: 2.5rem
}
</style>
