$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: 2rem
  padding-bottom: 0
  text-align: center

.pros-icon
  margin-bottom: 2rem
  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