.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;
  }
  .healthcare-collaps {
    .accordion__title {
      font-size: 3.6rem !important;
    }
  }
  .why-collaps {
    .accordion__title {
      font-size: 3.6rem !important;
    }
  }
  .mbl-only {
    display: none;
  }
  .dsk-only {
    display: block;
  }
}

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

.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__grid--reverse {
    flex-direction: row-reverse;
  }
}

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

.collapsible-content__header {
  word-break: break-word;
}

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

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

.collapsible-none-layout .accordion + .accordion {
  border-top: 0;
}

.collapsible-row-layout .accordion:not(:first-child):not(.color-scheme-1) {
  margin-top: 1rem;
}

.caption-with-letter-spacing + h2 {
  margin-top: 1rem;
}

@media screen and (min-width: 750px) {
  .collapsible-content .accordion {
    margin-top: 0;
  }
}

.collapsible-row-layout .accordion {
  border: var(--text-boxes-border-width) solid
    rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  margin-bottom: 1.5rem;
  /* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
  transform: perspective(0);
}

.collapsible-row-layout .accordion summary,
.collapsible-row-layout .accordion .accordion__content {
  padding: 1.5rem;
}

.collapsible-row-layout .accordion .accordion__content {
  padding-top: 0;
}

.collapsible-content summary:hover {
  background: rgba(var(--color-foreground), 0.04);
}

.collapsible-content summary:hover .accordion__title {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* check for flexbox gap in older Safari versions */
@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 Section*/
.collapsible-content.content-container.content-container--full-width {
  .accordion {
    border-color: #000;
  }
  .accordion-img {
    .accordion__content {
      padding-top: 0;
      padding-bottom: 0;
      img {
        margin: 0;
      }
    }
  }
  .accordion summary,
  .accordion__content {
    max-width: 100%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }
  .accordion__content {
    padding-top: 0;
    padding-bottom: 2rem;
  }
  summary:hover {
    background-color: #fff;
  }
  .accordion__title,
  .accordion__title * {
    line-height: 1;
    margin: 0;
  }
  .accordion__content {
    font-size: 1.5rem;
    .okeReviews-reviewsWidget {
      padding-top: 0 !important;
    }
  }

  summary .icon-caret {
    height: 20px;
    width: 20px;
    top: 17px;
  }

  .collapsible-content-wrapper-narrow {
    max-width: 100% !important;
    padding: 0;
  }
  .collapsible-content__wrapper {
    padding-top: 0;
  }
  .collap-iwt {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    .collap-t {
      width: 40%;
    }
    .collap-i {
      width: 58%;
    }
  }
}

@media only screen and (max-width: 750px) {
  .collapsible-content.content-container.content-container--full-width {
    .grid__item {
      margin: 0 !important;
    }
    .accordion__title,
    .accordion__title * {
      font-size: 2.5rem !important;
    }
    .accordion__content {
      font-size: 16px;
    }

    summary .icon-caret {
      height: 18px;
      width: 18px;
      top: 18px;
    }

    .collap-iwt {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column-reverse;
      justify-content: space-between;
      .collap-t {
        width: 100%;
      }
      .collap-i {
        width: 100%;
        margin-bottom: 1.5rem;
      }
    }
  }
  .dsk-only {
    display: none;
  }
  .mbl-only {
    display: block;
  }

  .product_page {
    .accordion__title.inline-richtext.h4,
    .accordion__title.inline-richtext.h4 * {
      font-size: 2rem !important;
    }
    .accordion__content {
      font-size: 1.8rem;
    }
  }
}
