.accordion-block {
  .accordion-title {
    text-align: center;
    font-weight: 700;
    margin-bottom: 64px;

    @media screen and (max-width: 990px) {
      margin-bottom: 32px;
    }
  }

  .accordion-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 24px;

    .accordion-items {
      display: flex;
      flex-direction: column;
      gap: 24px;
      flex: 1;

      @media screen and (max-width: 990px) {
        display: none;
      }

      &.mobile {
        display: none;

        @media screen and (max-width: 990px) {
          display: flex;
          gap: 32px;
        }
      }

      
      .accordion-item-details {
        flex: 0 0 calc(50% - 12px);
        padding: 16px;
        border-bottom: 1px solid #BFBEC0;

        /* &::details-content {
          block-size: 0;
          overflow: hidden;

          transition: block-size 0.3s ease,
            content-visibility 0.3s ease;
          
          transition-behavior: allow-discrete;
        } */

        summary.accordion-item-title {
          list-style: none;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .accordion-title-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;

            .accordion-icon {
              width: 48px;
              height: 48px;
              object-fit: contain;
            }
          }

          .accordion-arrow {
            transition: transform 0.3s ease;
            height: fit-content;
          }

          &::marker {
            display: none;
          }
        }

        summary::-webkit-details-marker {
          display: none;
        }

        div.accordion-item-content {
          padding-top: 16px;
        }

        &:open {

          /* &::details-content {
            block-size: auto;
          } */

          .accordion-arrow {
            transform: rotate(180deg);

          }
        }
      }
    
    }
  }
}

.has-text-color span.accordion-arrow svg path {
  stroke: url(#gradWarmth);
}

/* Base: hide content when closed */
.accordion-block .accordion-item-details > .accordion-item-content {
  display: grid;                 /* enables height animation */
  grid-template-rows: 0fr;       /* collapsed */
  transition: grid-template-rows 0.3s ease;
}

/* Allow the inner children to shrink during the animation */
.accordion-block .accordion-item-details > .accordion-item-content > * {
  min-height: 0;
  overflow: hidden;              /* keeps it tidy during animation */
}

/* When open, expand */
.accordion-block .accordion-item-details[open] > .accordion-item-content {
  grid-template-rows: 1fr;       /* expanded */
}

/* (Optional) if you had overflow hidden on the details itself, remove it */