{% comment %} Full screen layout for entrance views (e.g. signup, login, etc.)
Attrs declared on the <c-entrance> component are passed through to the <c-col>
component so that you can control responsive widths for the card.

To modify the layout background, overwrite the <c-entrance.background> component in your
own project templates directory ("/cotton/entrance/background.html")

{% endcomment %}
<c-vars title />
<c-entrance.background>
  <c-container>
    <c-row class="min-vh-100 py-3 w-100 align-items-center justify-content-center">
      <c-col attrs="attrs">
        <c-card class="shadow-lg rounded-4 border-0" only>
          <div class="d-flex flex-column gap-3 py-3 py-md-4 px-lg-3">
            <c-entrance.section>
              <div class="text-center">
                <c-entrance.logo style="--height: 90px; --height-md: 135px;" />
                {% if title %}<h4 class="fw-semibold mt-3">{{ title }}</h4>{% endif %}
              </div>
            </c-entrance.section>
            {{ slot }}
          </div>
        </c-card>
      </c-col>
    </c-row>
  </c-container>
</c-entrance.background>