.bd-side-sponsors
  margin-top: 1.5rem

.bd-side-sponsor-label
  color: $grey-light
  font-size: 0.75rem
  margin-bottom: 0.75rem

.bd-side-sponsor
  display: inline-block
  height: 50px
  vertical-align: top
  img
    display: block
    max-height: 100%

.bd-banner
  border-radius: $radius-large
  display: block
  overflow: hidden
  margin-top: 1.5rem
  padding: 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: $white
  &.is-fortyfour
    background-color: $white
    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.1)

.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
  font-size: 0.875em
  line-height: 1.25
  padding: 0 0.5em
  position: relative

.bd-banner-image
  height: 176px
  margin-bottom: 1rem
  margin-top: 1rem
  img
    display: inline-block
    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