Use custom element for content wrapper

src/_includes/global/content.njk

@@ -37,7 +37,7 @@
     {% endif %}
 </header>
 
-<div class="content__wrapper">
+<content-wrapper>
     {% if toc %}
         {% include "global/toc.njk" %}
     {% endif %}
@@ -84,7 +84,7 @@
     {% endif %}
 
     {% block shrineInfo %}{% endblock %}
-</div>
+</content-wrapper>
 
 <style>
     .breadcrumbs {

src/assets/css/content.css

@@ -1,10 +1,10 @@
 /* MAIN CONTENT */
-.content__wrapper,
+content-wrapper,
 .content--divided {
     display: grid;
 }
 
-.content__wrapper,
+content-wrapper,
 .content--divided {
     gap: 1rem;
 }
@@ -58,7 +58,7 @@
 
 /* Desktop main content layout */
 @media only screen and (min-width: 60rem) {
-    .content__wrapper {
+    content-wrapper {
         padding: 0 var(--sz-main-padding);
         grid-template-areas: 'leftbar content rightbar';
         grid-template-columns: minmax(0, 18vw) minmax(min(60ch, 40vw), 2.5fr) minmax(0, 18vw);