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

.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

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

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

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

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

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

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

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

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

.separator
  color: $border
  margin: 0 0.25em

.comparison
  margin: 0 auto
  max-width: 42rem
  .table
    svg
      float: left
      height: 1rem
      margin-right: 0.5rem
      margin-top: 0.25rem
      width: auto
    tbody
      th[colspan]
        font-size: 1.25em
      a
        color: $red
        font-family: $family-monospace
        &:hover
          color: $text-strong
          text-decoration: underline
    .is-empty
      background-color: $background
      color: $text-light

.comparison-header
  margin-bottom: 3rem