{% if messages.alert.size > 0 %}
  <div class="np-alert np-alert-error">
    <div class="np-alert-wrapper">
      {% for message in messages.alert %}
        <div>{{ message }}</div>
      {% endfor %}
    </div>
  </div>
{% endif %}

{% if messages.notice.size > 0 %}
  <div class="np-alert np-alert-success">
    <div class="np-alert-wrapper">
      {% for message in messages.notice %}
        <div>{{ message }}</div>
      {% endfor %}
    </div>
  </div>
{% endif %}

<style>
  .np-alert {
    margin-top: 70px;
  }

  @media (min-width: 768px) {
    .np-alert {
      margin-top: 64px;
    }
  }

  @media (min-width: 1024px) {
    .np-alert {
      margin-top: 90px;
    }
  }

  @media (min-width: 1366px) {
    .np-alert {
      margin-top: 100px;
    }
  }
</style>