From 6cf7bc685f4a6d35e01dcee4f9c2f2e6c4c510e8 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Mon, 18 Jan 2021 21:17:35 +0100
Subject: [PATCH] Using Grid for displaying different types of shadows

---
 components/02_Styles/boxShadow/boxShadow.hbs | 48 ++++++++++++++------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/components/02_Styles/boxShadow/boxShadow.hbs b/components/02_Styles/boxShadow/boxShadow.hbs
index cb66e0f..1b34914 100644
--- a/components/02_Styles/boxShadow/boxShadow.hbs
+++ b/components/02_Styles/boxShadow/boxShadow.hbs
@@ -1,18 +1,38 @@
-<div class="RV-BoxShadow RV-BoxShadow--simple" style="width: 300px; height: 300px; margin: 20px 0 0 20px;">
-    <img src="https://via.placeholder.com/300/7242af"/>
-</div>
+<div class="RV-FlexGrid RV-FlexGrid--fixedSize RV-Spacing__Inner--medium">
+		
+	<div class="RV-FlexGrid__Item">
+		<div class="RV-BoxShadow RV-BoxShadow--simple">
+			<img src="https://via.placeholder.com/300/7242af"/>
+		</div>
+	</div>
 
-<div class="RV-BoxShadow RV-BoxShadow--liftedCorners" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
-    <img src="https://via.placeholder.com/300/7242af"/>
-</div>
-<div class="RV-BoxShadow RV-BoxShadow--levitating" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
-    <img src="https://via.placeholder.com/300/7242af"/>
-</div>
+	<div class="RV-FlexGrid__Item">
+		<div class="RV-BoxShadow RV-BoxShadow--liftedCorners">
+			<img src="https://via.placeholder.com/300/7242af"/>
+		</div>
+	</div>
+	
+	<div class="RV-FlexGrid__Item">
+		<div class="RV-BoxShadow RV-BoxShadow--levitating">
+			<img src="https://via.placeholder.com/300/7242af"/>
+		</div>
+	</div>
 
-<div class="RV-BoxShadow RV-BoxShadow--stacked" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
-    <img src="https://via.placeholder.com/300/7242af"/>
-</div>
+	<div class="RV-FlexGrid__Item">
+		<div class="RV-BoxShadow RV-BoxShadow--stacked">
+			<img src="https://via.placeholder.com/300/7242af"/>
+		</div>
+	</div>
 
-<div class="RV-BoxShadow RV-BoxShadow--drop" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
-    <img src="https://via.placeholder.com/300/7242af"/>
+	<div class="RV-FlexGrid__Item">
+		<div class="RV-BoxShadow RV-BoxShadow--drop">
+			<img src="https://via.placeholder.com/300/7242af"/>
+		</div>
+	</div>
+
+	<div class="RV-FlexGrid__Item">
+		<div class="RV-BoxShadow RV-BoxShadow--solid">
+			<img src="https://via.placeholder.com/300/7242af"/>
+		</div>
+	</div>
 </div>
\ No newline at end of file