Moved image_grid.css content to global.css and use unique class names for imagegrid style classes, removed id for div

view/global.css

@@ -680,3 +680,33 @@ span.required {
 audio {
   width: 100%;
 }
+
+/**
+ * Image grid settings START
+ **/
+.imagegrid-row {
+	display: -ms-flexbox; /* IE10 */
+	display: flex;
+	-ms-flex-wrap: wrap; /* IE10 */
+	flex-wrap: wrap;
+	padding: 0 4px;
+	box-sizing: border-box;
+}
+
+/* Create four equal columns that sits next to each other */
+.imagegrid-column {
+	-ms-flex: 50%; /* IE10 */
+	flex: 50%;
+	max-width: 50%;
+	padding: 0 4px;
+	box-sizing: border-box;
+}
+
+.imagegrid-column img {
+	margin-top: 8px;
+	vertical-align: middle;
+	width: 100%;
+}
+/**
+ * Image grid settings END
+ **/

view/templates/content/image_grid.tpl

@@ -1,13 +1,11 @@
-<link rel="stylesheet" href="view/theme/frio/css/image_grid.css" type="text/css" media="screen"/>
+<div class="imagegrid-row">
-
+	<div class="imagegrid-column">
-<div id="row" class="row">
+		{{foreach $columns.fc as $img}}
-	<div class="column">
+				{{include file="content/image.tpl" image=$img}}
-        {{foreach $columns.fc as $img}}
-	        	{{include file="content/image.tpl" image=$img}}
 		{{/foreach}}
 	</div>
-	<div class="column">
+	<div class="imagegrid-column">
-        {{foreach $columns.sc as $img}}
+		{{foreach $columns.sc as $img}}
 				{{include file="content/image.tpl" image=$img}}
 		{{/foreach}}
 	</div>

view/theme/frio/css/image_grid.css

@@ -1,25 +0,0 @@
-* {
-	box-sizing: border-box;
-}
-
-.row {
-	display: -ms-flexbox; /* IE10 */
-	display: flex;
-	-ms-flex-wrap: wrap; /* IE10 */
-	flex-wrap: wrap;
-	padding: 0 4px;
-}
-
-/* Create four equal columns that sits next to each other */
-.column {
-	-ms-flex: 50%; /* IE10 */
-	flex: 50%;
-	max-width: 50%;
-	padding: 0 4px;
-}
-
-.column img {
-	margin-top: 8px;
-	vertical-align: middle;
-	width: 100%;
-}