<div {{ attributes }} style="font-family: Helvetica, Arial, sans-serif; width: 100%; height: 100vh; background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 20px; box-sizing: border-box;">
  <h1 style="font-size: 3em; margin: 0.5em 0; color: #333;">{{ heading }}</h1>
  <div class="component--props-slots--body">
    {% block the_body %}
    {% endblock %}
  </div>
  <div class="component--props-slots--footer">
    {% block the_footer %}
    {% endblock %}
  </div>
  <div class="component--props-slots--colophon">
    {% block the_colophon %}
    {% endblock %}
  </div>
</div>
