@import '~Breakpoints';
@import '~Colors';
@import '~FontSize';
@import '~Layout';

.wrapper {
  //padding: 6rem 4rem 0;
}

.item {
  width: 100%;
  margin-top: 3rem;
  //padding-bottom: 3rem;
  &:not(:last-of-type){
    .question, .answer {
      border-bottom: .1rem solid $gray-light;
    }
  }
  &:last-of-type input:checked + .question {
    border-bottom: .1rem solid $gray-light !important;
  }

}

.input {
  display: none;
  opacity: 0;

  &:checked ~ .answer {
    display: block;
  }
  &:not(:checked) + label {
    cursor: pointer;
  }

}

.header {
  margin-top: 0;
}

.question {
  padding-bottom: 2.5rem;
  color: $brand-primary;
  font-weight: 100;
  @include fontSizer(2, 1.6);
  margin: 0;
  width: 100%;

}

.answer {
  background-color: $gray-lightest;
  margin: 0;
  @include fontSizer(1.6, 1.4);
  font-weight: 100;
  color: $gray-dark;
  padding: 1.5rem;
  @include media-breakpoint-up(md) {
    padding: 3rem 5rem;
  }
  display: none;
}

.type {
  color: $brand-primary;
  font-style: italic;
  font-weight: 100;
}

.career {
  &:not(:last-of-type) {
    border-bottom: .1rem solid $gray-light;
  }
  padding-bottom: 4rem;
}