.bd-side-sponsrs
  margin-top: 3rem
  text-align: center

.bd-side-sponsor-label,
.bd-banner-label
  color: $border-hover
  font-size: 0.75rem
  margin-bottom: 0.75rem

.bd-side-sponsor
  @extend %block
  align-items: center
  display: flex
  height: 30px
  justify-content: center
  vertical-align: top
  img
    display: block
    max-height: 100%
    width: auto

.bd-banner
  border-radius: $radius-large
  display: block
  margin-top: 3rem
  padding-bottom: 1.5rem
  position: relative
  text-align: center
  transition-duration: $speed
  transition-property: border-color, color
  strong
    color: currentColor
  .tag
    margin-bottom: 0.25em
  &.is-patreon
    background-color: $patreon-blue
    color: $scheme-main
  // &.is-fortyfour
  //   background-color: $scheme-main
  //   border: 2px solid $background
  .button
    transform-origin: center
    transition-duration: $speed
    transition-property: transform
  &:hover
    border-color: $link
    color: $link
    .bd-banner-title
      color: currentColor
    .button
      transform: scale(1.05)

.bd-banner-background
  +overlay
  background-image: url("/images/fortyfour-background.jpg")
  background-position: center center
  background-size: cover
  opacity: 0.5

.bd-banner-title
  color: $text-strong
  font-size: 1.25em
  font-weight: $weight-semibold
  line-height: 1.25
  margin-bottom: 0.25em

.bd-banner-text
  display: none
  font-size: 0.875em
  line-height: 1.25
  margin-bottom: 0.5rem
  position: relative

.bd-banner-image
  height: 176px
  margin-bottom: 1rem
  margin-top: 1rem
  img
    display: inline-block
    // left: -8px
    // position: relative
    vertical-align: top

.bd-banner-button
  display: inline-block
  flex-shrink: 0
  height: 34px
  position: relative
  width: 145px
  img
    max-height: 100%

.hero.bd-is-patreon
  background-color: $patreon