.collapsible-content {
  position: relative;
  z-index: 0;
}

.collapsible-section-layout {
  padding-bottom: 5rem;
  padding-top: 5rem;
}

@media screen and (min-width: 750px) {
  .collapsible-section-layout {
    padding-bottom: 7rem;
    padding-top: 7rem;
  }
}

/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
.collapsible-content__media {
  background: transparent;
  margin-bottom: 3rem;
}

.collapsible-content__media--small {
  height: 19.4rem;
}

.collapsible-content__media--large {
  height: 43.5rem;
}

@media screen and (min-width: 750px) {
  .collapsible-content__media--small {
    height: 31.4rem;
  }

  .collapsible-content__media--large {
    height: 69.5rem;
  }
}

@media screen and (min-width: 750px) {
  .collapsible-content__media {
    margin-bottom: 0;
  }
  .collapsible-content__grid--reverse {
    flex-direction: row-reverse;
  }
}

.collapsible-content-wrapper-narrow {
  margin: 0 auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  max-width: 50.4rem;
}

.collapsible-content__header {
  word-break: break-word;
  margin-bottom: 1rem;
}

.collapsible-content__heading {
  margin-bottom: 2rem;
  margin-top: 0;
}

@media screen and (min-width: 750px) {
  .collapsible-content__heading {
    margin-bottom: 3rem;
  }
}

/* check for flexbox gap in older Safari versions */

.collapsible-content__grid {
  display: flex;
  --grid-desktop-horizontal-spacing: 3rem;
}

.collapsible-content__grid .grid__item.collapsible-content__grid-item {
  margin-top: 0;
}
.collapsible-content__grid .grid__item {
  margin-top: 1rem;
}
@supports not (inset: 10px) {
  @media screen and (min-width: 750px) {
    .collapsible-content__grid:not(.collapsible-content__grid--reverse) .grid__item:last-child,
    .collapsible-content__grid--reverse .collapsible-content__grid-item {
      padding-left: 5rem;
      padding-right: 0;
    }
  }

  @media screen and (min-width: 990px) {
    .collapsible-content__grid:not(.collapsible-content__grid--reverse) .grid__item:last-child,
    .collapsible-content__grid--reverse .collapsible-content__grid-item {
      padding-left: 7rem;
    }
  }
}

.collapsible-content__wrapper {
  .accordion-item {
    border: 0 !important;
    margin: 0;
    position: relative;
    color: var(--neutral-900);
  }

  .accordion-body ul li {
    list-style-type: disc;
  }
  .accordion-body p {
    margin-bottom: 1rem;
  }

  .accordion-item {
    svg {
      width: 1.25rem;
      margin-top: -0.25rem;
      /* transform: rotate(0); */
      transition: transform 0.3s ease;
    }
  }

  .accordion-item:last-of-type {
    &::after {
      content: '';
      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 326 9" fill="none"  preserveAspectRatio="none">><path  d="M326 3.53534C286.322 5.3113 248.483 2.21487 209.922 3.93496C189.848 4.83039 169.737 3.67354 149.667 4.51221C127.576 5.43533 105.249 6.39124 83.1582 5.31147C68.6524 4.60245 54.1101 5.4884 39.5971 4.73423C30.0162 4.23636 20.3382 3.53533 10.7471 3.53533C7.74634 3.53533 2.56383 3.84153 0 5.13386" stroke="%23F5EDDC" stroke-width="2" stroke-linecap="round"/></svg>');
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
      position: absolute;
      left: 0;
      bottom: -0.25rem;
      width: 100%;
      height: 0.5rem;
      background-color: var(--neutral-900);
    }
  }

  .accordion-button {
    padding: 1rem 0;
  }

  .accordion-button.collapsed {
    svg {
      transform: rotate(45deg);
    }
  }
}

.collapsible-content__wrapper .accordion-button::after {
  display: none;
}

.collapsible-content__wrapper .accordion-item.odd-item::before {
  content: '';
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362 8" fill="none"  preserveAspectRatio="none"><path d="M1.00001 6.59484C38.4009 6.59484 75.8963 7.71203 113.176 4.8187C143.208 2.48791 173.869 2.70243 204.032 3.5754C246.148 4.79432 288.562 0.0360161 330.584 2.42091C337.117 2.79167 343.521 1.79926 350.095 1.79926C353.605 1.79926 357.837 2.43609 361 1" stroke="%23F5EDDC" stroke-width="2" stroke-linecap="round"/></svg>');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: -0.5rem;
  width: 100%;
  height: 8px;
  background-color: var(--neutral-900);
}
.collapsible-content__wrapper .accordion-item.even-item::before {
  content: '';
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 326 9" fill="none"  preserveAspectRatio="none">><path  d="M326 3.53534C286.322 5.3113 248.483 2.21487 209.922 3.93496C189.848 4.83039 169.737 3.67354 149.667 4.51221C127.576 5.43533 105.249 6.39124 83.1582 5.31147C68.6524 4.60245 54.1101 5.4884 39.5971 4.73423C30.0162 4.23636 20.3382 3.53533 10.7471 3.53533C7.74634 3.53533 2.56383 3.84153 0 5.13386" stroke="%23F5EDDC" stroke-width="2" stroke-linecap="round"/></svg>');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: -0.25rem;
  width: 100%;
  height: 8px;
  background-color: var(--neutral-900);
}
