css: get rid of combined margin overrides for inflatable content.

In particular, these were treated by the browser as having more priority
than the :last-child selectors removing the bottom padding on elements
on bottom of sections / page.

Hopefully I didn't break anything else with this :D

diff --git a/css/m-components.css b/css/m-components.css
index 6b1f79d342b4a2b71ca09140d7987823a24064df..8b4f10f114abebd85dad678a207ec3270a7dbb07 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -1035,25 +1035,29 @@ article section:target figure.m-code-figure {
 #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: 0 -1rem 1rem -1rem;
+  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 {
-    margin: 0 -10% 1rem -10%;
+    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 {
-    margin: 0 -10% 1rem -10%;
+    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 {
-    margin: 0 -10% 1rem -10%;
+    margin-left: -10%;
+    margin-right: -10%;
   }
 }