Added abstract shape mural

public/css/home.css

@@ -0,0 +1,93 @@
+/* Rounded border radius classes */
+.border-round-1 {
+  --border-radius: 40%;
+}
+.border-round-2 {
+  --border-radius: 75%;
+}
+.border-round-tl {
+  border-top-left-radius: var(--border-radius);
+}
+.border-round-tr {
+  border-top-right-radius: var(--border-radius);
+}
+.border-round-bl {
+  border-bottom-left-radius: var(--border-radius);
+}
+.border-round-br {
+  border-bottom-right-radius: var(--border-radius);
+}
+.border-round {
+  border-radius: var(--border-radius);
+}
+
+/* Fill color classes */
+.fill-teal {
+  --fill-color: rgba(var(--teal), 0.86);
+}
+.fill-teal:hover {
+  --fill-color: rgba(var(--teal), 0.96);
+}
+.fill-black {
+  --fill-color: rgba(var(--black), 0.86);
+}
+.fill-black:hover {
+  --fill-color: rgba(var(--black), 0.96);
+}
+.fill-lightblue {
+  --fill-color: rgba(var(--lightblue), 0.86);
+}
+.fill-lightblue:hover {
+  --fill-color: rgba(var(--lightblue), 0.96);
+}
+.fill-brown {
+  --fill-color: rgba(var(--brown), 0.86);
+}
+.fill-brown:hover {
+  --fill-color: rgba(var(--brown), 0.96);
+}
+.fill-tan {
+  --fill-color: rgba(var(--tan), 0.86);
+}
+.fill-tan:hover {
+  --fill-color: rgba(var(--tan), 0.96);
+}
+
+.fill {
+  color: var(--fill-color);
+}
+.fill-background {
+  background-color: var(--fill-color);
+}
+
+/* Shape classes */
+.diamond {
+  width: calc(100% / sqrt(2));  /* ≈ 100% / √2 (100% because square width = 1, which translates to 100%) */
+  aspect-ratio: 1 / 1;
+  transform: rotate(45deg);
+  margin: auto;
+}
+
+/* Grid Pattern */
+.home-grid {
+  display: grid;
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.home-grid svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* -md */
+@media (min-width: 992px) {
+  .home-grid {
+    padding: 0;
+  }
+}

public/css/style.css

@@ -101,6 +101,14 @@ nav {
   border: var(--borders);
 }
 
+.flex-adaptive {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.flex-1 {
+  flex: 1;
+}
+
 /* -xs */
 @media (min-width: 576px) {
   .container {
@@ -118,6 +126,9 @@ nav {
   .container {
     max-width: 960px;
   }
+  .flex-adaptive {
+    flex-direction: row;
+  }
 }
 /* -lg */
 @media (min-width: 1200px) {