From b3f0896fedb867414ad774b27cced5c134247a30 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Thu, 2 Nov 2017 19:19:41 +0100
Subject: [PATCH] css: m-container-inflatable is now a class instead of ID.

Because I realized that having multiple inflatable containers (one after
another) is a completely valid use case. Sorry for breaking your stuff
with this.
---
 css/m-components.css                 |  96 ++++++++++++-------------
 css/m-dark.compiled.css              | 102 +++++++++++++--------------
 css/m-grid.css                       |   6 +-
 css/m-light.compiled.css             | 102 +++++++++++++--------------
 doc/css/grid.rst                     |   4 +-
 doc/css/page-layout.rst              |   4 +-
 pelican-theme/templates/article.html |   2 +-
 pelican-theme/templates/page.html    |   2 +-
 8 files changed, 159 insertions(+), 159 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index f222e19b..fa46a39c 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -1119,55 +1119,55 @@ article section:target figure.m-code-figure {
 }
 
 /* Inflatable content */
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
-#m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
-#m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
+.m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
+.m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
   margin-left: -1rem;
   margin-right: -1rem;
 }
 
 @media screen and (min-width: 576px) {
-  #m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
-  #m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
+  .m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
+  .m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
 }
 @media screen and (min-width: 768px) {
-  #m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
-  #m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
+  .m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
+  .m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
 }
 @media screen and (min-width: 992px) {
-  #m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
-  #m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
+  .m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
+  .m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
 }
 
 /* Active sections in inflatable content affect left border of some components */
-#m-container-inflatable section:target > .m-note,
-#m-container-inflatable section:target > .m-frame,
-#m-container-inflatable section:target > .m-block,
-#m-container-inflatable section:target > pre.m-code,
-#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-#m-container-inflatable section:target section > .m-note,
-#m-container-inflatable section:target section > .m-frame,
-#m-container-inflatable section:target section > .m-block,
-#m-container-inflatable section:target section > pre.m-code,
-#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+.m-container-inflatable section:target > .m-note,
+.m-container-inflatable section:target > .m-frame,
+.m-container-inflatable section:target > .m-block,
+.m-container-inflatable section:target > pre.m-code,
+.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target section > .m-note,
+.m-container-inflatable section:target section > .m-frame,
+.m-container-inflatable section:target section > .m-block,
+.m-container-inflatable section:target section > pre.m-code,
+.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
   margin-left: -1.0rem;
   border-left-style: solid;
   border-left-width: 0.25rem;
@@ -1175,44 +1175,44 @@ article section:target figure.m-code-figure {
   border-bottom-left-radius: 0;
   padding-left: 0.75rem;
 }
-#m-container-inflatable section:target > figure.m-code-figure::before,
-#m-container-inflatable section:target section > figure.m-code-figure::before {
+.m-container-inflatable section:target > figure.m-code-figure::before,
+.m-container-inflatable section:target section > figure.m-code-figure::before {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
-#m-container-inflatable section:target > pre.m-code,
-#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-#m-container-inflatable section:target section > pre.m-code,
-#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+.m-container-inflatable section:target > pre.m-code,
+.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target section > pre.m-code,
+.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
   border-color: var(--line-color);
 }
-#m-container-inflatable section:target > .m-note.m-default,
-#m-container-inflatable section:target section > .m-note.m-default {
+.m-container-inflatable section:target > .m-note.m-default,
+.m-container-inflatable section:target section > .m-note.m-default {
   border-left-color: var(--line-color);
 }
-#m-container-inflatable section:target > .m-note.m-primary,
-#m-container-inflatable section:target section > .m-note.m-primary {
+.m-container-inflatable section:target > .m-note.m-primary,
+.m-container-inflatable section:target section > .m-note.m-primary {
   border-left-color: var(--primary-color);
 }
-#m-container-inflatable section:target > .m-note.m-success,
-#m-container-inflatable section:target section > .m-note.m-success {
+.m-container-inflatable section:target > .m-note.m-success,
+.m-container-inflatable section:target section > .m-note.m-success {
   border-left-color: var(--success-color);
 }
-#m-container-inflatable section:target > .m-note.m-warning,
-#m-container-inflatable section:target section > .m-note.m-warning {
+.m-container-inflatable section:target > .m-note.m-warning,
+.m-container-inflatable section:target section > .m-note.m-warning {
   border-left-color: var(--warning-color);
 }
-#m-container-inflatable section:target > .m-note.m-danger,
-#m-container-inflatable section:target section > .m-note.m-danger {
+.m-container-inflatable section:target > .m-note.m-danger,
+.m-container-inflatable section:target section > .m-note.m-danger {
   border-left-color: var(--danger-color);
 }
-#m-container-inflatable section:target > .m-note.m-info,
-#m-container-inflatable section:target section > .m-note.m-info {
+.m-container-inflatable section:target > .m-note.m-info,
+.m-container-inflatable section:target section > .m-note.m-info {
   border-left-color: var(--info-color);
 }
-#m-container-inflatable section:target > .m-note.m-dim,
-#m-container-inflatable section:target section > .m-note.m-dim {
+.m-container-inflatable section:target > .m-note.m-dim,
+.m-container-inflatable section:target section > .m-note.m-dim {
   border-left-color: var(--dim-color);
 }
 
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 71edd6dd..59ee85e2 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -148,7 +148,7 @@ body { margin: 0; }
 .m-pull-t-11 { right: calc(11 * 100% / 12); }
 @media screen and (min-width: 576px) {
   .m-container { width: 560px; }
-  #m-container-inflatable .m-col-s-10 .m-container-inflate {
+  .m-container-inflatable .m-col-s-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -228,7 +228,7 @@ body { margin: 0; }
 }
 @media screen and (min-width: 768px) {
   .m-container { width: 750px; }
-  #m-container-inflatable .m-col-m-10 .m-container-inflate {
+  .m-container-inflatable .m-col-m-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -308,7 +308,7 @@ body { margin: 0; }
 }
 @media screen and (min-width: 992px) {
   .m-container { width: 960px; }
-  #m-container-inflatable .m-col-l-10 .m-container-inflate {
+  .m-container-inflatable .m-col-l-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -1416,52 +1416,52 @@ article section:target figure.m-code-figure {
     border-right-width: 0;
   }
 }
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
-#m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
-#m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
+.m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
+.m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
   margin-left: -1rem;
   margin-right: -1rem;
 }
 @media screen and (min-width: 576px) {
-  #m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
-  #m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
+  .m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
+  .m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
 }
 @media screen and (min-width: 768px) {
-  #m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
-  #m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
+  .m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
+  .m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
 }
 @media screen and (min-width: 992px) {
-  #m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
-  #m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
+  .m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
+  .m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
 }
-#m-container-inflatable section:target > .m-note,
-#m-container-inflatable section:target > .m-frame,
-#m-container-inflatable section:target > .m-block,
-#m-container-inflatable section:target > pre.m-code,
-#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-#m-container-inflatable section:target section > .m-note,
-#m-container-inflatable section:target section > .m-frame,
-#m-container-inflatable section:target section > .m-block,
-#m-container-inflatable section:target section > pre.m-code,
-#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+.m-container-inflatable section:target > .m-note,
+.m-container-inflatable section:target > .m-frame,
+.m-container-inflatable section:target > .m-block,
+.m-container-inflatable section:target > pre.m-code,
+.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target section > .m-note,
+.m-container-inflatable section:target section > .m-frame,
+.m-container-inflatable section:target section > .m-block,
+.m-container-inflatable section:target section > pre.m-code,
+.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
   margin-left: -1.0rem;
   border-left-style: solid;
   border-left-width: 0.25rem;
@@ -1469,44 +1469,44 @@ article section:target figure.m-code-figure {
   border-bottom-left-radius: 0;
   padding-left: 0.75rem;
 }
-#m-container-inflatable section:target > figure.m-code-figure::before,
-#m-container-inflatable section:target section > figure.m-code-figure::before {
+.m-container-inflatable section:target > figure.m-code-figure::before,
+.m-container-inflatable section:target section > figure.m-code-figure::before {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
-#m-container-inflatable section:target > pre.m-code,
-#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-#m-container-inflatable section:target section > pre.m-code,
-#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+.m-container-inflatable section:target > pre.m-code,
+.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target section > pre.m-code,
+.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
   border-color: #405363;
 }
-#m-container-inflatable section:target > .m-note.m-default,
-#m-container-inflatable section:target section > .m-note.m-default {
+.m-container-inflatable section:target > .m-note.m-default,
+.m-container-inflatable section:target section > .m-note.m-default {
   border-left-color: #405363;
 }
-#m-container-inflatable section:target > .m-note.m-primary,
-#m-container-inflatable section:target section > .m-note.m-primary {
+.m-container-inflatable section:target > .m-note.m-primary,
+.m-container-inflatable section:target section > .m-note.m-primary {
   border-left-color: #a5c9ea;
 }
-#m-container-inflatable section:target > .m-note.m-success,
-#m-container-inflatable section:target section > .m-note.m-success {
+.m-container-inflatable section:target > .m-note.m-success,
+.m-container-inflatable section:target section > .m-note.m-success {
   border-left-color: #3bd267;
 }
-#m-container-inflatable section:target > .m-note.m-warning,
-#m-container-inflatable section:target section > .m-note.m-warning {
+.m-container-inflatable section:target > .m-note.m-warning,
+.m-container-inflatable section:target section > .m-note.m-warning {
   border-left-color: #c7cf2f;
 }
-#m-container-inflatable section:target > .m-note.m-danger,
-#m-container-inflatable section:target section > .m-note.m-danger {
+.m-container-inflatable section:target > .m-note.m-danger,
+.m-container-inflatable section:target section > .m-note.m-danger {
   border-left-color: #cd3431;
 }
-#m-container-inflatable section:target > .m-note.m-info,
-#m-container-inflatable section:target section > .m-note.m-info {
+.m-container-inflatable section:target > .m-note.m-info,
+.m-container-inflatable section:target section > .m-note.m-info {
   border-left-color: #2f83cc;
 }
-#m-container-inflatable section:target > .m-note.m-dim,
-#m-container-inflatable section:target section > .m-note.m-dim {
+.m-container-inflatable section:target > .m-note.m-dim,
+.m-container-inflatable section:target section > .m-note.m-dim {
   border-left-color: #747474;
 }
 pre.m-code span.hll {
diff --git a/css/m-grid.css b/css/m-grid.css
index 35efbcaf..d0a34cbf 100644
--- a/css/m-grid.css
+++ b/css/m-grid.css
@@ -161,7 +161,7 @@ body { margin: 0; }
 @media screen and (min-width: 576px) {
   .m-container { width: 560px; }
 
-  #m-container-inflatable .m-col-s-10 .m-container-inflate {
+  .m-container-inflatable .m-col-s-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -253,7 +253,7 @@ body { margin: 0; }
 @media screen and (min-width: 768px) {
   .m-container { width: 750px; }
 
-  #m-container-inflatable .m-col-m-10 .m-container-inflate {
+  .m-container-inflatable .m-col-m-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -345,7 +345,7 @@ body { margin: 0; }
 @media screen and (min-width: 992px) {
   .m-container { width: 960px; }
 
-  #m-container-inflatable .m-col-l-10 .m-container-inflate {
+  .m-container-inflatable .m-col-l-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 98e7ff04..1dff3603 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -148,7 +148,7 @@ body { margin: 0; }
 .m-pull-t-11 { right: calc(11 * 100% / 12); }
 @media screen and (min-width: 576px) {
   .m-container { width: 560px; }
-  #m-container-inflatable .m-col-s-10 .m-container-inflate {
+  .m-container-inflatable .m-col-s-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -228,7 +228,7 @@ body { margin: 0; }
 }
 @media screen and (min-width: 768px) {
   .m-container { width: 750px; }
-  #m-container-inflatable .m-col-m-10 .m-container-inflate {
+  .m-container-inflatable .m-col-m-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -308,7 +308,7 @@ body { margin: 0; }
 }
 @media screen and (min-width: 992px) {
   .m-container { width: 960px; }
-  #m-container-inflatable .m-col-l-10 .m-container-inflate {
+  .m-container-inflatable .m-col-l-10 .m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
@@ -1416,52 +1416,52 @@ article section:target figure.m-code-figure {
     border-right-width: 0;
   }
 }
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
-#m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
-#m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
+.m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
+.m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
+.m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
+.m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
   margin-left: -1rem;
   margin-right: -1rem;
 }
 @media screen and (min-width: 576px) {
-  #m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
-  #m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
+  .m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
+  .m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
 }
 @media screen and (min-width: 768px) {
-  #m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
-  #m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
+  .m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
+  .m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
 }
 @media screen and (min-width: 992px) {
-  #m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
-  #m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
+  .m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
+  .m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
     margin-right: -10%;
   }
 }
-#m-container-inflatable section:target > .m-note,
-#m-container-inflatable section:target > .m-frame,
-#m-container-inflatable section:target > .m-block,
-#m-container-inflatable section:target > pre.m-code,
-#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-#m-container-inflatable section:target section > .m-note,
-#m-container-inflatable section:target section > .m-frame,
-#m-container-inflatable section:target section > .m-block,
-#m-container-inflatable section:target section > pre.m-code,
-#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+.m-container-inflatable section:target > .m-note,
+.m-container-inflatable section:target > .m-frame,
+.m-container-inflatable section:target > .m-block,
+.m-container-inflatable section:target > pre.m-code,
+.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target section > .m-note,
+.m-container-inflatable section:target section > .m-frame,
+.m-container-inflatable section:target section > .m-block,
+.m-container-inflatable section:target section > pre.m-code,
+.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
   margin-left: -1.0rem;
   border-left-style: solid;
   border-left-width: 0.25rem;
@@ -1469,44 +1469,44 @@ article section:target figure.m-code-figure {
   border-bottom-left-radius: 0;
   padding-left: 0.75rem;
 }
-#m-container-inflatable section:target > figure.m-code-figure::before,
-#m-container-inflatable section:target section > figure.m-code-figure::before {
+.m-container-inflatable section:target > figure.m-code-figure::before,
+.m-container-inflatable section:target section > figure.m-code-figure::before {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
-#m-container-inflatable section:target > pre.m-code,
-#m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-#m-container-inflatable section:target section > pre.m-code,
-#m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
+.m-container-inflatable section:target > pre.m-code,
+.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target section > pre.m-code,
+.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child {
   border-color: #f7e3db;
 }
-#m-container-inflatable section:target > .m-note.m-default,
-#m-container-inflatable section:target section > .m-note.m-default {
+.m-container-inflatable section:target > .m-note.m-default,
+.m-container-inflatable section:target section > .m-note.m-default {
   border-left-color: #f7e3db;
 }
-#m-container-inflatable section:target > .m-note.m-primary,
-#m-container-inflatable section:target section > .m-note.m-primary {
+.m-container-inflatable section:target > .m-note.m-primary,
+.m-container-inflatable section:target section > .m-note.m-primary {
   border-left-color: #cb4b16;
 }
-#m-container-inflatable section:target > .m-note.m-success,
-#m-container-inflatable section:target section > .m-note.m-success {
+.m-container-inflatable section:target > .m-note.m-success,
+.m-container-inflatable section:target section > .m-note.m-success {
   border-left-color: #31c25d;
 }
-#m-container-inflatable section:target > .m-note.m-warning,
-#m-container-inflatable section:target section > .m-note.m-warning {
+.m-container-inflatable section:target > .m-note.m-warning,
+.m-container-inflatable section:target section > .m-note.m-warning {
   border-left-color: #c7cf2f;
 }
-#m-container-inflatable section:target > .m-note.m-danger,
-#m-container-inflatable section:target section > .m-note.m-danger {
+.m-container-inflatable section:target > .m-note.m-danger,
+.m-container-inflatable section:target section > .m-note.m-danger {
   border-left-color: #f60000;
 }
-#m-container-inflatable section:target > .m-note.m-info,
-#m-container-inflatable section:target section > .m-note.m-info {
+.m-container-inflatable section:target > .m-note.m-info,
+.m-container-inflatable section:target section > .m-note.m-info {
   border-left-color: #2e7dc5;
 }
-#m-container-inflatable section:target > .m-note.m-dim,
-#m-container-inflatable section:target section > .m-note.m-dim {
+.m-container-inflatable section:target > .m-note.m-dim,
+.m-container-inflatable section:target section > .m-note.m-dim {
   border-left-color: #bdbdbd;
 }
 pre.m-code span.hll {
diff --git a/doc/css/grid.rst b/doc/css/grid.rst
index a065365e..200a80e6 100644
--- a/doc/css/grid.rst
+++ b/doc/css/grid.rst
@@ -334,12 +334,12 @@ use the full available width --- for example to show big pictures or to fit
 many things next to each other.
 
 If you have a ten-column content area with one column space on each side, mark
-your :css:`.m-container` element with :css:`#m-container-inflatable` and then
+your :css:`.m-container` element with :css:`.m-container-inflatable` and then
 put your nested content in elements marked with :css:`.m-container-inflate`.
 
 .. code:: html
 
-    <div class="m-container" id="m-container-inflatable">
+    <div class="m-container m-container-inflatable">
       <div class="m-row">
         <div class="m-col-l-10 m-push-l-1">
           <div class="m-container-inflate">.m-container-inflate</div>
diff --git a/doc/css/page-layout.rst b/doc/css/page-layout.rst
index 70db13d8..14dfa522 100644
--- a/doc/css/page-layout.rst
+++ b/doc/css/page-layout.rst
@@ -519,7 +519,7 @@ Date and author name is rendered on top left and right in front of the cover
 image, the heading (and optional subheading) as well. By default, the text on
 top of the cover image is rendered white, add an additional :css:`.m-inverted`
 CSS class to have it black. The article contents are marked with
-:css:`#m-container-inflatable` to make
+:css:`.m-container-inflatable` to make
 `inflated nested layouts <{filename}/css/grid.rst#inflatable-nested-grid>`_
 such as `image grid <{filename}/css/components.rst#image-grid>`_ possible.
 
@@ -555,7 +555,7 @@ such as `image grid <{filename}/css/components.rst#image-grid>`_ possible.
           </div>
         </div>
       </header>
-      <div class="m-container" id="m-container-inflatable">
+      <div class="m-container m-container-inflatable">
         <div class="m-row">
           <div class="m-col-m-10 m-push-m-1 m-nopady">
           Article contents. Pellentesque est neque, aliquet nec consectetur in,
diff --git a/pelican-theme/templates/article.html b/pelican-theme/templates/article.html
index 0a00ee67..9802f7a4 100644
--- a/pelican-theme/templates/article.html
+++ b/pelican-theme/templates/article.html
@@ -57,7 +57,7 @@
         </div>
       </div>
     </header>
-    <div class="m-container" id="m-container-inflatable">
+    <div class="m-container m-container-inflatable">
       <div class="m-row">
         <div class="m-col-m-10 m-push-m-1 m-nopady">
 <!-- content -->
diff --git a/pelican-theme/templates/page.html b/pelican-theme/templates/page.html
index 691bfa1c..a1f3d169 100644
--- a/pelican-theme/templates/page.html
+++ b/pelican-theme/templates/page.html
@@ -53,7 +53,7 @@
     </div>
   </div>
   {% endif %}
-  <div class="m-container" id="m-container-inflatable">
+  <div class="m-container m-container-inflatable">
     <div class="m-row">
       <div class="m-col-l-10 m-push-l-1">
         {% if not page.landing %}
-- 
2.30.2