rework and restyle flex and grid chapters

Author: culas

chapters/chapter3.css

@@ -1,16 +1,20 @@
 .flex-example-parent-horizontal {
     display: flex;
     width: 100%;
+    padding: .5rem;
+    gap: .5rem;
+    border: 2px solid var(--zuehlke-gray);
     background-color: var(--zuehlke-bright-gray);
+    font-size: .75em;
 }
 
 .flex-example-parent-horizontal-medium {
-    height: 100px;
+    height: 120px;
 }
 
 .flex-example-parent-horizontal > div {
     background-color: var(--zuehlke-bright-blue);
-    border: 4px solid var(--zuehlke-purple);
+    border: 2px solid var(--zuehlke-blue);
     padding: 0.5rem;
 }
 

chapters/chapter4.css

@@ -0,0 +1,22 @@
+.grid-example {
+    display: grid;
+    padding: .5rem;
+    grid-gap: .5rem;
+    border: 2px solid var(--zuehlke-gray);
+    background-color: var(--zuehlke-bright-gray);
+    font-size: .75em;
+}
+
+.grid-example > div {
+    background-color: var(--zuehlke-bright-blue);
+    border: 2px solid var(--zuehlke-blue);
+    padding: 0.5rem;
+}
+
+.grid-example .fragment {
+    display: none;
+
+    &.visible {
+        display: inherit;
+    }
+}