.bd-footer-title
  color: $text-strong
  font-size: 1.25rem
  line-height: 1.25
  margin-bottom: 1rem
  transition-duration: $speed
  transition-property: color
  strong
    font-weight: $weight-semibold

.bd-footer-subtitle
  color: $grey-light
  margin-top: -1rem
  transition-duration: $speed
  transition-property: color

.bd-footer-iframe
  display: flex
  flex-wrap: wrap
  min-height: 30px
  .fb-like
    margin-left: 10px

.bd-footer-tsp
  color: $grey-light
  margin-top: 1.5rem

%bd-footer-box
  background-color: $white
  border-radius: $radius-large
  box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.1)
  display: block
  text-align: center
  .bd-footer-title
    font-size: 1.5rem
    margin-bottom: 1rem

// Support

.bd-footer-support
  @extend %bd-footer-box
  margin-bottom: 3rem
  margin-top: 2.25rem
  padding: 2.5rem

.bd-footer-donations
  justify-content: center

.bd-footer-donation
  flex: none
  width: 240px

.bd-footer-donation-title
  color: $grey-light
  margin-bottom: 0.5rem
  strong
    color: currentColor

.bd-footer-donation-action
  @extend %center
  min-height: 36px
  .paypal-form
    height: 30px
    img
      display: block

// Stars

$star-figure-height: 156px

.bd-footer-stars
  +tablet
    align-items: stretch
    display: flex
    justify-content: space-between

.bd-footer-star
  @extend %bd-footer-box
  transition-duration: $speed
  transition-property: box-shadow, transform
  will-change: box-shadow, transform
  +mobile
    &:not(:last-child)
      margin-bottom: 1.5rem
  +tablet
    width: calc(33.3333% - 2rem)
  &:hover
    box-shadow: 0 3rem 3rem -1.25rem rgba($black, 0.1)
    transform: translateY(-0.5rem)
    .bd-footer-title,
    .bd-footer-subtitle
      color: $link
  &.bd-is-expo,
  &.bd-is-love
    padding-bottom: $star-figure-height
    .bd-footer-title
      align-items: center
      display: flex
      justify-content: center
      .icon
        margin-right: 0.25em
  &.bd-is-expo
    background-image: url("/images/footer/expo-examples.png")
    background-repeat: repeat-x
    background-position: bottom center
    background-size: 352px $star-figure-height
  &.bd-is-love
    background-image: url("/images/footer/love.png")
    background-repeat: no-repeat
    background-position: bottom center
    background-size: 440px 180px


.bd-footer-star-header
  padding: 1.5rem

.bd-footer-star-figure
  @extend %center
  height: $star-figure-height
  margin-top: -1rem