From e2c078d0ebbf66c2dce69a96a3d350e804d2eacc Mon Sep 17 00:00:00 2001
From: MSzturc <MSzturc@googlemail.com>
Date: Wed, 31 Aug 2022 10:03:43 +0200
Subject: [PATCH] removed reset margin from grid by default

---
 src/transformers/gridTransformer.ts           |   4 -
 .../basicSyntax.unit.test.ts.snap             |   4 +-
 .../extendedSyntax.unit.test.ts.snap          |  40 +++----
 .../gridComponent.unit.test.ts.snap           | 100 +++++++++---------
 test/__snapshots__/template.unit.test.ts.snap |   6 +-
 5 files changed, 75 insertions(+), 79 deletions(-)

diff --git a/src/transformers/gridTransformer.ts b/src/transformers/gridTransformer.ts
index fdd01b3f..4a77657a 100644
--- a/src/transformers/gridTransformer.ts
+++ b/src/transformers/gridTransformer.ts
@@ -40,10 +40,6 @@ export class GridTransformer implements AttributeTransformer {
 				const height = this.heightOf(grid) + defaultUnit;
 				const width = this.widthOf(grid) + defaultUnit;
 
-				if (!isAbsolute) {
-					element.addClass('reset-margin');
-				}
-
 				element.addStyle('position', 'absolute');
 				element.addStyle('left', left);
 				element.addStyle('top', top);
diff --git a/test/__snapshots__/basicSyntax.unit.test.ts.snap b/test/__snapshots__/basicSyntax.unit.test.ts.snap
index 06c2b3f1..e769364b 100644
--- a/test/__snapshots__/basicSyntax.unit.test.ts.snap
+++ b/test/__snapshots__/basicSyntax.unit.test.ts.snap
@@ -79,7 +79,7 @@ Callouts support manipulation through annotations
 </div>
 	<!-- .element: style=\\"width: 20%; font-size: 24px; transform: rotate(15deg)\\" -->
 	
-	<div class=\\"reset-margin\\" style=\\"font-size: 36px; position: absolute; left: 11%; top: 68%; height: 30%; width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+	<div class=\\"\\" style=\\"font-size: 36px; position: absolute; left: 11%; top: 68%; height: 30%; width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 <div class=\\"callout callout-color8\\">
 <div class=\\"callout-title\\">
@@ -102,7 +102,7 @@ Here is an Example for an Callout in a Slide. Callouts support dark and white ba
 </div>
 	</div>
 	
-	<div class=\\"has-light-background reset-margin\\" style=\\"font-size: 36px; background-color: white; padding: 50px; box-sizing: border-box; position: absolute; left: 50%; top: 0%; height: 100%; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+	<div class=\\"has-light-background\\" style=\\"font-size: 36px; background-color: white; padding: 50px; box-sizing: border-box; position: absolute; left: 50%; top: 0%; height: 100%; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 <div class=\\"callout callout-color9\\">
 <div class=\\"callout-title\\">
diff --git a/test/__snapshots__/extendedSyntax.unit.test.ts.snap b/test/__snapshots__/extendedSyntax.unit.test.ts.snap
index a29098fe..815b499e 100644
--- a/test/__snapshots__/extendedSyntax.unit.test.ts.snap
+++ b/test/__snapshots__/extendedSyntax.unit.test.ts.snap
@@ -9,45 +9,45 @@ exports[`Advanced Slides Feature >  Show Debug Grid 1`] = `
 This slide shows the debug view feature
 
 
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 10%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 10%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 20%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 20%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 30%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 30%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 40%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 40%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 50%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 50%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 60%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 60%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 70%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 70%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 80%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 80%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 90%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 90%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 10%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 10%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 20%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 20%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 30%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 30%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 40%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 40%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 50%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 50%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 60%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 60%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 70%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 70%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 80%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 80%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
-<div class=\\"reset-margin\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 90%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thin dotted blue; box-sizing: border-box; position: absolute; left: 90%; top: 0%; height: 100%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 </div>
 </div>"
 `;
diff --git a/test/__snapshots__/gridComponent.unit.test.ts.snap b/test/__snapshots__/gridComponent.unit.test.ts.snap
index 2d263f32..a87fe76a 100644
--- a/test/__snapshots__/gridComponent.unit.test.ts.snap
+++ b/test/__snapshots__/gridComponent.unit.test.ts.snap
@@ -4,7 +4,7 @@ exports[`Grid Component > Attributes > Alignment > Stretch > Col 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"reset-margin stretch-column\\" style=\\"position: absolute; left: 0%; top: 45%; height: 55%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly\\" align=\\"stretch\\">
+<div class=\\"stretch-column\\" style=\\"position: absolute; left: 0%; top: 45%; height: 55%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly\\" align=\\"stretch\\">
 
 	![](https://picsum.photos/id/978/150/150)
 	![](https://picsum.photos/id/978/150/150)
@@ -16,7 +16,7 @@ exports[`Grid Component > Attributes > Alignment > Stretch > Row 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"reset-margin stretch-row flex-even\\" style=\\"position: absolute; left: 0%; top: 0%; height: 45%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly\\" align=\\"stretch\\">
+<div class=\\"stretch-row flex-even\\" style=\\"position: absolute; left: 0%; top: 0%; height: 45%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly\\" align=\\"stretch\\">
 
 	![](https://picsum.photos/id/978/150/150)
 	![](https://picsum.photos/id/978/150/150)
@@ -29,7 +29,7 @@ exports[`Grid Component > Attributes > Alignment 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin flex-even\\" style=\\"background-color: #EEB73F; padding: 0 50px; box-sizing: border-box; position: absolute; left: 0%; top: 30%; height: 70%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly\\" align=\\"left\\">
+<div class=\\"has-light-background flex-even\\" style=\\"background-color: #EEB73F; padding: 0 50px; box-sizing: border-box; position: absolute; left: 0%; top: 30%; height: 70%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly\\" align=\\"left\\">
 
 <img src=\\"https://picsum.photos/id/978/150/200\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/200\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -42,7 +42,7 @@ exports[`Grid Component > Attributes > Alignment 2`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin\\" style=\\"background-color: #EEB73F; padding: 0 50px; box-sizing: border-box; position: absolute; left: 0%; top: 30%; height: 70%; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly\\" align=\\"left\\">
+<div class=\\"has-light-background\\" style=\\"background-color: #EEB73F; padding: 0 50px; box-sizing: border-box; position: absolute; left: 0%; top: 30%; height: 70%; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly\\" align=\\"left\\">
 
 <img src=\\"https://picsum.photos/id/978/150/200\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/200\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -55,7 +55,7 @@ exports[`Grid Component > Attributes > Alignment 3`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin flex-even\\" style=\\"background-color: #EEB73F; padding: 0 50px; box-sizing: border-box; position: absolute; left: 0%; top: 30%; height: 70%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly\\" align=\\"right\\">
+<div class=\\"has-light-background flex-even\\" style=\\"background-color: #EEB73F; padding: 0 50px; box-sizing: border-box; position: absolute; left: 0%; top: 30%; height: 70%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly\\" align=\\"right\\">
 
 <img src=\\"https://picsum.photos/id/978/150/200\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/200\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -68,7 +68,7 @@ exports[`Grid Component > Attributes > Alignment 4`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin\\" style=\\"background-color: #EEB73F; padding: 0 50px; box-sizing: border-box; position: absolute; left: 0%; top: 30%; height: 70%; width: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-evenly\\" align=\\"right\\">
+<div class=\\"has-light-background\\" style=\\"background-color: #EEB73F; padding: 0 50px; box-sizing: border-box; position: absolute; left: 0%; top: 30%; height: 70%; width: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-evenly\\" align=\\"right\\">
 
 <img src=\\"https://picsum.photos/id/978/150/200\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/200\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -81,7 +81,7 @@ exports[`Grid Component > Attributes > Alignment 5`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start\\" align=\\"top\\">
+<div class=\\"has-light-background\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start\\" align=\\"top\\">
 
 <img src=\\"https://picsum.photos/id/978/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -94,7 +94,7 @@ exports[`Grid Component > Attributes > Alignment 6`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin flex-even\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-evenly\\" align=\\"top\\">
+<div class=\\"has-light-background flex-even\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-evenly\\" align=\\"top\\">
 
 <img src=\\"https://picsum.photos/id/978/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -107,7 +107,7 @@ exports[`Grid Component > Attributes > Alignment 7`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end\\" align=\\"bottom\\">
+<div class=\\"has-light-background\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end\\" align=\\"bottom\\">
 
 <img src=\\"https://picsum.photos/id/978/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -120,7 +120,7 @@ exports[`Grid Component > Attributes > Alignment 8`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin flex-even\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-evenly\\" align=\\"bottom\\">
+<div class=\\"has-light-background flex-even\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-evenly\\" align=\\"bottom\\">
 
 <img src=\\"https://picsum.photos/id/978/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -133,7 +133,7 @@ exports[`Grid Component > Attributes > Alignment 9`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" align=\\"center\\">
+<div class=\\"has-light-background\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" align=\\"center\\">
 
 <img src=\\"https://picsum.photos/id/978/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -146,7 +146,7 @@ exports[`Grid Component > Attributes > Alignment 10`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin flex-even\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center\\" align=\\"center\\">
+<div class=\\"has-light-background flex-even\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center\\" align=\\"center\\">
 
 <img src=\\"https://picsum.photos/id/978/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -159,7 +159,7 @@ exports[`Grid Component > Attributes > Alignment 11`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start\\" align=\\"left\\">
+<div class=\\"has-light-background\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start\\" align=\\"left\\">
 
 <img src=\\"https://picsum.photos/id/978/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -172,7 +172,7 @@ exports[`Grid Component > Attributes > Alignment 12`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin flex-even\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-evenly\\" align=\\"left\\">
+<div class=\\"has-light-background flex-even\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-evenly\\" align=\\"left\\">
 
 <img src=\\"https://picsum.photos/id/978/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -185,7 +185,7 @@ exports[`Grid Component > Attributes > Alignment 13`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start\\" align=\\"right\\">
+<div class=\\"has-light-background\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start\\" align=\\"right\\">
 
 <img src=\\"https://picsum.photos/id/978/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -198,7 +198,7 @@ exports[`Grid Component > Attributes > Alignment 14`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin flex-even\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-evenly\\" align=\\"right\\">
+<div class=\\"has-light-background flex-even\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-evenly\\" align=\\"right\\">
 
 <img src=\\"https://picsum.photos/id/978/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -211,7 +211,7 @@ exports[`Grid Component > Attributes > Alignment 15`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end\\" align=\\"right\\">
+<div class=\\"has-light-background\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end\\" align=\\"right\\">
 
 <img src=\\"https://picsum.photos/id/978/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -224,7 +224,7 @@ exports[`Grid Component > Attributes > Alignment 16`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin flex-even\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-evenly\\" align=\\"right\\">
+<div class=\\"has-light-background flex-even\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-evenly\\" align=\\"right\\">
 
 <img src=\\"https://picsum.photos/id/978/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -237,7 +237,7 @@ exports[`Grid Component > Attributes > Alignment 17`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end\\" align=\\"left\\">
+<div class=\\"has-light-background\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end\\" align=\\"left\\">
 
 <img src=\\"https://picsum.photos/id/978/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -250,7 +250,7 @@ exports[`Grid Component > Attributes > Alignment 18`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin flex-even\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-evenly\\" align=\\"left\\">
+<div class=\\"has-light-background flex-even\\" style=\\"background-color: #EEB73F; padding: 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-evenly\\" align=\\"left\\">
 
 <img src=\\"https://picsum.photos/id/978/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 <img src=\\"https://picsum.photos/id/996/150/150\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -263,17 +263,17 @@ exports[`Grid Component > Attributes > Background 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin\\" style=\\"background-color: orange; position: absolute; left: 45%; top: 0%; height: 50%; width: 55%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"has-light-background\\" style=\\"background-color: orange; position: absolute; left: 45%; top: 0%; height: 50%; width: 55%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Make
 </div>
 
-<div class=\\"has-dark-background reset-margin\\" style=\\"background-color: rgb(0,0,0); position: absolute; left: 0%; top: 50%; height: 50%; width: 55%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"has-dark-background\\" style=\\"background-color: rgb(0,0,0); position: absolute; left: 0%; top: 50%; height: 50%; width: 55%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Noise
 </div>
 
-<div class=\\"has-dark-background reset-margin\\" style=\\"background-color: green; transform: rotate(-15deg); position: absolute; left: 37.5%; top: 40%; height: 20%; width: 25%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"has-dark-background\\" style=\\"background-color: green; transform: rotate(-15deg); position: absolute; left: 37.5%; top: 40%; height: 20%; width: 25%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### some
 </div>
@@ -284,17 +284,17 @@ exports[`Grid Component > Attributes > Border 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"reset-margin\\" style=\\"border: thick dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 37.5%; height: 25%; width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: thick dotted blue; box-sizing: border-box; position: absolute; left: 0%; top: 37.5%; height: 25%; width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 thick dotted blue
 </div>
 
-<div class=\\"reset-margin\\" style=\\"border: 4px solid white; box-sizing: border-box; position: absolute; left: 35%; top: 37.5%; height: 25%; width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: 4px solid white; box-sizing: border-box; position: absolute; left: 35%; top: 37.5%; height: 25%; width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 20px solid white
 </div>
 
-<div class=\\"reset-margin\\" style=\\"border: medium dashed red; box-sizing: border-box; position: absolute; left: 70%; top: 37.5%; height: 25%; width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"border: medium dashed red; box-sizing: border-box; position: absolute; left: 70%; top: 37.5%; height: 25%; width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 thick dotted blue
 </div>
@@ -305,12 +305,12 @@ exports[`Grid Component > Attributes > Filter 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-dark-background reset-margin\\" style=\\"background-color: #B565A7; filter: blur(10px); position: absolute; left: 5%; top: 15%; height: 25%; width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"has-dark-background\\" style=\\"background-color: #B565A7; filter: blur(10px); position: absolute; left: 5%; top: 15%; height: 25%; width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 Text is too blurry
 </div>
 
-<div class=\\"has-light-background reset-margin\\" style=\\"background-color: white; filter: grayscale(); position: absolute; left: 38%; top: 25%; height: 50%; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"has-light-background\\" style=\\"background-color: white; filter: grayscale(); position: absolute; left: 38%; top: 25%; height: 50%; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 <img src=\\"/documentation/Image.jpg\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
 </div>
@@ -321,12 +321,12 @@ exports[`Grid Component > Attributes > Padding 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-light-background reset-margin\\" style=\\"background-color: orange; padding: 0 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 50%; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"has-light-background\\" style=\\"background-color: orange; padding: 0 50px; box-sizing: border-box; position: absolute; left: 0%; top: 0%; height: 50%; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ###### Lorem Ipsum wasnt simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book here there
 </div>
 
-<div class=\\"has-light-background reset-margin\\" style=\\"background-color: orange; padding: 20px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; height: 50%; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"has-light-background\\" style=\\"background-color: orange; padding: 20px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; height: 50%; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 <img src=\\"/documentation/Image.jpg\\" alt=\\"\\" style=\\"width: 800px; object-fit: fill\\">
 </div>
@@ -337,19 +337,19 @@ exports[`Grid Component > Attributes > Padding 2`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-dark-background reset-margin\\" style=\\"background-color: red; position: absolute; left: 5%; top: 10%; height: 55%; width: 60%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"has-dark-background\\" style=\\"background-color: red; position: absolute; left: 5%; top: 10%; height: 55%; width: 60%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Fragments:
 - &shy;<!-- .element: class=\\"fragment\\" data-fragment-index=\\"1\\" -->Right
 - &shy;<!-- .element: class=\\"fragment\\" data-fragment-index=\\"2\\" -->Bottom
 </div>
 
-<div class=\\"has-dark-background fragment reset-margin\\" style=\\"background-color: green; position: absolute; left: 70%; top: 10%; height: 55%; width: 25%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" data-fragment-index=\\"1\\">
+<div class=\\"has-dark-background fragment\\" style=\\"background-color: green; position: absolute; left: 70%; top: 10%; height: 55%; width: 25%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" data-fragment-index=\\"1\\">
 
 Right Grid
 </div>
 
-<div class=\\"has-light-background fragment reset-margin\\" style=\\"background-color: gray; position: absolute; left: 5%; top: 70%; height: 20%; width: 90%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" data-fragment-index=\\"2\\">
+<div class=\\"has-light-background fragment\\" style=\\"background-color: gray; position: absolute; left: 5%; top: 70%; height: 20%; width: 90%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" data-fragment-index=\\"2\\">
 
 Bottom Grid
 </div>
@@ -360,12 +360,12 @@ exports[`Grid Component > Attributes > Rotate 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"has-dark-background reset-margin\\" style=\\"background-color: #B565A7; transform: rotate(-10deg); position: absolute; left: 35%; top: 0%; height: 25%; width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"has-dark-background\\" style=\\"background-color: #B565A7; transform: rotate(-10deg); position: absolute; left: 35%; top: 0%; height: 25%; width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 Hello
 </div>
 
-<div class=\\"has-dark-background reset-margin\\" style=\\"background-color: #D65076; transform: rotate(40deg); position: absolute; left: 60%; top: 75%; height: 25%; width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"has-dark-background\\" style=\\"background-color: #D65076; transform: rotate(40deg); position: absolute; left: 60%; top: 75%; height: 25%; width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 World!
 </div>
@@ -376,17 +376,17 @@ exports[`Grid Component > Basic Syntax 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"reset-margin\\" style=\\"background-color: coral; position: absolute; left: 5%; top: 10%; height: 55%; width: 60%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"background-color: coral; position: absolute; left: 5%; top: 10%; height: 55%; width: 60%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Left
 </div>
 
-<div class=\\"reset-margin\\" style=\\"background-color: coral; position: absolute; left: 70%; top: 10%; height: 55%; width: 25%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"background-color: coral; position: absolute; left: 70%; top: 10%; height: 55%; width: 25%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Right
 </div>
 
-<div class=\\"reset-margin\\" style=\\"background-color: coral; position: absolute; left: 5%; top: 70%; height: 20%; width: 90%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"background-color: coral; position: absolute; left: 5%; top: 70%; height: 20%; width: 90%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Bottom
 </div>
@@ -397,17 +397,17 @@ exports[`Grid Component > Basic Syntax 2`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"reset-margin\\" style=\\"background-color: coral; position: absolute; left: 5%; top: 10%; height: 55%; width: 60%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"background-color: coral; position: absolute; left: 5%; top: 10%; height: 55%; width: 60%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Left
 </div>
 
-<div class=\\"reset-margin\\" style=\\"background-color: coral; position: absolute; left: 70%; top: 10%; height: 55%; width: 25%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"background-color: coral; position: absolute; left: 70%; top: 10%; height: 55%; width: 25%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Right
 </div>
 
-<div class=\\"reset-margin\\" style=\\"background-color: coral; position: absolute; left: 5%; top: 70%; height: 20%; width: 90%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"background-color: coral; position: absolute; left: 5%; top: 70%; height: 20%; width: 90%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Bottom
 </div>
@@ -418,7 +418,7 @@ exports[`Grid Component > Column Flow 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"reset-margin\\" style=\\"background-color: coral; position: absolute; left: 30%; top: 0%; height: 100%; width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"background-color: coral; position: absolute; left: 30%; top: 0%; height: 100%; width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Lorem
 <img src=\\"/documentation/Image.jpg\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
@@ -431,22 +431,22 @@ exports[`Grid Component > Position Coordinates 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"reset-margin\\" style=\\"background-color: orange; position: absolute; left: 10%; top: 15%; height: 50%; width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"background-color: orange; position: absolute; left: 10%; top: 15%; height: 50%; width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Positive X, Y
 </div>
 
-<div class=\\"reset-margin\\" style=\\"background-color: red; position: absolute; left: 30%; top: 40%; height: 30%; width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"background-color: red; position: absolute; left: 30%; top: 40%; height: 30%; width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Negative X, Positive Y
 </div>
 
-<div class=\\"reset-margin\\" style=\\"background-color: blue; position: absolute; left: 55%; top: 40%; height: 40%; width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"background-color: blue; position: absolute; left: 55%; top: 40%; height: 40%; width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Negative X, Y
 </div>
 
-<div class=\\"reset-margin\\" style=\\"background-color: green; position: absolute; left: 0%; top: 85%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"background-color: green; position: absolute; left: 0%; top: 85%; height: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Positive X, Negative Y
 </div>
@@ -457,17 +457,17 @@ exports[`Grid Component > Position by Name 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"reset-margin\\" style=\\"background-color: red; position: absolute; left: 0%; top: 0%; height: 30%; width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"background-color: red; position: absolute; left: 0%; top: 0%; height: 30%; width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Top Left
 </div>
 
-<div class=\\"reset-margin\\" style=\\"background-color: green; position: absolute; left: 50%; top: 0%; height: 100%; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"background-color: green; position: absolute; left: 50%; top: 0%; height: 100%; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Right Default Size
 </div>
 
-<div class=\\"reset-margin\\" style=\\"background-color: coral; position: absolute; left: 10%; top: 70%; height: 30%; width: 80%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+<div class=\\"\\" style=\\"background-color: coral; position: absolute; left: 10%; top: 70%; height: 30%; width: 80%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 ### Bottom
 </div>
@@ -478,7 +478,7 @@ exports[`Grid Component > Row Flow 1`] = `
 "<!-- .slide: class=\\"drop\\" -->
 <div class=\\"\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
-<div class=\\"reset-margin flex-even\\" style=\\"background-color: coral; position: absolute; left: 0%; top: 30%; height: 40%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center\\" >
+<div class=\\"flex-even\\" style=\\"background-color: coral; position: absolute; left: 0%; top: 30%; height: 40%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center\\" >
 
 ### Lorem
 <img src=\\"/documentation/Image.jpg\\" alt=\\"\\" style=\\"object-fit: scale-down\\">
diff --git a/test/__snapshots__/template.unit.test.ts.snap b/test/__snapshots__/template.unit.test.ts.snap
index 4e6a10a2..035067db 100644
--- a/test/__snapshots__/template.unit.test.ts.snap
+++ b/test/__snapshots__/template.unit.test.ts.snap
@@ -19,7 +19,7 @@ exports[`Template with invisible variable not set 1`] = `
 
 # MyContent
 
-		# After<div class=\\"reset-margin\\" style=\\"position: absolute; left: 0%; top: 94%; height: 6%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+		# After<div class=\\"\\" style=\\"position: absolute; left: 0%; top: 94%; height: 6%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 		
 		</div>
@@ -32,7 +32,7 @@ exports[`Template with variable not set 1`] = `
 
 # MyContent
 
-		# After<div class=\\"reset-margin\\" style=\\"position: absolute; left: 0%; top: 94%; height: 6%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+		# After<div class=\\"\\" style=\\"position: absolute; left: 0%; top: 94%; height: 6%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 		<% footer %>
 		</div>
@@ -48,7 +48,7 @@ exports[`Template with variable set 1`] = `
 
 	
 
-		# After<div class=\\"reset-margin\\" style=\\"position: absolute; left: 0%; top: 94%; height: 6%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
+		# After<div class=\\"\\" style=\\"position: absolute; left: 0%; top: 94%; height: 6%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
 		<div class=\\"block\\">