.m_faqs {
  @extend %section-type;
}

.m_details {
  padding-left: 0;
  list-style  : none;
  @include set-wCol(8);
  margin      : 0 auto;

  &-item {
    background   : $grey;
    border       : 1px solid $black;
    margin-bottom: 20px;
    cursor       : pointer;
    transition   : height 0.2s ease;
    overflow     : hidden;

    &:hover {
      background: darken($grey, 80);
    }
  }

  &-item__head {
    display : block;
    @extend %h4;
    position: relative;
    padding : 10px 20px;
    margin  : 0;

    &::after,
    &::before {
      content   : '';
      display   : block;
      position  : absolute;
      top       : 49%;
      right     : 15px;
      width     : 15px;
      height    : 2px;
      background: $black;
      transition: transform 0.2s ease;
      transform : translateY(-50%);
    }

    &:after {
      transform: translateY(-50%) rotate(-90deg);
    }
  }

  &-item.active {
    &:after {
      transform: translateY(-50%) rotate(0);
    }
  }

  &-item__body {
    padding: 10px 20px;
  }
}