.faqContainer {
  padding: 0 1.6rem;
  @include min(tablet) {
    padding: 0 2.4rem;
  }
  .faqItem {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.6rem 1.6rem;
    background-color: #fff;
    border-radius: 0.6rem;
    margin: 1rem 0;

    .title {
      position: relative;
      text-align: left;
      color: var(--color-12);
      font-size: 1.8rem;
      font-weight: 700;
      padding: 1rem 0;
      outline: none;
      padding-right: 2.5rem;
      display: flex;
      align-items: center;
      .circle {
        @include flex-align(center, center);
        margin-right: 0.5rem;
      }
      > span, div {
        display: block;
        margin: 0;
        margin-right: 2rem;
        font-weight: 700;
        font-size: 1.8rem;
        p,
        h2,
        h3,
        h4 {
          margin: 0;
          font-weight: 700;
          font-size: 1.8rem;
        }
      }
      &:hover,
      &:focus {
        outline: none;
      }

      &:after {
        transition: 0s;
        @include arrow(black, 0.9rem, down, false, translateY(-50%));
        position: absolute;
        right: 0.5rem;
        top: 50%;
      }

      &.invertArrow {
        &:after {
          transform: translateY(-50%) rotate(-135deg);
        }
      }
    }

    .content {
      @include collapse(0s, 500rem);
      @include flex-direction(column);
      font-size: 1.6rem;
      color: var(--color-20);
      padding: 0;
    }
  }
}