feat(15): initial styling footer-controls section

15-multi-step-form/src/main/resources/public/out.css

@@ -559,10 +559,6 @@ video {
   height: 2.5rem;
 }
 
-.h-20 {
-  height: 5rem;
-}
-
 .h-24 {
   height: 6rem;
 }
@@ -603,6 +599,10 @@ video {
   flex-grow: 1;
 }
 
+.grid-cols-\[repeat\(4\2c _auto\)\] {
+  grid-template-columns: repeat(4, auto);
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -615,6 +615,10 @@ video {
   place-content: center;
 }
 
+.content-center {
+  align-content: center;
+}
+
 .items-center {
   align-items: center;
 }
@@ -678,6 +682,11 @@ video {
   padding-right: 1.5rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -688,6 +697,19 @@ video {
   line-height: 2.25rem;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -735,11 +757,17 @@ html {
   font-style: normal;
 }
 
-div, p, button, ol, li, summary {
-  outline: 1px solid red;
-}
+/* div, p, button, ol, li, summary, article { */
+
+/*     outline: 1px solid red; */
+
+/* } */
 
 @media (min-width: 768px) {
+  .md\:row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+
   .md\:mt-0 {
     margin-top: 0px;
   }
@@ -748,15 +776,91 @@ div, p, button, ol, li, summary {
     display: flex;
   }
 
-  .md\:h-\[570px\] {
-    height: 570px;
+  .md\:grid {
+    display: grid;
   }
 
-  .md\:w-\[280px\] {
-    width: 280px;
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:h-\[568px\] {
+    height: 568px;
+  }
+
+  .md\:h-desktop-form {
+    height: 38rem;
+  }
+
+  .md\:h-full {
+    height: 100%;
+  }
+
+  .md\:w-\[274px\] {
+    width: 274px;
+  }
+
+  .md\:w-desktop-form {
+    width: 60rem;
+  }
+
+  .md\:grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .md\:grid-cols-\[auto_1fr\] {
+    grid-template-columns: auto 1fr;
+  }
+
+  .md\:grid-rows-\[repeat\(4\2c _auto\)\] {
+    grid-template-rows: repeat(4, auto);
+  }
+
+  .md\:flex-col {
+    flex-direction: column;
+  }
+
+  .md\:content-start {
+    align-content: flex-start;
+  }
+
+  .md\:gap-x-2 {
+    -moz-column-gap: 0.5rem;
+         column-gap: 0.5rem;
+  }
+
+  .md\:gap-y-7 {
+    row-gap: 1.75rem;
+  }
+
+  .md\:gap-x-3 {
+    -moz-column-gap: 0.75rem;
+         column-gap: 0.75rem;
+  }
+
+  .md\:gap-x-4 {
+    -moz-column-gap: 1rem;
+         column-gap: 1rem;
+  }
+
+  .md\:bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }
 
   .md\:bg-sidebar-desktop {
     background-image: url("images/bg-sidebar-desktop.svg");
   }
+
+  .md\:p-10 {
+    padding: 2.5rem;
+  }
+
+  .md\:p-5 {
+    padding: 1.25rem;
+  }
 }