.faq__wrapper

display: flex
flex-direction: column
background-color: $pure-white
padding: 10vh 0

.faq__panel

border: solid 1px rgba($env-primary, .4)
margin: 2rem auto
border-radius: 4px
width: 90%
z-index: 9997

.faq__question

display: flex
justify-content: space-between
width: 100%
padding: 1rem 0
background-color: rgba($opd-light-blue, .2)
border-radius: 4px
cursor: pointer
transition: .2s ease-in-out

&:hover
  background-color: rgba($opd-light-blue, 1)

& > .faq__question--title
  padding-left: 1rem

& > .fas
  padding-right: 1rem
  transition: .4s ease-in-out

.faq__answer

height: 0
max-height: 0
overflow: hidden
transition: .4s ease-in-out

& > *
  padding: 1rem

.faq__answer–reveal

height: 100%
max-height: 1000px
transition: .6s ease-in-out

.faq__question–reveal

& > .fas
  transform: rotateX(180deg) translateY(.5rem)

.faq__contact

width: 100vw
background-color: lighten($env-primary, 0%)
padding: 4rem 0
border-bottom: 1px solid $env-secondary

.contact-form
  width: 95%
  margin: auto
  max-width: 600px

.faq__contact–strap

text-align: center
padding: 4rem 0
color: $white

@media screen and ( min-width: 1024px )

.faq__panel
  width: 60%
  max-width: 800px