@media (max-width: 777px) {
  .collapse {
    transition: all 0.2s ease-in-out;
    border-bottom: solid 1px #c5c5c5;

    margin-top: -8px;
    margin-bottom: 0;

    &-title {
      padding: 8px 0;
      font-size: 14px !important;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &:after {
        content: "";
        display: block;
        height: 22px;
        width: 22px;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>');
        background-repeat: none;
        background-size: 22px;
        transition: all 0.2s ease-in-out;
      }
    }

    &.active {
      border-color: transparent;

      .collapse-title:after {
        transform: rotate(-45deg);
      }
    }

    &:not(.active) > *:not(.collapse-title) {
      display: none;
    }
  }
}