adds logos to modals and logix to display different layouts based off logo size

styles/_use-cases.scss

@@ -3,9 +3,11 @@
   color: $gray-600;
   text-decoration: none;
 }
+
 .related-tasks-links a:hover {
   color: $black;
 }
+
 .use-case-external-link {
   border: 1px solid $gray-300;
 }
@@ -29,6 +31,7 @@
   color: #888;
   font-size: 1rem;
 }
+
 .arrows-container {
   position: absolute;
   top: 50%;
@@ -72,7 +75,8 @@
 }
 
 .modal-content-uses {
-  position: relative; /* Add position: relative to modal-content-uses */
+  position: relative;
+  /* Add position: relative to modal-content-uses */
   background-color: #232325;
   position: absolute;
   left: 50%;
@@ -86,6 +90,7 @@
   justify-content: center;
   align-items: center;
 }
+
 .modal-content-uses::before {
   content: "";
   position: absolute;
@@ -93,15 +98,14 @@
   left: 0;
   width: 100%;
   height: 1px;
-  background: linear-gradient(
-    90deg,
-    #b480ff -0.32%,
-    #5f00e6 32.7%,
-    #1aa4ff 61.53%,
-    #19ff83 100.32%,
-    #19ff83 100.32%
-  );
+  background: linear-gradient(90deg,
+      #b480ff -0.32%,
+      #5f00e6 32.7%,
+      #1aa4ff 61.53%,
+      #19ff83 100.32%,
+      #19ff83 100.32%);
 }
+
 .content-section {
   width: 100%;
   display: flex;
@@ -123,6 +127,7 @@
   text-align: center;
   color: #ffffff;
 }
+
 .section-text-description {
   max-width: 320px;
   font-family: "Work Sans";
@@ -150,12 +155,14 @@
   width: 218px;
   height: 96px;
 }
+
 .arrow-animation {
   position: relative;
   right: 23px;
   top: -11px;
   width: 60px !important;
 }
+
 .explore-projects {
   font-family: "Work Sans";
   font-style: normal;
@@ -174,10 +181,43 @@
   border-top: 1px solid #ccc;
 }
 
+.threezy-logo {
+  margin: 4px;
+  max-height: 38px;
+}
+
+.blockforce-logo {
+  margin: 0px !important;
+  max-height: 45px !important;
+}
+
+.Evernode-logo {
+  margin-right: 39px;
+}
+
+.logo-grid {
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 8px;
+  justify-items: center;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+}
+
+.top-row,
+.bottom-row {
+  display: flex;
+  justify-content: center;
+}
+
 .logo-item {
-  width: 50px;
-  height: 50px;
-  margin: 10px;
+  max-height: 24px;
+  max-width: 107px;
+  margin: 10px 11px;
 }
 
 
@@ -200,25 +240,28 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(20vw - 20px); /* Adjust as needed */
-  height: calc(47vw - 20px); /* Adjust as needed */
-  min-width: 100px; /* Minimum size */
-  min-height: 100px; /* Minimum size */
+  width: calc(20vw - 20px);
+  height: calc(47vw - 20px);
+  min-width: 100px;
+  min-height: 100px;
   border: 1px solid #343437;
   border-radius: 50%;
   margin-bottom: 30px;
   cursor: pointer;
+
   @include media-breakpoint-up(md) {
     width: 230px;
     height: 266px;
   }
+
   @include media-breakpoint-up(lg) {
     margin-bottom: 0;
     height: 230px;
 
   }
 }
-.use-case-circle:hover{
+
+.use-case-circle:hover {
   border-color: #ee5555;
 
 }
@@ -227,7 +270,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 13px; /* Adjust the space between the elements */
+  gap: 13px;
+  /* Adjust the space between the elements */
 }
 
 .circle-img {
@@ -253,14 +297,18 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
-  padding: 0 5%; /* Percentage-based padding to make it responsive */
+  padding: 0 5%;
+  /* Percentage-based padding to make it responsive */
   box-sizing: border-box;
 }
+
 @include media-breakpoint-up(lg) {
   .colorful-join-text-wrapper {
-    padding: 0 4%; /* Percentage-based padding to make it responsive */
+    padding: 0 4%;
+    /* Percentage-based padding to make it responsive */
   }
 }
+
 .colorful-join-text {
   display: block;
   width: 100%;
@@ -270,37 +318,42 @@
   font-weight: 400;
   font-size: 32px;
   line-height: 38px;
-  background: linear-gradient(
-    90deg,
-    #feff01 0%,
-    #ff2d9a 30.82%,
-    #e24cff 64.01%,
-    #9a52ff 100%
-  );
+  background: linear-gradient(90deg,
+      #feff01 0%,
+      #ff2d9a 30.82%,
+      #e24cff 64.01%,
+      #9a52ff 100%);
 
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
+
 #numbersAnimation {
   display: block;
 }
+
 #numbersAnimationLight {
   display: none;
 }
+
 html.light {
-  .section-separator{
+  .section-separator {
     background: #C1C1C2;
   }
+
   .section-text-description {
     color: #343437;
   }
+
   .modal-content-uses {
     background: #ffffff;
   }
+
   #numbersAnimation {
     display: none;
   }
+
   #numbersAnimationLight {
     display: block;
   }
@@ -316,6 +369,7 @@ html.light {
     line-height: 16px;
     color: #232325;
   }
+
   .colorful-join-text {
     display: block;
     width: 100%;
@@ -325,17 +379,16 @@ html.light {
     font-weight: 400;
     font-size: 32px;
     line-height: 38px;
-    background: linear-gradient(
-      90deg,
-      #b480ff -0.32%,
-      #5f00e6 32.7%,
-      #1aa4ff 61.53%,
-      #19ff83 100.32%
-    );
+    background: linear-gradient(90deg,
+        #b480ff -0.32%,
+        #5f00e6 32.7%,
+        #1aa4ff 61.53%,
+        #19ff83 100.32%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
+
   @include media-breakpoint-up(lg) {
     .colorful-join-text {
       width: 750px;
@@ -370,6 +423,7 @@ html.light {
   font-size: 22.1452px;
   color: #f0e5ff;
 }
+
 .use-case-steps h2 {
   margin-top: 10px;
   margin-bottom: 10px;
@@ -377,6 +431,7 @@ html.light {
   line-height: 32px;
   font-weight: 700;
 }
+
 .use-case-steps h2 a {
   text-decoration: none;
 }
@@ -389,10 +444,12 @@ html.light {
   font-size: 2.4em;
   padding-bottom: 10px;
 }
+
 .use-case-steps h2:before {
   margin-top: -30px;
   height: 0;
 }
+
 .use-case-steps h2:first-of-type {
   margin-top: -30px;
 }
@@ -401,15 +458,18 @@ html.light {
   list-style-type: none;
   padding-left: 0;
 }
+
 .related-tasks-links ul li {
   margin: 0px;
   padding-top: 2px;
 }
+
 .related-tasks-links a:hover::after {
   padding-left: 0.5em;
 }
+
 .related-tasks-links a::after {
   content: " ➝";
   padding-left: 0;
   transition: all 0.2s ease-in-out;
-}
+}