From b795c44c574a191ea97c5b6d075802270c345ff2 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Mon, 11 Sep 2017 16:08:39 +0200
Subject: [PATCH] css: make image grid inflated the same way as notes, blocks
 and frames.

Looks better on mobile, as the images span the full width then.
Unfortunately this required a hack that I'm not really proud of.
---
 css/m-components.css | 23 +++++++++++++++++++++++
 css/m-grid.css       |  4 ++++
 2 files changed, 27 insertions(+)

diff --git a/css/m-components.css b/css/m-components.css
index 65f7a0d5..ead162c5 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -898,6 +898,29 @@ figure.m-figure.m-fullwidth img {
   margin: 0 -1rem 1rem -1rem;
 }
 
+#m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid {
+  margin: 0 -1.25rem 1rem -1.25rem;
+}
+@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%;
+  }
+}
+@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%;
+  }
+}
+@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%;
+  }
+}
+
 /* 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,
diff --git a/css/m-grid.css b/css/m-grid.css
index 07c91ef8..fc0efe3c 100644
--- a/css/m-grid.css
+++ b/css/m-grid.css
@@ -414,4 +414,8 @@ body {
   }
 }
 
+#m-container-inflatable {
+  overflow-x: hidden;  /* needed by image grid :( */
+}
+
 /* kate: indent-width 2; */
-- 
2.30.2