Brand section styling

resources/styles/main.css

@@ -2,9 +2,10 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
 .showcase {
-  position: relative;
-  background-image: none;
-  background-color: black;
+  display: flex;
+  height: 100vh;
+  background-image: url("../../resources/img/showcase.jpg");
+  backdrop-filter: brightness(0%);
 }
 .showcase img {
   width: 100%;
@@ -12,34 +13,45 @@
   filter: brightness(50%);
 }
 .showcase h1 {
-  position: absolute;
-  top: 30%;
-  left: 50%;
-  transform: translate(-50%, -30%);
+  text-align: center;
   font: 800 128px "Montserrat", sans-serif;
   color: #FFFFFF;
 }
 
-.group {
-  background-color: #FFFFFF;
-  padding: 10px 200px;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.group-item {
+.table {
   display: flex;
   flex-direction: column;
 }
-.group-item img {
-  max-width: 300px;
-  height: auto;
+.table .table-item {
+  margin-top: 10px;
+  display: inline-flex;
+  flex-direction: row;
 }
-.group-item p {
-  font: 400 22px "Montserrat", sans-serif;
+.table .table-item img {
+  margin-right: 10px;
+  height: 100px;
+  width: 100px;
 }
+.table .reverse {
+  flex-direction: row-reverse;
+}
+.table .reverse img {
+  margin-right: 0;
+  margin-left: 10px;
+}
+.table .reverse p {
+  text-align: right;
+}
+.table .reverse .vertical-separator {
+  margin-right: 0;
+  margin-left: 10px;
+}
+.table .vertical-separator {
+  height: 120px;
+  border: solid 1px #1d60b5;
+  margin-right: 10px;
+}
+
 #header {
   background: #FDFFFF;
   padding: 0 150px;