.accordionContainer {
  .accordionItem {
    @include flex-direction(column);
    padding-right: 1.6rem;
    background-color: #fff;
    border-radius: 1.6rem;
    margin: 1rem 0;
    box-shadow: 0 4px 12px #1B1B1C14;

    & > div > span{
      font-size: 18px;
      font-weight: 700;
      padding: 2.75rem 2.4rem;
      color: #1B1B1C;
    }

    .question{
      @include flex-direction(row);
      align-items: center;
      & > .commenter{
        margin-left: auto;
        @include flex-direction(row);
        align-items: center;
        height: fit-content;
        font-size: 1.4rem;
        font-weight: 400;

        & > span{
          background-color: #F1F5F9;
          padding: 0rem 1rem;
          border-radius:100px;
        }

        & > .userAvatar{
          border-radius: 100%;
          margin-left: .8rem
        }
      }
    }

    .answer {
      @include min(tablet){
        @include flex-direction(row);
        @include flex-align(center, center);
      }
      font-weight: 400;
      line-height: 2.7rem;
      font-size: 1.6rem;
      color: #515156;
      padding-bottom: 2.4rem;
      padding-left: 1.6rem;

      & > .author{
        margin-top: 10px;
        @include min(tablet){
          margin-left: auto;
          padding-left: 10px;
          margin-top: 0;
        }
        @include flex-direction(row);
        align-items: center;
        height: fit-content;
        font-size: 1.4rem;
        font-weight: 400;

        & > span{
          background-color: #F1F5F9;
          padding: 0rem 1rem;
          border-radius:100px;
          white-space: nowrap;
        }

        & > .authorImage{
          min-width: 3.6rem;
          @include flex-direction(row);
          @include flex-align(center, center);
          & > img{
            border-radius: 100%;
          }
          margin-left: .8rem
        }

        & > .userAvatar{
          border-radius: 100%;
          margin-left: .8rem
        }
      }
    }
  }
}