.accordion {
  width: 100%;

  .accordion-item {
    width: 100%;

    margin-top: 24px;
    border-radius: 24px;
    background-color: #00000033;
    border: 1px solid #58476f;

    &:not(.open) {
      .accordion-title {
        border-bottom-color: #58476f00;
      }
    }

    &.open {
      .accordion-content {
        max-height: 300px;
        overflow-y: auto;
      }
    }

    .accordion-title {
      width: 100%;
      padding: 0 24px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid #58476f;

      transition: 400ms ease border-bottom-color;

      cursor: pointer;

      p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        color: #e9c0ff;
        font-size: 18px;
        font-weight: 600;

        @media screen and (max-width: 600px) {
          font-size: 16px;
        }
      }

      icon-button {
        color: #e9c0ff;
      }
    }

    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transform-origin: top;
      transition:
        transform 0.5s ease,
        max-height 0.5s ease;

      p {
        padding: 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 2;
      }
    }
  }
}