Update June 2022

docs/_sass/components/carbon.scss

@@ -4,29 +4,20 @@ $carbon-image-height: 100px;
 $carbon-image-width: 130px;
 
 #carboncontainer {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  max-width: $carbon-width;
-  min-height: $carbon-min-height;
-  min-width: 280px;
+  padding: 1.5rem;
 }
 
 #carbon {
   border-radius: 0.125em;
-  flex-grow: 1;
-  min-height: $carbon-height;
-  padding: 0;
+  margin: 0;
+  min-height: 206px;
   position: relative;
+  width: $carbon-image-width;
 
   &:hover {
     background-color: rgba(black, 0.02);
     box-shadow: 0 0 0 $carbon-shadow-size rgba(black, 0.02);
   }
-
-  @include tablet() {
-    width: $carbon-width;
-  }
 }
 
 #carbonads {
@@ -39,13 +30,12 @@ $carbon-image-width: 130px;
   }
 
   .carbon-wrap {
-    min-height: $carbon-height;
     position: relative;
 
     &:hover {
       .carbon-img::after {
         background-color: rgba(#000, 0.05);
-        content: '';
+        content: "";
         display: block;
         height: $carbon-height;
         left: 0;
@@ -57,14 +47,8 @@ $carbon-image-width: 130px;
   }
 
   .carbon-img {
-    bottom: 0;
-    float: left;
-    left: 0;
     min-height: $carbon-height;
     padding: 0;
-    position: absolute;
-    top: 0;
-    width: calc(#{$carbon-image-width} + #{$carbon-spacing});
 
     img {
       display: block;
@@ -87,9 +71,12 @@ $carbon-image-width: 130px;
     display: block;
     color: $text-strong;
     line-height: $carbon-line-height;
-    min-height: $carbon-height;
-    padding: 0 0 $carbon-poweredby-height
-      calc(#{$carbon-image-width} + #{$carbon-spacing});
+    margin-left: -1 * $carbon-shadow-size;
+    margin-right: -1 * $carbon-shadow-size;
+    padding-left: $carbon-shadow-size;
+    padding-right: $carbon-shadow-size;
+    padding-bottom: 5px;
+    padding-top: 5px;
 
     &:hover {
       color: $link;
@@ -97,13 +84,9 @@ $carbon-image-width: 130px;
   }
 
   .carbon-poweredby {
-    bottom: 0;
     color: $border-hover;
-    display: inline;
     font-size: $size-small;
-    line-height: $carbon-poweredby-height;
-    position: absolute;
-    right: 0;
+    line-height: 1;
 
     &:hover {
       text-decoration: underline;

docs/_sass/index/sponsors.scss

@@ -3,17 +3,17 @@ $bd-sponsor-width: 12rem;
 
 .bd-sponsors {
   --bd-sponsors-spacing: #{$block-spacing};
+  padding: var(--bd-sponsors-spacing);
 }
 
 .bd-sponsors-body {
-  display: grid;
-  grid-gap: var(--bd-index-gap);
+  // display: grid;
+  // grid-gap: var(--bd-index-gap);
 }
 
 @include mobile {
   .bd-sponsors {
     grid-gap: var(--bd-sponsors-spacing);
-    padding: var(--bd-sponsors-spacing);
   }
 }
 
@@ -22,6 +22,8 @@ $bd-sponsor-width: 12rem;
   display: grid;
   grid-gap: 0;
   grid-template-columns: repeat(auto-fill, minmax(var(--sponsor-width), 1fr));
+  margin-left: -$block-spacing;
+  margin-right: -$block-spacing;
   overflow: hidden;
 }
 
@@ -35,23 +37,24 @@ $bd-sponsor-width: 12rem;
   img {
     position: relative;
   }
+
+  img {
+    border-radius: 0.5em;
+    max-height: 3rem;
+    width: auto;
+  }
 }
 
 @include touch {
   .bd-sponsors {
     padding: var(--bd-index-vertical);
   }
-
-  .bd-partner-sponsors {
-    margin-left: -$block-spacing;
-    margin-right: -$block-spacing;
-  }
 }
 
 @include desktop {
   .bd-sponsors {
-    padding-bottom: var(--bd-index-vertical);
-    padding-top: var(--bd-index-vertical);
+    // padding-bottom: var(--bd-index-vertical);
+    // padding-top: var(--bd-index-vertical);
   }
 
   .bd-sponsors-body {
@@ -68,8 +71,20 @@ $bd-sponsor-width: 12rem;
   }
 
   .bd-sponsors-content {
+    align-items: flex-start;
+    display: flex;
     font-size: 1.125rem;
     grid-column: 3 / span 1;
+    max-width: none;
+
+    .content {
+      margin-left: 1.5rem;
+      margin-right: 1.5rem;
+    }
+
+    .button {
+      flex-shrink: 0;
+    }
   }
 
   .bd-sponsors-list {
@@ -92,9 +107,9 @@ $bd-sponsor-width: 12rem;
 }
 
 @include fullhd {
-  .bd-sponsors {
-    --bd-sponsors-spacing: 9rem;
-  }
+  // .bd-sponsors {
+  //   --bd-sponsors-spacing: 9rem;
+  // }
 
   .bd-sponsors-content {
     font-size: 1.5rem;

docs/_sass/pages/index.scss

@@ -118,7 +118,7 @@ $linear-gradient: linear-gradient(
 
 @include fullhd {
   :root {
-    --bd-index-vertical: 9rem;
+    --bd-index-vertical: 6rem;
   }
 
   .bd-index-content {