#faq
  padding: 80px 0 50px
  background-color: $yellow

  h1
    font-size: 2rem
    line-height: 1.2
    color: $darkBrown
    text-align: center

  .list
    +flex(space-between, flex-start)
    +flex-rows
    margin-top: 60px

    article
      width: calc((100% - 120px) / 2)
      margin-bottom: 30px
      min-height: 70px

      .header
        position: relative
        z-index: 2
        background-color: $brown
        +flex(space-between, center)
        padding: 0 25px
        height: 70px
        cursor: pointer
        transition: background 0.2s

        h2
          font-size: 1rem
          line-height: 1.2
          font-weight: bold()
          color: white

        .arrow
          width: 9px
          transform: rotate(0deg)
          transition: transform 0.3s
          svg
            width: 100%
            max-height: 18px
            path
              fill: white

        &:hover
          background-color: $darkBrown

      .answer
        position: relative
        z-index: 1
        opacity: 0
        margin-top: -100vh
        background-color: white
        color: $blue
        transition: opacity 0.3s, margin-top 0.4s

        .content
          padding: 25px 30px

        p
          font-size: 0.85rem
          line-height: 1.6
          margin: 0
          a
            color: $darkBrown
            font-weight: bold


      &.active
        .header
          background-color: $darkerBrown
          h2
            color: white

          .arrow
            transform: rotate(180deg)

        .answer
          margin-top: 0 !important
          opacity: 1 !important