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

    .title {
      position: relative;
      text-align: left;
      color: var(--color-12);
      background: transparent;
      max-width: unset;
      border: none;
      justify-content: left;
      font-size: 1.8rem;
      font-weight: 700;
      padding: 1rem 0;
      outline: none;
      &: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, 20rem);
      font-size: 1.6rem;
      color: var(--color-20);
      padding: 0;

      p {
        padding: 1rem 0;
      }
    }
  }
}