.collapseContainer {
  grid-column: 1/-1;
  .button {
    display: none;
    position: relative;
    font-size: 1.6rem;

    &:after {
      transition: 0s;
      @include arrow(var(--color-20), 0.8rem, down, false, translateY(-50%));
      position: absolute;
      left: 115%;
      top: 42%;
    }

    &.buttonM {
      @include max(tablet) {
        display: block;
      }
    }
  
    &.buttonD {
      @include min(tablet) {
        display: block;
      }
    }
  }

  .active {
    .invertArrow {
      @include arrow-rotate(0);
    }
  }

  .contentM {
    @include max(tablet) {
      overflow: hidden;
      max-height: 0;
      font-size: 1.6rem;
      transition: max-height 0s ease-out;
    }
  }

  .contentD {
    @include min(tablet) {
      overflow: hidden;
      max-height: 0;
      font-size: 1.6rem;
      transition: max-height 0s ease-out;
    }
  }
}