Center cf logo and rh logo in footer, vertically

Author: holly-cummins

_includes/CF-footerband.html

@@ -1,18 +1,18 @@
 <div class="content cf-footer">
   <div class="flexcontainer">
-    <span class="cf-logo">
-      <a href="https://www.commonhaus.org/" target="_blank"><img src="https://raw.githubusercontent.com/commonhaus/artwork/main/foundation/brand/svg/CF_logo_horizontal_single_reverse.svg"/></a>
-    </span>
-    <span class="license">
+    <div class="cf-logo">
+      <a class="cf-logo" href="https://www.commonhaus.org/" target="_blank"><img src="https://raw.githubusercontent.com/commonhaus/artwork/main/foundation/brand/svg/CF_logo_horizontal_single_reverse.svg"/></a>
+    </div>
+    <div class="license">
       Copyright © Quarkus. All rights reserved. For details on our trademarks, please visit our <a href="https://www.commonhaus.org/policies/trademark-policy/">Trademark Policy</a> and <a href="https://www.commonhaus.org/trademarks/">Trademark List</a>. Trademarks of third parties are owned by their respective holders and their mention here does not suggest any endorsement or association.
-    </span>
-    <span class="sponsorcontainer">
-      <span class="sponsor">
+    </div>
+    <div class="sponsorcontainer">
+      <div class="sponsor">
         Sponsored by
-      </span>
-      <span class="sponsor-logo">
-        <a href="https://www.redhat.com/" target="_blank"><img src="{{site.baseurl}}/assets/images/redhat_reversed.svg"></a>
-      </span>
-    </span>
+      </div>
+      <div class="sponsor-logo">
+        <a class="sponsor-logo" href="https://www.redhat.com/" target="_blank"><img src="{{site.baseurl}}/assets/images/redhat_reversed.svg"></a>
+      </div>
+    </div>
   </div>
 </div>

_sass/includes/cf-footer.scss

@@ -5,6 +5,7 @@
 
   .flexcontainer {
   display: flex;
+  gap: 2rem;
   padding: 1rem 0;
   align-items: center;
 
@@ -15,8 +16,8 @@
   }
 
     .cf-logo {
-    padding-right: 2rem;
     align-items: center;
+      display: flex;
     img {min-width: 350px;
 
         @media screen and (max-width: 1024px) {
@@ -47,8 +48,7 @@
     .sponsorcontainer {
     display: flex;
     flex-direction: row;
-    padding-left: 2rem;
-
+    align-items: flex-start;
 
     @media screen and (max-width: 1024px) {
     padding-left: 0;
@@ -62,6 +62,7 @@
       }
 
       .sponsor-logo {
+        display: flex;
       justify-self: end;
         img { width: 6rem; max-width: none !important;
         }