Mantra Theme Page Template layout

layout.css

.layout-container {
    position: relative;
    box-sizing: border-box;
    max-width: 42rem;
    margin: auto;
    padding: 1rem;
}

.path-admin .layout-container {
    max-width: 64rem;
}

.region {
    margin: 1rem 0;
}

.block {
    margin: .5rem 0;
}

page.html.twig

<div class="layout-container">

  <header role="banner">
    {{ page.header }}
  </header>

  <main role="main">
    <a id="main-content" tabindex="-1"></a>

    {{ page.title }}

    <div class="layout-content">
      {{ page.content }}
    </div>

  </main>

  {% if page.footer %}
    <footer role="contentinfo">
      {{ page.footer }}
    </footer>
  {% endif %}

</div>

region.html.twig

{%
  set classes = [
    'region',
    'region-' ~ region|clean_class,
  ]
%}
{% if content %}
  <div{{ attributes.addClass(classes) }}>
    {{ content }}
  </div>
{% endif %}

block.html.twig

{%
  set classes = [
  'block',
  'block-' ~ configuration.provider|clean_class,
  'block-' ~ plugin_id|clean_class,
]
%}
<div{{ attributes.addClass(classes) }}>
  {{ title_prefix }}
  {% if label %}
    <h2{{ title_attributes }}>{{ label }}</h2>
  {% endif %}
  {{ title_suffix }}
  {% block content %}
    {{ content }}
  {% endblock %}
</div>