Bulma v9 website (#3249)

* Add Bulma v9

* Add vendor dependencies

* Fix native

* Fix sponsors

* Add style attribute

docs/_sass/index/best.scss

@@ -0,0 +1,88 @@
+$best-item-width: 520;
+$best-screenshot-width: 504;
+$best-count: 6;
+$best-more-count: 6;
+$best-total-count: $best-count + (2 * $best-more-count);
+$best-total-width: $best-item-width * $best-total-count;
+$best-speed: 100; // px per second
+$best-duration: $best-total-width / $best-speed * 1s;
+$best-padding: $block-spacing;
+$best-height: 386px;
+
+.bd-best {
+  height: calc(#{$best-height} + #{$best-padding * 2});
+  padding: $best-padding 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.bd-best-list {
+  align-items: stretch;
+  animation-duration: $best-duration;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  display: flex;
+  left: 0;
+  position: absolute;
+  top: $best-padding;
+
+  animation-name: bdBestCarousel;
+  // flex-wrap: wrap;
+
+  &:hover {
+    animation-play-state: paused;
+  }
+}
+
+.bd-best-item {
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-right: ($best-item-width - $best-screenshot-width) * 1px;
+  transition-duration: $speed * 2;
+  transition-property: box-shadow, transform;
+  width: $best-screenshot-width * 1px;
+
+  &.bd-is-medium {
+    font-size: 1.125em;
+  }
+
+  &.bd-is-large {
+    font-size: 1.25em;
+  }
+
+  &.bd-is-huge {
+    font-size: 1.5em;
+  }
+
+  &:hover {
+    box-shadow: 0 1em 1em rgba(black, 0.1);
+    transform: translateY(-0.5em);
+  }
+}
+
+.bd-screenshot {
+  align-self: flex-start;
+  display: block;
+  transition-duration: $speed * 2;
+  transition-property: box-shadow, transform;
+
+  &,
+  img {
+    border-radius: $radius-large;
+  }
+
+  img {
+    display: inline-block;
+    height: auto;
+    vertical-align: top;
+    width: auto;
+  }
+}
+
+@keyframes bdBestCarousel {
+  100% {
+    transform: translateX(
+      calc(-100% + #{$best-item-width * $best-more-count * 1px})
+    );
+  }
+}

docs/_sass/index/columns.scss

@@ -0,0 +1,65 @@
+#grid {
+  .notification {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.bd-columns-tools {
+  margin-top: 3rem;
+}
+
+.bd-columns-tool {
+  @extend %center;
+
+  .highlight {
+    font-size: 0.875em;
+  }
+
+  &.bd-is-try {
+    .buttons {
+      justify-content: center;
+    }
+    .button {
+      strong {
+        font-weight: $weight-semibold;
+      }
+    }
+  }
+}
+
+#markup {
+  width: 100%;
+
+  .highlight pre {
+    max-height: none;
+  }
+}
+
+#message {
+  display: none;
+  margin-top: 3rem;
+}
+
+@include mobile {
+  .bd-columns-tool {
+    &.bd-is-markup {
+      margin-top: 3rem;
+    }
+  }
+}
+
+@include tablet {
+  .bd-columns-tools {
+    align-items: flex-start;
+    display: flex;
+  }
+
+  .bd-columns-tool {
+    width: 50%;
+
+    &.bd-is-try {
+      padding-top: 60px;
+    }
+  }
+}

docs/_sass/index/custom.scss

@@ -0,0 +1,90 @@
+// Customize
+
+.bd-index-custom-title {
+  color: $border-hover;
+}
+
+.bd-index-custom-example {
+  padding: 1rem;
+
+  .subtitle {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.bd-index-custom.bd-is-after {
+  color: $brown;
+  font-family: 'Nunito', serif;
+  margin-top: 0.5rem;
+
+  a {
+    color: $pink;
+
+    &:hover {
+      color: #363636;
+    }
+  }
+
+  .subtitle {
+    color: $brown;
+  }
+
+  .input,
+  .select select {
+    background-color: $beige-lighter;
+    border-color: transparent;
+    border-width: 2px;
+    box-shadow: none;
+    font-family: 'Nunito', serif;
+
+    &:hover {
+      border-color: $beige-light;
+    }
+
+    &:focus {
+      border-color: $pink;
+      box-shadow: 0 0 0 0.125em rgba($pink, 0.25);
+    }
+  }
+
+  .select {
+    &:not(.is-multiple):not(:hover) {
+      &::after {
+        border-color: $pink;
+      }
+    }
+  }
+
+  .button {
+    &.is-primary {
+      background-color: $mauve;
+      color: $scheme-main;
+
+      &:hover {
+        background-color: darken($mauve, 2.5%);
+      }
+
+      &:active {
+        background-color: darken($mauve, 5%);
+      }
+    }
+
+    &.is-link {
+      background-color: $pink;
+      color: $scheme-main;
+
+      &:hover {
+        background-color: darken($pink, 2.5%);
+      }
+
+      &:active {
+        background-color: darken($pink, 5%);
+      }
+    }
+  }
+
+  @include selection {
+    background-color: $pink;
+    color: $scheme-main;
+  }
+}

docs/_sass/index/focus-animations.scss

@@ -0,0 +1,362 @@
+@keyframes bdGrow {
+  from {
+    transform: scale(0);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes bdSlideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes bdSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+$cubic-dramatic: cubic-bezier(0, 0.75, 0.25, 1);
+$cubic-less-dramatic: cubic-bezier(0.14, 0.71, 0.29, 0.86);
+$cubic-magic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+$duration: 500ms;
+$delay: 250ms;
+$wait: 500ms;
+
+$focus-delay: 0;
+
+%bd-focus-animation {
+  animation-duration: $duration;
+  animation-fill-mode: both;
+  animation-timing-function: $cubic-less-dramatic;
+  transform-origin: center center;
+}
+
+$delay-subtitle: $delay / 2;
+
+// Titles
+.bd-focus-item {
+  .title {
+    @extend %bd-focus-animation;
+
+    animation-name: bdSlideDown;
+  }
+
+  .subtitle {
+    @extend %bd-focus-animation;
+
+    animation-name: bdSlideUp;
+  }
+
+  &:nth-child(1) {
+    .title {
+      animation-delay: $focus-delay;
+    }
+
+    .subtitle {
+      animation-delay: $focus-delay + $delay-subtitle;
+    }
+  }
+
+  &:nth-child(2) {
+    .title {
+      animation-delay: $focus-delay + $wait;
+    }
+
+    .subtitle {
+      animation-delay: $focus-delay + $wait + $delay-subtitle;
+    }
+  }
+
+  &:nth-child(3) {
+    .title {
+      animation-delay: $focus-delay + $wait * 2;
+    }
+
+    .subtitle {
+      animation-delay: $focus-delay + $wait * 2 + $delay-subtitle;
+    }
+  }
+
+  &:nth-child(4) {
+    .title {
+      animation-delay: $focus-delay + $wait * 3;
+    }
+
+    .subtitle {
+      animation-delay: $focus-delay + $wait * 3 + $delay-subtitle;
+    }
+  }
+}
+
+// Devices
+%bd-focus-animation-device {
+  @extend %bd-focus-animation;
+
+  animation-name: bdGrow;
+  transform-origin: bottom center;
+}
+
+.bd-focus-mobile {
+  @extend %bd-focus-animation-device;
+
+  animation-delay: $focus-delay;
+}
+
+.bd-focus-tablet {
+  @extend %bd-focus-animation-device;
+
+  animation-delay: $focus-delay + $delay;
+}
+
+.bd-focus-desktop {
+  @extend %bd-focus-animation-device;
+
+  animation-delay: $focus-delay + $delay * 2;
+}
+
+// Cubes
+$cube-factor: 10px;
+
+@keyframes bdCube1 {
+  0% {
+    transform: translate3d(0, -5 * $cube-factor, 0);
+    opacity: 0;
+  }
+
+  25%,
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes bdCube2 {
+  0% {
+    transform: translate3d(-4 * $cube-factor, 3 * $cube-factor, 0);
+    opacity: 0;
+  }
+
+  25%,
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes bdCube3 {
+  0% {
+    transform: translate3d(4 * $cube-factor, 3 * $cube-factor, 0);
+    opacity: 0;
+  }
+
+  25%,
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+%bd-focus-animation-cube {
+  @extend %bd-focus-animation;
+
+  animation-direction: alternate;
+  animation-duration: $duration * 4;
+  animation-iteration-count: infinite;
+}
+
+.bd-focus-cube-1 {
+  @extend %bd-focus-animation-cube;
+
+  animation-delay: $focus-delay + $wait;
+  animation-name: bdCube1;
+}
+
+.bd-focus-cube-2 {
+  @extend %bd-focus-animation-cube;
+
+  animation-name: bdCube2;
+  animation-delay: $focus-delay + $wait + $delay;
+}
+
+.bd-focus-cube-3 {
+  @extend %bd-focus-animation-cube;
+
+  animation-name: bdCube3;
+  animation-delay: $focus-delay + $wait + $delay * 2;
+}
+
+@keyframes bdFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes bdSlowIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes bdScaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.bd-focus-css3 {
+  @extend %bd-focus-animation;
+
+  animation-delay: $focus-delay + $wait * 2;
+  animation-name: bdScaleIn;
+}
+
+.bd-focus-github {
+  @extend %bd-focus-animation;
+
+  animation-delay: $focus-delay + $wait * 3;
+  animation-duration: $duration * 3;
+  animation-name: bdJellyPop;
+}
+
+@keyframes bdJellyPop {
+  0% {
+    opacity: 0;
+    transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  3.4% {
+    opacity: 1;
+    transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  4.7% {
+    transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  6.81% {
+    transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  9.41% {
+    transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  10.21% {
+    transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  13.61% {
+    transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  14.11% {
+    transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  17.52% {
+    transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  18.72% {
+    transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  21.32% {
+    transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  24.32% {
+    transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  25.23% {
+    transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  29.03% {
+    transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  29.93% {
+    transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  35.54% {
+    transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  36.74% {
+    transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  41.04% {
+    transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  44.44% {
+    transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  52.15% {
+    transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  59.86% {
+    transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  63.26% {
+    transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  75.28% {
+    transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  85.49% {
+    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  90.69% {
+    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+}

docs/_sass/index/focus.scss

@@ -0,0 +1,185 @@
+.bd-focus {
+  // display: none;
+  padding: $block-spacing;
+
+  > .container {
+    // max-width: none !important;
+  }
+}
+
+.bd-focus-item {
+  @extend %link-before-background;
+
+  align-items: center;
+  border-radius: $radius-large;
+  display: flex;
+  padding: $block-spacing;
+  position: relative;
+
+  .title a,
+  .subtitle {
+    transition-duration: $speed * 2;
+    transition-property: color;
+  }
+
+  .title {
+    position: relative;
+    transition-duration: $speed * 2;
+    transition-property: color;
+  }
+
+  .subtitle {
+    color: $text-light;
+    position: relative;
+
+    strong {
+      color: currentColor;
+    }
+
+    .subtitle {
+      color: $text;
+    }
+  }
+
+  &:nth-child(1):hover {
+    .title {
+      color: $orange;
+    }
+  }
+
+  &:nth-child(2):hover {
+    .title {
+      color: $success;
+    }
+  }
+
+  &:nth-child(3):hover {
+    .title {
+      color: $link;
+    }
+  }
+
+  &:nth-child(4):hover {
+    .title {
+      color: $scheme-invert;
+    }
+  }
+}
+
+.bd-focus-graph {
+  align-items: center;
+  display: flex;
+  height: 3rem;
+  justify-content: center;
+  margin-right: $block-spacing;
+  width: 3rem;
+}
+
+.bd-focus-icon {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  position: relative;
+}
+
+.bd-focus-device {
+  --device-y: 4px;
+  --device-x: 2px;
+
+  --device-sm-deg: 14deg;
+  --device-md-deg: -21deg;
+  --device-lg-deg: -86deg;
+  --device-deg: var(--device-sm-deg);
+
+  --device-sm-height: 24px;
+  --device-sm-width: 16px;
+
+  --device-md-height: 32px;
+  --device-md-width: 24px;
+
+  --device-lg-height: 40px;
+  --device-lg-width: 48px;
+
+  animation: bdDeviceBounce 3.5s infinite;
+  border: 0 solid hsl(var(--device-deg), 100%, 53%);
+  border-width: var(--device-y) var(--device-x);
+  border-radius: $radius;
+  display: block;
+  height: var(--device-height);
+  position: relative;
+  width: var(--device-width);
+}
+
+.bd-focus-cubes {
+  position: relative;
+  height: 3rem;
+  top: -0.5rem;
+  width: 3rem;
+}
+
+.bd-focus-cube {
+  color: $green;
+  position: absolute;
+}
+
+.bd-focus-cube-1 {
+  left: 0;
+  top: 0;
+}
+
+.bd-focus-cube-2 {
+  left: -1rem;
+  top: 23px;
+}
+
+.bd-focus-cube-3 {
+  left: 1rem;
+  top: 23px;
+}
+
+.bd-focus-css3 {
+  color: $blue;
+}
+
+.bd-focus-github {
+  color: $github;
+}
+
+@keyframes bdDeviceBounce {
+  0% {
+    --device-deg: var(--device-sm-deg);
+    height: var(--device-sm-height);
+    width: var(--device-sm-width);
+  }
+  28% {
+    --device-deg: var(--device-sm-deg);
+    height: var(--device-sm-height);
+    width: var(--device-sm-width);
+  }
+  33% {
+    --device-deg: var(--device-md-deg);
+    height: var(--device-md-height);
+    width: var(--device-md-width);
+  }
+  62% {
+    --device-deg: var(--device-md-deg);
+    height: var(--device-md-height);
+    width: var(--device-md-width);
+  }
+  67% {
+    --device-deg: var(--device-lg-deg);
+    height: var(--device-lg-height);
+    width: var(--device-lg-width);
+  }
+  95% {
+    --device-deg: var(--device-lg-deg);
+    height: var(--device-lg-height);
+    width: var(--device-lg-width);
+  }
+  100% {
+    --device-deg: var(--device-sm-deg);
+    height: var(--device-sm-height);
+    width: var(--device-sm-width);
+  }
+}

docs/_sass/index/heading.scss

@@ -0,0 +1,91 @@
+.bd-heading {
+  > .icon {
+    font-size: $title-size;
+    height: 1.125em;
+    width: 1.125em;
+  }
+
+  .title,
+  .subtitle {
+    font-weight: $weight-normal;
+
+    strong {
+      color: inherit;
+      font-weight: $weight-semibold;
+    }
+
+    small {
+      color: $text-light;
+      display: block;
+      font-size: 0.75em;
+    }
+  }
+
+  .subtitle {
+    color: $text-light;
+  }
+
+  .bd-fat-button {
+    font-weight: $weight-normal;
+
+    strong {
+      font-weight: $weight-semibold;
+    }
+  }
+}
+
+@include mobile {
+  .bd-heading {
+    margin-bottom: var(--bd-index-vertical);
+
+    .icon {
+      float: left;
+      margin-right: $block-spacing / 2;
+    }
+
+    .subtitle {
+      margin: ($block-spacing / 2) 0 !important;
+    }
+
+    form {
+      margin-top: $block-spacing;
+    }
+  }
+}
+
+@include tablet {
+  .bd-heading {
+    align-items: center;
+    display: grid;
+    grid-gap: 0;
+    // prettier-ignore
+    grid-template-columns:
+      1fr
+      4rem
+      calc(var(--container-width) / 3)
+      calc(var(--container-width) / 3)
+      calc(var(--container-width) / 3)
+      4rem
+      1fr;
+    margin-bottom: calc(var(--bd-index-vertical) / 2);
+
+    > .icon {
+      grid-column: 2;
+    }
+
+    .title {
+      grid-column: 3;
+      max-width: 9em;
+    }
+
+    .subtitle {
+      grid-column: 4;
+      max-width: 10em;
+    }
+
+    .button {
+      grid-column: 5 / span 1;
+      justify-self: flex-end;
+    }
+  }
+}

docs/_sass/index/hello.scss

@@ -0,0 +1,137 @@
+.bd-hello-body {
+  display: grid;
+  grid-gap: var(--bd-index-gap);
+}
+
+.bd-hello-ghbtns {
+  margin-bottom: 1em;
+  min-height: 30px;
+
+  iframe,
+  a,
+  img {
+    height: 30px;
+  }
+
+  a {
+    display: inline-block;
+    min-width: 100px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+  }
+}
+
+.bd-hello-buttons {
+  .bd-fat-button {
+    font-size: 1.125em;
+  }
+}
+
+.bd-hello-media {
+  text-align: center;
+}
+
+.bd-hello-video {
+  padding-top: 56.25%;
+  position: relative;
+
+  > div {
+    @include overlay;
+  }
+}
+
+.bd-hello-shadow {
+  background-size: cover;
+}
+
+.bd-hello-iframe {
+  border-radius: 0.75em;
+
+  iframe {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.bd-hello-author {
+  color: $text-light;
+  margin-top: 1em;
+  opacity: 0.5;
+
+  a {
+    color: currentColor;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+@include mobile {
+  .bd-hello {
+    grid-gap: var(--bd-index-vertical);
+    padding: var(--bd-index-vertical);
+  }
+
+  .bd-hello-content {
+    .title br {
+      display: none;
+    }
+  }
+
+  .bd-hello-buttons {
+    .button {
+      margin-right: 0 !important;
+      width: 100%;
+    }
+  }
+}
+
+@include tablet {
+  .bd-hello {
+    align-items: center;
+    padding-bottom: var(--bd-index-vertical);
+    padding-top: var(--bd-index-vertical);
+  }
+
+  .bd-hello-body {
+    align-items: center;
+    grid-gap: 0;
+    grid-template-columns:
+      var(--bd-index-gap) 1fr calc(
+        calc(var(--container-width) - var(--bd-index-gap)) / 2
+      )
+      var(--bd-index-gap) calc(
+        calc(var(--container-width) - var(--bd-index-gap)) / 2
+      )
+      1fr var(--bd-index-gap);
+  }
+
+  .bd-hello-content {
+    grid-column: 3 / span 1;
+  }
+
+  .bd-hello-buttons {
+    display: grid;
+    grid-gap: $block-spacing;
+    grid-template-columns: 1fr 1fr;
+    margin-bottom: 0 !important;
+
+    .button {
+      margin: 0 !important;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+  }
+
+  .bd-hello-media {
+    grid-column: 5 / span 2;
+  }
+
+  .bd-hello-sponsors {
+    grid-column: 4 / span 4;
+  }
+}

docs/_sass/index/sponsors.scss

@@ -0,0 +1,102 @@
+$bd-sponsor-padding: $block-spacing;
+$bd-sponsor-width: 12rem;
+
+.bd-sponsors {
+  --bd-sponsors-spacing: #{$block-spacing};
+}
+
+.bd-sponsors-body {
+  display: grid;
+  grid-gap: var(--bd-index-gap);
+}
+
+@include mobile {
+  .bd-sponsors {
+    grid-gap: var(--bd-sponsors-spacing);
+    padding: var(--bd-sponsors-spacing);
+  }
+}
+
+.bd-partner-sponsors {
+  --sponsor-width: #{$bd-sponsor-width - 1rem};
+  display: grid;
+  grid-gap: 0;
+  grid-template-columns: repeat(auto-fill, minmax(var(--sponsor-width), 1fr));
+  overflow: hidden;
+}
+
+.bd-partner-sponsor {
+  @extend %center;
+  @extend %link-before-background;
+
+  padding: $bd-sponsor-padding ($bd-sponsor-padding / 2);
+
+  strong,
+  img {
+    position: relative;
+  }
+}
+
+@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);
+  }
+
+  .bd-sponsors-body {
+    align-items: center;
+    grid-gap: 0;
+    grid-template-columns:
+      var(--bd-index-gap) 1fr calc(
+        calc(var(--container-width) - var(--bd-index-gap)) / 2
+      )
+      var(--bd-index-gap) calc(
+        calc(var(--container-width) - var(--bd-index-gap)) / 2
+      )
+      1fr var(--bd-index-gap);
+  }
+
+  .bd-sponsors-content {
+    font-size: 1.125rem;
+    grid-column: 3 / span 1;
+  }
+
+  .bd-sponsors-list {
+    grid-column: 4 / span 4;
+  }
+}
+
+@include widescreen {
+  .bd-sponsors {
+    --bd-sponsors-spacing: 6rem;
+  }
+
+  .bd-sponsors-content {
+    font-size: 1.25rem;
+  }
+
+  .bd-partner-sponsors {
+    --sponsor-width: #{$bd-sponsor-width};
+  }
+}
+
+@include fullhd {
+  .bd-sponsors {
+    --bd-sponsors-spacing: 9rem;
+  }
+
+  .bd-sponsors-content {
+    font-size: 1.5rem;
+  }
+}