$bootstrap: #6f5499
$bootstrap-invert: #fff

.bd-bootstrap
  .hero
    background-color: $bootstrap
    color: $bootstrap-invert
    .title,
    .subtitle
      color: currentColor
    .subtitle
      color: rgba($bootstrap-invert, 0.5)
    .subtitle a
      border-bottom: 1px solid currentColor
      color: currentColor
      &:hover
        color: $bootstrap-invert

.bd-pros-heading
  padding: 0 2rem
  text-align: center

.bd-pros-icon
  margin-bottom: 3rem
  text-align: center
  svg
    height: 3rem
    width: auto

.bd-pros-list
  margin: 0 auto
  max-width: 540px

.bd-pro
  .icon
    position: relative
    top: -1px
  .title
    margin-bottom: 0.5rem

.bd-pro + .pro
  margin-top: 2rem
  padding-top: 2rem

.bd-pro-content
  p:not(:last-child)
    margin-bottom: 0.5rem

.bd-pro.bd-is-bulma
  .icon
    color: $primary

.bd-pro.bd-is-bootstrap
  .icon
    color: $bootstrap

.bd-separator
  color: $border
  margin: 0 0.25em

.bd-comparison
  margin: 0 auto
  max-width: 42rem
  .table
    color: $red
    thead,
    tfoot
      th
        font-size: 1.5rem
        text-align: center
      svg
        height: 1.5rem
        margin-right: 1rem
        position: relative
        top: 0.25rem
        width: auto
    tbody
      th
        font-size: 1.25rem
        text-align: center
      td
        font-family: $family-monospace
        width: 50%
      a
        color: currentColor
        &:hover
          text-decoration: underline
    .bd-is-empty
      background-color: $background
      color: $text-light
    .bd-is-unique
      background-color: rgba($green, 0.25)
      color: $text-strong
      font-weight: $weight-bold

.bd-comparison-header
  margin-bottom: 3rem
