.acc-accordion {
  --_button-size: 5rem;
  --_panel-height:5rem;
  --_panel-padding: 0.75rem;
  --_panel-gap: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  contain: content;
}

.acc-accordion * {
  margin: 0;
}
.acc-accordion-panel {
  position: relative;
  isolation: isolate;
  flex-basis: calc((var(--_panel-padding) * 2) + var(--_panel-height));
  overflow: hidden;
  padding: var(--_panel-padding);
  padding-right: calc(var(--_panel-padding) * 1);
}


@media (prefers-reduced-motion: no-preference) {
  .acc-accordion-panel {
    transition: flex-basis 500ms, flex-grow 500ms;
  }
}

.acc-accordion-panel:has([aria-expanded="true"]) {
  flex-basis: clamp(15rem, 30vh, 20rem);
  flex-grow: 1;
}

.acc-accordion-trigger {
  outline: 0;
}
.acc-accordion-icon {
    max-width: calc(var(--_button-size) / 2);
    width: calc(var(--_button-size) / 2);
    z-index: 10;
}


.acc-accordion-trigger {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding-left: 1em;
}

.acc-accordion-item-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.acc-accordion-title {
    padding-top: 1rem;
}
.acc-accordion-item__title.title-s {
    text-align: left;
}
.acc-accordion-panel:after {
  content: "";
    position: absolute;
    left: 1rem;
    bottom: 0px;
    height: 3px;
    width: 100%;
    background: linear-gradient(to right, var(--color-purple), var(--color-dark-blue));
}

.acc-accordion svg#chevron {
    height: 1.25em;
    stroke-width: 3px;
    transition: all .5s ease-in-out;
}
.acc-accordion-trigger[aria-expanded=true] svg {
    transform: rotate(90deg);
}
.bg-dark-purple .acc-accordion svg#chevron{
        stroke: white;
}
.acc-accordion-content {
    margin-left: 0;
    padding-right: 0;
}


.acc-accordion-content > p {
  transform: translateY(2rem);
  opacity: 0;

  margin-left: calc(var(--_button-size) + var(--_panel-gap));
}

@media (prefers-reduced-motion: no-preference) {
  .acc-accordion-panel:has([aria-expanded="true"]) p {
    transition: transform 500ms 500ms, opacity 500ms 500ms;
  }
}

.acc-accordion-panel:has([aria-expanded="true"]) p {
  transform: translateY(0);
  opacity: 1;
}

@media (min-width:768px){
.acc-accordion-panel {
  padding-right: calc(var(--_panel-padding) * 4);
}
.acc-accordion-panel:after {
    left: calc(var(--_button-size) + 1rem);
    }
      .acc-accordion-content {
    margin-left: calc(var(--_button-size) + 1rem);
    padding-right: 6vw; padding-top: 1rem;
}
.acc-accordion-icon {
    max-width: var(--_button-size);
    width: var(--_button-size);
}
}