.detail-information
  padding: 80px 0 40px
  .current-house, .other-houses
    margin-left: column(1, 24)
    width: column(5, 12)
    display: inline-block
    vertical-align: top




  h2
    +phenomena
    font-size: 2rem
    line-height: 1.2
    color: $blue
    margin-top: 80px
    margin-bottom: 45px
    &:first-of-type
      margin-top: 0

  .content
    line-height: 1.4

    h2
      font-size: 1.4rem
      &:first-of-type
        margin-top: 20px

    p
      margin: 1rem 0
      color: $blue
      font-size: 1rem

    ul
      padding: 0
      margin: 0

      li
        padding: 5px 0
        font-size: 1rem
        +metropolisLight
        border-bottom: 1px solid $lightGray

  .button
    background-color: $blue
    border-color: $blue
    color: white
    display: block
    +flex(space-between, flex-start)
    width: 300px
    margin-top: 15px

    &:hover
      background-color: darken($blue, 5%)

    &:nth-of-type(even)
      background-color: $brown
      border-color: $brown

      &:hover
        background-color: darken($brown, 5%)

    &:after
      +arrowWhite
      margin-top: 4px

  .other-houses
    .content
      margin-bottom: 30px

  +respond-to-width(900)

    .current-house, .other-houses
      width: column(11, 12)

    .other-houses
      margin-top: 60px

  +respond-to-width(750)
    padding-bottom: 60px