.carousel {
  --carousel-fading-mobile-height: 430px;
  --carousel-fading-tablet-height: 256px;
  --carousel-fading-desktop-height: 316px;

  --carousel-feature-mobile-height: 210px;
  --carousel-feature-desktop-height: 270px;

  --carousel-hero-desktop-height: 549px;
  --carousel-hero-tablet-height: 768px;
  --carousel-hero-img-tablet-height: 436px;
  --carousel-hero-mobile-height: 840px;
  --carousel-hero-img-mobile-height: 480px;

  --carousel-inline-mobile-height: 270px;
  --carousel-inline-desktop-height: 230px;

  --carousel-partner-small-height: 80px;
  --carousel-partner-small-desktop-width: 172px;
  --carousel-partner-small-mobile-width: 156px;

  --carousel-partner-large-desktop-height: 250px;
  --carousel-partner-large-tablet-height: 136px;
  --carousel-partner-large-mobile-height: 156px;

  --carousel-rectangular-mobile-width: 328px;
  --carousel-rectangular-tablet-width: 704px;
  --carousel-rectangular-desktop-width: 956px;

  --carousel-flip-desktop-height: 574px;
  --carousel-flip-desktop-width: 368px;
  --carousel-flip-tablet-height: 494px;
  --carousel-flip-tablet-width: 312px;
  --carousel-flip-mobile-height: 468px;
  --carousel-flip-mobile-width: 296px;
  --carousel-flip-icon-side: 80px;

  --carousel-rect-inline-desktop-height: 198px;
  --carousel-rect-inline-desktop-width: 352px;
  --carousel-rect-inline-tablet-height: 231px;
  --carousel-rect-inline-tablet-width: 410px;
  --carousel-rect-inline-mobile-height: 185px;
  --carousel-rect-inline-mobile-width: 328px;

  --carousel-slide-background-light-left: linear-gradient(143deg, rgba(255, 255, 255, 0.00) 76.77%, rgba(0, 212, 166, 0.20) 100%), #F1F4F8;
  --carousel-slide-background-light-right: linear-gradient(217deg, rgba(255, 255, 255, 0) 76.77%, rgba(0, 212, 166, 0.20) 100%), #F1F4F8;
  --carousel-slide-background-dark: linear-gradient(180deg, #12498A 0%, #051324 100%);

  position: relative;
}

.carousel-wrapper {
  max-width: var(--container-size);
}

.carousel .carousel-slides-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.carousel .carousel-slides,
.carousel .carousel-slide-indicators {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel .carousel-slides {
  display: flex;
  gap: var(--size-16);
  scroll-behavior: auto;
  scroll-snap-type: x mandatory;
  overflow: hidden clip;
}

.carousel .carousel-slides::-webkit-scrollbar {
  display: none;
}

.carousel .carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: min(50vw, calc(100dvh - var(--header-height)));
}

.carousel .carousel-slide:has(.carousel-slide-content[data-align='center']) {
  align-items: center;
}

.carousel .carousel-slide:has(.carousel-slide-content[data-align='right']) {
  align-items: flex-end;
}

.carousel .carousel-slide .carousel-slide-asset picture {
  all: unset;
}

.carousel .carousel-slide .carousel-slide-asset picture > img,
.carousel .carousel-slide .carousel-slide-asset video {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: relative;
}

.carousel .carousel-slide .carousel-slide-asset.full-width picture {
  position: absolute;
  inset: 0;
}

.carousel .carousel-slide .carousel-slide-asset.full-width picture > img,
.carousel .carousel-slide .carousel-slide-asset.full-width video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.carousel .carousel-slide .carousel-slide-content {
  z-index: 1;
  margin: 0;
  padding: 0;
  width: 100%;
}

.carousel .carousel-controls {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--size-48);
  margin-top: var(--size-32);
  padding: var(--size-12) 0;
}

.carousel-controls .slide-prev, 
.carousel-controls .slide-next {
  width: var(--size-24);
  height: var(--size-24);
  border-radius: var(--size-4);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-primary);
  background: var(--color-teal-500);
}

.carousel-controls .slide-prev:hover, 
.carousel-controls .slide-next:hover {
  background: var(--color-teal-300);
  cursor: pointer;
}

.carousel-controls .slide-prev[aria-disabled="true"],
.carousel-controls .slide-next[aria-disabled="true"] {
  background: var(--color-gray-10);
  border: 1px solid var(--color-gray-50);
  cursor: not-allowed;
  pointer-events: none;
}

.carousel .carousel-slide-indicators {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--size-12);
  line-height: 0;
}

.carousel .carousel-slide-indicator button {
  width: var(--size-12);
  height: var(--size-12);
  border-radius: 50%;
  background: var(--color-gray-10);
  border: 1px solid var(--color-gray-50);
  cursor: pointer;
  margin: 0;
  padding: 0;
  transition: background-color 0.2s;
}

.carousel .carousel-slide-indicator button:hover,
.carousel .carousel-slide-indicator button:focus-visible {
  background: var(--color-gray-50);
}

.carousel .carousel-slide-indicator button.active {
  background: var(--color-teal-500);
  border: 1px solid var(--color-blue-brand);
}

.carousel .carousel-slide-indicator button.active:hover,
.carousel .carousel-slide-indicator button.active:focus-visible {
  background: var(--color-teal-300);
}

.carousel .carousel-navigation-buttons {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
  width: var(--container-size);
  padding: var(--size-24);
  pointer-events: none;
  max-width: calc(100vw - var(--size-48));
}

.carousel .carousel-navigation-buttons button {
  position: relative;
  width: var(--size-24);
  height: var(--size-24);
  margin: 0;
  border-radius: var(--corner-radius-cr-2);
  padding: var(--size-4);
  background: var(--color-teal-500);
  transition: background-color 0.2s;
  color: var(--color-white);
  pointer-events: auto;
}

.carousel .carousel-navigation-buttons button:hover,
.carousel .carousel-navigation-buttons button:focus-visible {
  background: var(--color-teal-300);
  cursor: pointer;
}

.carousel .carousel-navigation-buttons button::after {
  display: block;
  content: '';
  border: 2px solid;
  border-bottom: 0;
  border-left: 0;
  height: 12px;
  width: 12px;
  position: absolute;
  top: 50%;
  left: calc(50% + 2px);
  transform: translate(-50%, -50%) rotate(-135deg);
}

.carousel .carousel-navigation-buttons button.slide-next::after {
  transform: translate(-50%, -50%) rotate(45deg);
  left: calc(50% - 2px);
}

.carousel .button-container {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0;
  padding-top: 4px;
  padding-left: 4px;
  border-top-left-radius: var(--corner-radius-cr-2);
}


.carousel .button-container::before {
  top: calc(-1 * var(--size-8));
  right: 0;
}

.carousel .button-container::after {
  bottom: 0;
  left: calc(-1 * var(--size-8));
}  

.carousel .button-container :is(a, button) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--size-4);
  background-color: var(--color-teal-500);
  border-radius: var(--corner-radius-cr-2);
  margin: 0;
  padding: var(--size-8) var(--size-12);
  color: var(--color-charcoal-brand);
  font-size: var(--scale-paragraph);
  line-height: var(--paragraph-line-height);
  cursor: pointer;
  border: none;
  font: inherit;
  text-align: left;
  text-decoration: none;
  border-bottom-right-radius: var(--corner-radius-cr-4);
}

.carousel .button-container :is(a, button)::after {
  content: "";
  display: block;
  width: var(--size-18);
  height: var(--size-18);
  mask-image: url(./../../icons/arrow-outward.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--color-blue-link);
}

.carousel .button-container :is(a, button):hover {
  background-color: var(--color-teal-200);
  transform: none;
  text-decoration: none;
}

.carousel:has(.carousel-slides.compact) .carousel-navigation-buttons,
.carousel:has(.carousel-slides.compact) .carousel-controls {
  display: none;
}

.carousel.autoplay .autoplay-btn {
  all: unset;
  outline: revert;
  width: var(--size-24);
  height: var(--size-24);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.carousel.autoplay .autoplay-btn::after {
  content: '';
  mask-image: url(./../../icons/play_icon.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--color-charcoal-brand);
  width: var(--size-24);
  height: var(--size-24);
  transform: scale(1);
  transform-origin: center;
  transition: transform 300ms ease-out;
  will-change: transform;
}

.carousel.autoplay .autoplay-btn:hover::after {
  transform: scale(1.1);
}

.carousel.autoplay .autoplay-btn.playing::after {
  content: '';
  mask-image: url(./../../icons/pause_icon_filled.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--color-charcoal-brand);
  width: var(--size-24);
  height: var(--size-24);
  transform: scale(1);
  transform-origin: center;
  transition: transform 300ms ease-out;
  will-change: transform;
}

.carousel.autoplay .autoplay-btn.playing:hover::after {
  transform: scale(1.1);
}

.carousel.autoplay:has(.compact) .autoplay-btn{
  display: none;
}

.carousel:not(.partner-grid.small) .carousel-with-autoplay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.carousel .autoplay-btn-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

/* Carousel Hero Variation */
main > .section:first-child.carousel-container:has(.carousel.hero),
main > .section.carousel-container:has(.carousel.hero) {
  padding: 0;
  margin-top: calc(-1 * var(--header-bottom-margin));
}

.carousel-wrapper:has(.carousel.hero) {
  max-width: unset;
}

.carousel-wrapper:has(.carousel.hero.autoplay) {
  padding-bottom: var(--size-32);
}

.carousel.hero {
  position: relative;
  background-color: var(--color-charcoal-brand);
  display: flex;
  flex-direction: column;
  gap: var(--size-32);
}

.carousel.hero .carousel-slides-container:has(.compact) {
  padding-bottom: var(--size-32);
}

.carousel.hero .carousel-slides {
  width: 100%;
  min-height: var(--carousel-hero-mobile-height)
}

.carousel.hero .carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  width: 100%;
  min-height: var(--carousel-hero-mobile-height);
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.98);

  transition:
    opacity 800ms ease-in-out,
    transform 800ms ease-in-out;
  
  cursor: pointer;
}

.carousel.hero .carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.carousel.hero .carousel-slide .carousel-slide-asset picture {
  all: unset;
}

.carousel.hero .carousel-slide .carousel-slide-asset {
  position: absolute;
  top: 0;
  max-height: var(--carousel-hero-img-mobile-height);
}

.carousel.hero .carousel-slide .carousel-slide-asset picture > img, 
.carousel.hero .carousel-slide .carousel-slide-asset video {
  height: var(--carousel-hero-img-mobile-height);
  width: 100%;
}

.carousel.hero .carousel-navigation-buttons {
  padding: 0;
  transform: none;
  top: calc(var(--carousel-hero-img-mobile-height) - var(--size-48));;
}

.carousel.hero .carousel-slide .carousel-slide-content {
  color: var(--color-white);
  z-index: 1;
  position: absolute;
  top: var(--carousel-hero-img-mobile-height);
  margin-top: var(--size-32);
  width: var(--container-size);
  display: flex;
  flex-direction: column;
  gap: var(--size-8);
  justify-content: flex-start;
}

.carousel.hero .carousel-slide.align-content-left .carousel-slide-content {
  align-items: start;
  text-align: left;
}

.carousel.hero .carousel-slide.align-content-center .carousel-slide-content {
  align-items: center;
  text-align: center;
}

.carousel.hero .carousel-slide .slide-heading {
  font-size: var(--scale-h1);
  line-height: var(--h1-line-height);
  font-weight: var(--font-weight-bold);
  text-align: left;
  margin: 0;
  color: var(--color-white);
}

.carousel.hero .carousel-slide.align-content-center .slide-heading {
  text-align: center;
}

.carousel.hero .carousel-slide .slide-description p {
  margin: 0;
  padding: 0;
}

.carousel.hero .carousel-slide .button-container {
  all: unset;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--size-32);
  justify-content: center;
  align-items: center;
  margin-top: var(--size-32);
  width: 100%;
}

.carousel.hero .carousel-slide .button-container::after,
.carousel.hero .carousel-slide .button-container::before {
  content: none;
}

.carousel.hero .carousel-slide-content .button-container a {
  color: var(--color-black);
  border-radius: var(--corner-radius-cr-6);
  text-align: center;
  justify-content: center;
  padding: var(--size-12) var(--size-24);
  width: 100%;
  gap: 0;
}

.carousel.hero .carousel-slide-content .button-container a::after {
  content: '';
  width: 0;
}

.carousel.hero .carousel-slide-content .button-container .secondary {
  color: var(--color-white);
  background-color: transparent;
  border: var(--size-2) solid var(--color-teal-500);
}

.carousel.hero .carousel-slide-content .button-container .secondary:hover {
  color: var(--color-white);
}

.carousel.hero .carousel-slide-indicators {
  gap: 10px;
  padding: 12px 0 44px;
  background: unset;
}

.carousel.hero .carousel-slide-indicator button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #dadada;
  transition: unset;
  border: none;
  cursor: pointer;
}

.carousel.hero .carousel-slide-content .button-container .secondary.secondary:disabled,
.carousel.hero .carousel-slide-content .button-container .secondary.secondary:hover,
.carousel.hero .carousel-slide-content .button-container .secondary.secondary:focus-visible {
  background: var(--color-charcoal-brand)
}

.carousel.hero .carousel-slide-indicator button.active {
  background: var(--color-teal-500);
}

.carousel.hero .carousel-slide-indicator button:hover,
.carousel.hero .carousel-slide-indicator button:focus-visible {
  background: var(--color-teal-300);
}

.carousel.hero .carousel-navigation-buttons button {
  background: rgba(255 255 255 / 30%);
}

.carousel.hero .carousel-navigation-buttons button:hover {
  background: var(--color-teal-300);
}

.carousel.hero.autoplay .autoplay-btn {
  position: absolute;
  right: var(--size-12);
  bottom: calc(-1 * var(--size-32));
}

@media (width >= 600px) {
  .carousel.hero .carousel-slides {
    min-height: var(--carousel-hero-tablet-height)
  }

  .carousel.hero .carousel-slide {
    min-height: var(--carousel-hero-tablet-height);
  }

  .carousel.hero .carousel-navigation-buttons {
    top: calc(var(--carousel-hero-img-tablet-height) / 2);
  }

  .carousel.hero .carousel-slide-content .button-container {
    width: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: start;
    gap: 32px;
  }

  .carousel.hero .carousel-slide .button-container {
    width: auto;
  }

  .carousel.hero .carousel-slide-content .button-container a {
    width: auto;
  }

  .carousel.hero .carousel-slide-content p.button-container:nth-of-type(3) {
    margin-left: 32px;
  }

  .carousel.hero .carousel-slide .carousel-slide-content h1,
  .carousel.hero .carousel-slide-content .button-container .secondary {
    color: var(--color-white);
  }
}

@media (width >= 900px) {
  .carousel.hero {
    position: relative;
  }

  .carousel.hero .carousel-slides {
    height: var(--carousel-hero-desktop-height);
    min-height: var(--carousel-hero-desktop-height);
  }

  .carousel.hero .carousel-slide {
    min-height: var(--carousel-hero-desktop-height);
    height: var(--carousel-hero-desktop-height);
  }

  .carousel.hero .carousel-slide .carousel-slide-asset {
    position: absolute;
    inset: 0;
    max-height: var(--carousel-hero-desktop-height);
  }

  .carousel.hero .carousel-slide .carousel-slide-asset picture > img,
  .carousel.hero .carousel-slide .carousel-slide-asset video {
    height: var(--carousel-hero-desktop-height);
    width: 100%;
  }

  .carousel.hero .carousel-controls {
    position: absolute;
    bottom: 0;
  }

  .carousel.hero .carousel-slide .carousel-slide-content {
    max-width: var(--container-size);
    top: calc((var(--carousel-hero-desktop-height) / 3));
    display: flex;
    justify-content: center;
    padding: 0 var(--size-32);
  }

  .carousel.hero .carousel-slide .slide-heading,
  .carousel.hero .carousel-slide .slide-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .carousel.hero .carousel-slide .button-container {
    margin-top: var(--size-8);
  }

  .carousel.hero .carousel-slide-content:has(.button-container) {
    max-width: 70%;
  }
}

@media (width < 900px) {
  .carousel.hero {
    overflow-anchor: none;
    gap: 0;
  }

  .carousel.hero .carousel-slides {
    min-height: unset;
    height: auto;
  }

  .carousel.hero .carousel-slide {
    height: auto;
    min-height: unset;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .carousel.hero .carousel-slide.active {
    position: relative;
    z-index: 1;
  }

  .carousel.hero .carousel-slide .carousel-slide-asset {
    position: relative;
    width: 100%;
    height: var(--carousel-hero-img-mobile-height);
    flex: 0 0 auto;
    overflow: hidden;
  }

  .carousel.hero .carousel-slide .carousel-slide-asset picture > img,
  .carousel.hero .carousel-slide .carousel-slide-asset video {
    height: 100%;
  }

  .carousel.hero .carousel-slide .carousel-slide-content {
    position: static;
    top: auto;
    width: 100%;
    margin-top: 0;
    padding: var(--size-32) var(--size-16) var(--size-40);
    box-sizing: border-box;
  }

  .carousel.hero .carousel-navigation-buttons {
    top: calc(var(--carousel-hero-img-mobile-height) - var(--size-48));
  }

  .carousel.hero .carousel-controls {
    margin-top: 0;
    background-color: var(--color-charcoal-brand);
  }
}
/* -------------------------------------------------------------------------------------------------------------------------- */
/* Carousel Fading Variant */
main > .section.carousel-container:has(.carousel.fading) {
  padding: 0;
}

.carousel-wrapper:has(.carousel.fading) {
  max-width: unset;
}

.carousel.fading .carousel-slides-container {
  position: relative;
}

.carousel.fading .carousel-slides {
  gap: var(--size-16);
}

.carousel.fading .carousel-slides::before,
.carousel.fading .carousel-slides::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc((13% - var(--size-16)));
  pointer-events: none;
  z-index: 10;
}

.carousel.fading .carousel-slides::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,1.00) 0%,
    rgba(255,255,255,0.92) 6.67%,
    rgba(255,255,255,0.85) 13.33%,
    rgba(255,255,255,0.78) 20%,
    rgba(255,255,255,0.70) 26.67%,
    rgba(255,255,255,0.62) 33.33%,
    rgba(255,255,255,0.54) 40%,
    rgba(255,255,255,0.46) 46.67%,
    rgba(255,255,255,0.38) 53.33%,
    rgba(255,255,255,0.30) 60%,
    rgba(255,255,255,0.22) 66.67%,
    rgba(255,255,255,0.15) 73.33%,
    rgba(255,255,255,0.09) 80%,
    rgba(255,255,255,0.05) 86.67%,
    rgba(255,255,255,0.02) 93.33%,
    rgba(255,255,255,0.00) 100%
  );
  opacity: 1;
  transition: opacity 300ms ease-in-out;
}

.carousel.fading.dark .carousel-slides::before {
  background: linear-gradient(
    to right,
    rgb(from var(--color-blue-brand) r g b / 1.00) 0%,
    rgb(from var(--color-blue-brand) r g b / 0.92) 6.67%,
    rgb(from var(--color-blue-brand) r g b / 0.85) 13.33%,
    rgb(from var(--color-blue-brand) r g b / 0.78) 20%,
    rgb(from var(--color-blue-brand) r g b / 0.70) 26.67%,
    rgb(from var(--color-blue-brand) r g b / 0.62) 33.33%,
    rgb(from var(--color-blue-brand) r g b / 0.54) 40%,
    rgb(from var(--color-blue-brand) r g b / 0.46) 46.67%,
    rgb(from var(--color-blue-brand) r g b / 0.38) 53.33%,
    rgb(from var(--color-blue-brand) r g b / 0.30) 60%,
    rgb(from var(--color-blue-brand) r g b / 0.22) 66.67%,
    rgb(from var(--color-blue-brand) r g b / 0.15) 73.33%,
    rgb(from var(--color-blue-brand) r g b / 0.09) 80%,
    rgb(from var(--color-blue-brand) r g b / 0.05) 86.67%,
    rgb(from var(--color-blue-brand) r g b / 0.02) 93.33%,
    rgb(from var(--color-blue-brand) r g b / 0.00) 100%
  )
}

.carousel.fading .carousel-slides::after {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(255,255,255,1.00) 0%,
    rgba(255,255,255,0.92) 6.67%,
    rgba(255,255,255,0.85) 13.33%,
    rgba(255,255,255,0.78) 20%,
    rgba(255,255,255,0.70) 26.67%,
    rgba(255,255,255,0.62) 33.33%,
    rgba(255,255,255,0.54) 40%,
    rgba(255,255,255,0.46) 46.67%,
    rgba(255,255,255,0.38) 53.33%,
    rgba(255,255,255,0.30) 60%,
    rgba(255,255,255,0.22) 66.67%,
    rgba(255,255,255,0.15) 73.33%,
    rgba(255,255,255,0.09) 80%,
    rgba(255,255,255,0.05) 86.67%,
    rgba(255,255,255,0.02) 93.33%,
    rgba(255,255,255,0.00) 100%
  );
  opacity: 1;
  transition: opacity 300ms ease-in-out;
}

.carousel.fading.dark .carousel-slides::after {
  background: linear-gradient(
    to left,
    rgb(from var(--color-blue-brand) r g b / 1.00) 0%,
    rgb(from var(--color-blue-brand) r g b / 0.92) 6.67%,
    rgb(from var(--color-blue-brand) r g b / 0.85) 13.33%,
    rgb(from var(--color-blue-brand) r g b / 0.78) 20%,
    rgb(from var(--color-blue-brand) r g b / 0.70) 26.67%,
    rgb(from var(--color-blue-brand) r g b / 0.62) 33.33%,
    rgb(from var(--color-blue-brand) r g b / 0.54) 40%,
    rgb(from var(--color-blue-brand) r g b / 0.46) 46.67%,
    rgb(from var(--color-blue-brand) r g b / 0.38) 53.33%,
    rgb(from var(--color-blue-brand) r g b / 0.30) 60%,
    rgb(from var(--color-blue-brand) r g b / 0.22) 66.67%,
    rgb(from var(--color-blue-brand) r g b / 0.15) 73.33%,
    rgb(from var(--color-blue-brand) r g b / 0.09) 80%,
    rgb(from var(--color-blue-brand) r g b / 0.05) 86.67%,
    rgb(from var(--color-blue-brand) r g b / 0.02) 93.33%,
    rgb(from var(--color-blue-brand) r g b / 0.00) 100%
  )
}

.carousel.fading .carousel-slide {
  scroll-snap-align: center;
  width: 100%;
  flex: 0 0 74%;
  aspect-ratio: 21 / 9;
  min-height: var(--carousel-fading-mobile-height);
  position: relative;
  overflow: hidden;
  border-radius: var(--corner-radius-cr-4);
}

.carousel.fading .carousel-slide:has(.button-container) {
  border-bottom-right-radius: 0;
}

.carousel.fading .carousel-slide:has(.button-container .cta-btn) .carousel-slide-asset picture {
  --r: 8px;
  --s: 8px;
  --x: 68px;
  --y: 30px;

  --_m: / calc(2 * var(--r)) calc(2 * var(--r))
        radial-gradient(#000 70%, #0000 72%);
  --_g: conic-gradient(
        from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),
        #0000 25%,
        #000 0
      );
  --_d: calc(var(--s) + var(--r));

  -webkit-mask:
      calc(100% - var(--_d) - var(--x)) 100% var(--_m),
      100% calc(100% - var(--_d) - var(--y)) var(--_m),
      radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 calc(100% + 1px))
        calc(-1 * var(--r) - var(--x)) calc(-1 * var(--r) - var(--y)),
      var(--_g) calc(-1 * var(--_d) - var(--x)) 0,
      var(--_g) 0 calc(-1 * var(--_d) - var(--y));
  -webkit-mask-repeat: no-repeat;

  mask:
      calc(100% - var(--_d) - var(--x)) 100% var(--_m),
      100% calc(100% - var(--_d) - var(--y)) var(--_m),
      radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 calc(100% + 1px))
        calc(-1 * var(--r) - var(--x)) calc(-1 * var(--r) - var(--y)),
      var(--_g) calc(-1 * var(--_d) - var(--x)) 0,
      var(--_g) 0 calc(-1 * var(--_d) - var(--y));
  mask-repeat: no-repeat;
}

.carousel.fading .carousel-slide .carousel-slide-asset {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.carousel.fading .carousel-slide .carousel-slide-asset-link {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
  width: 100%;
}

.carousel.fading .carousel-slide .carousel-slide-asset.full-width picture {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
  width: 100%;
}

.carousel.fading .carousel-slide .carousel-slide-asset img,
.carousel.fading .carousel-slide .carousel-slide-asset video {
  transform: translateX(0) scale(1);
  transition: transform 1s ease;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.carousel.fading .carousel-slide {
  cursor: default;
}

.carousel.fading .carousel-slide:has(> .carousel-slide-asset-link),
.carousel.fading .carousel-slide:has(> a.carousel-slide-content),
.carousel.fading .carousel-slide:has(.button-container[data-video-placeholder]) {
  cursor: pointer;
}

.carousel.fading .carousel-slide:has(.carousel-slide-asset:hover) .carousel-slide-asset img,
.carousel.fading .carousel-slide:has(.carousel-slide-asset:hover) .carousel-slide-asset video {
  transform: translateX(0) scale(1.1);
}

.carousel.fading .carousel-slide:has(.carousel-slide-asset-link:hover) .slide-heading,
.carousel.fading .carousel-slide-content:hover .slide-heading {
  text-decoration: underline;
}

.carousel.fading .carousel-slide .button-container :is(a, button) {
  font-weight: var(--font-weight-semibold);
  align-items: baseline;
}

.carousel.fading .carousel-slide:has(.carousel-slide-asset:hover) .button-container :is(a, button),
.carousel.fading .carousel-slide:hover .button-container :is(a, button) {
  background-color: var(--color-mint-brand);
  transform: none;
  text-decoration: none;
}

.carousel.fading .carousel-slide.active + .carousel-slide .carousel-slide-asset img,
.carousel.fading .carousel-slide.active + .carousel-slide .carousel-slide-asset video {
  transform: translateX(-4%) scale(1);
}

.carousel.fading .carousel-slide:has(+ .carousel-slide.active) .carousel-slide-asset img,
.carousel.fading .carousel-slide:has(+ .carousel-slide.active) .carousel-slide-asset video {
  transform: translateX(4%) scale(1);
}

.carousel.fading .carousel-slide-content {
  margin: 0;
  background-color: transparent;
  position: absolute;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  padding: var(--size-24);
  padding-bottom: var(--size-52);
  gap: var(--size-12);
  color: var(--color-white);
  height: 100%;
  text-decoration: none;
  pointer-events: none;
}

.carousel.fading .carousel-slide-content:hover .slide-heading {
  text-decoration: underline;
}

.carousel.fading .carousel-slide.align-content-left .carousel-slide-content  {
  align-items: start;
}

.carousel.fading .carousel-slide.align-content-left .carousel-slide-content,
.carousel.fading .carousel-slide.align-content-left .slide-heading,
.carousel.fading .carousel-slide.align-content-left .slide-description {
  text-align: left;
}

.carousel.fading .carousel-slide.align-content-center .carousel-slide-content {
  align-items: center;
}


.carousel.fading .carousel-slide.align-content-center .carousel-slide-content,
.carousel.fading .carousel-slide.align-content-center .slide-heading,
.carousel.fading .carousel-slide.align-content-center .slide-description {
  text-align: center;
}

.carousel.fading .carousel-slide.align-content-right .carousel-slide-content {
  align-items: flex-end;
}


.carousel.fading .carousel-slide.align-content-right .carousel-slide-content,
.carousel.fading .carousel-slide.align-content-right .slide-heading,
.carousel.fading .carousel-slide.align-content-right .slide-description {
  text-align: right;
}

.carousel.fading .carousel-slide-content .slide-heading {
  margin: 0;
  font-size: var(--scale-h4);
  line-height: var(--h4-line-height);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  color: var(--color-white);
}

.carousel.fading .carousel-slide-content .slide-description,
.carousel.fading .carousel-slide-content .slide-description * {
  font-size: var(--scale-paragraph);
  line-height: var(--paragraph-line-height);
}

.carousel.fading .carousel-slide-content:has(.button-container) .slide-description {
    margin-bottom:var(--size-32);
}

.carousel.fading .carousel-slide-content:has(.button-container):not(:has(.slide-description)) .slide-heading {
    margin-bottom: var(--size-32);
}

.carousel.fading.autoplay .autoplay-btn {
    bottom: var(--size-48);
    padding-right: var(--size-12);
    padding-top: var(--size-12);
}

.carousel.fading .button-container .cta-btn::after {
  background-color: var(--color-blue-brand);
  position: relative;
  top: var(--size-4);
}

@media (width >= 600px) {
  .carousel.fading .carousel-slide {
    min-height: var(--carousel-fading-tablet-height);
  }

  .carousel.fading .carousel-slides::before,
  .carousel.fading .carousel-slides::after {
    width: calc((15% - var(--size-16)));
  }

  .carousel.fading .carousel-slide {
    flex: 0 0 70%;
  }
}

@media (width >= 900px) {
  .carousel.fading .carousel-slide {
    min-height: var(--carousel-fading-desktop-height);
  }

  .carousel.fading .carousel-slides {
    gap: var(--size-24);
  }

  .carousel.fading .carousel-slides::before,
  .carousel.fading .carousel-slides::after {
    width: calc((20% - var(--size-24)));
  }

  .carousel.fading .carousel-slide {
    flex: 0 0 60%;
  }
}
/* -------------------------------------------------------------------------------------------------------------------------- */
/* Carousel Inline Variant */
.template-left-column.section .carousel-wrapper:has(.carousel.inline),
.template-right-column.section .carousel-wrapper:has(.carousel.inline) {
  max-width: unset;
}

.template-left-column.section .carousel.inline .carousel-slides-container,
.template-right-column.section .carousel.inline .carousel-slides-container {
  justify-content: flex-start;
}

.carousel.inline .carousel-slides {
  display: flex;
  align-items: stretch;
  gap: var(--size-24);
}

.carousel.inline .carousel-slide {
  flex: 0 0 100%;
  max-width: var(--carousel-inline-mobile-height);
  min-height: var(--carousel-inline-mobile-height);
  justify-content: start;
  cursor: default;
}

.carousel.inline .carousel-slide .carousel-slide-asset {
  aspect-ratio: 1 / 1;
  width: var(--carousel-inline-mobile-height);
  min-height: var(--carousel-inline-mobile-height);
}

.carousel.inline .carousel-slide .carousel-slide-asset img,
.carousel.inline .carousel-slide .carousel-slide-asset video {
  width: var(--carousel-inline-mobile-height);
  aspect-ratio: 1 / 1;
  border-radius: var(--corner-radius-cr-4);
  object-fit: cover;
}

.carousel.inline .carousel-slide .carousel-slide-content {
  margin: 0;
  width: var(--carousel-inline-mobile-height);
}

.carousel.inline .carousel-slide .slide-heading {
  color: var(--color-gray-slate);
  font-size: var(--scale-paragraph-large);
  line-height: var(--paragraph-large-line-height);
  font-weight: var(--font-weight-bold);
  margin: var(--size-8) 0;
}

.carousel.inline .button-container {
  all: unset;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--size-8);
  padding-top: var(--size-20);
  padding-bottom: var(--size-28);
}

.carousel.inline .button-container::before,
.carousel.inline .button-container::after {
  content: none;
}

.carousel.inline .button-container a {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  text-decoration: none;
  color: var(--color-blue-link);
  font-weight: var(--font-weight-semibold);
  align-items: baseline;
}

.carousel.inline .button-container a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-black), 
    inset 4px 0 0 0 white
}

.carousel.inline .button-container a::after {
  all: unset;
  content: "";
  display: block;
  width: var(--size-18);
  height: var(--size-18);
  mask-image: url(./../../icons/arrow-outward.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--color-blue-link);
  position: relative;
  top: var(--size-4);
}

.carousel.inline .button-container a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--size-2);
  width: calc(100% - var(--size-12) - var(--size-8));
  background: var(--color-mint-brand);
  mask: none;

  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.carousel.inline .button-container a:hover::before {
  transform: scaleX(1);
}

@media (width >= 600px) {
  .carousel.inline .carousel-slide {
    flex: 0 0 calc(100% / 2);
    max-width: var(--carousel-inline-desktop-height);
    min-height: var(--carousel-inline-desktop-height);
  }

  .carousel.inline .carousel-slide .carousel-slide-asset {
    width: var(--carousel-inline-desktop-height);
    min-height: var(--carousel-inline-desktop-height);
  }

  .carousel.inline .carousel-slide .carousel-slide-asset img,
  .carousel.inline .carousel-slide .carousel-slide-asset video {
    width: var(--carousel-inline-desktop-height);
    aspect-ratio: 1 / 1;
  }

  .carousel.inline .carousel-slide .carousel-slide-content {
    width: var(--carousel-inline-desktop-height);
  }
}

@media (width >= 900px) {
  .carousel.inline .carousel-slide {
    flex: 0 0 calc(100% / 3);
  }
}

/* Carousel Feature Variant */
.carousel.feature-cards .carousel-slides {
  display: flex;
  align-items: stretch;
  gap: var(--size-24);
}

.carousel.feature-cards .carousel-slide {
  flex: 0 0 calc(100% / 2);
  max-width: var(--carousel-feature-mobile-height);
  min-height: var(--carousel-feature-mobile-height);
  justify-content: start;
  cursor: default;
}

.carousel.feature-cards .carousel-slide .carousel-slide-asset {
  aspect-ratio: 1 / 1;
  position: relative;
  width: var(--carousel-feature-mobile-height);
  overflow: visible;
  transition: transform 300ms ease-in-out;
}

.carousel.feature-cards .carousel-slide .carousel-slide-asset picture,
.carousel.feature-cards .carousel-slide .carousel-slide-asset video {
  display: block;
  width: 100%;
  height: 100%;
  --card-cutout-offset-x: 16px;
  --card-cutout-offset-y: 16px;
  border-radius: var(--r);
  transform: scale(1);
  transition: transform 300ms ease-in-out;
}

.carousel.feature-cards .carousel-slide:not(:has(.button-container)) .carousel-slide-asset {
  overflow: hidden;
  border-radius: var(--card-cutout-radius, 8px);
}

.carousel.feature-cards .carousel-slide:not(:has(.button-container)) .carousel-slide-asset picture,
.carousel.feature-cards .carousel-slide:not(:has(.button-container)) .carousel-slide-asset video,
.carousel.feature-cards .carousel-slide:not(:has(.button-container)) .carousel-slide-asset .video-wrapper {
  border-radius: inherit;
  mask: none;
  -webkit-mask: none;
}

.carousel.feature-cards .carousel-slide .carousel-slide-asset img:hover {
  scale: 1.1;
}

.carousel.feature-cards .carousel-slide .carousel-slide-asset img,
.carousel.feature-cards .carousel-slide .carousel-slide-asset video {
  aspect-ratio: 1 / 1;
  scale: 1;
  transition: 1s scale;
}

.carousel.feature-cards .carousel-slide .carousel-slide-content {
  margin: 0;
  width: var(--carousel-feature-mobile-height);
}

.carousel.feature-cards .carousel-slide .carousel-slide-content .slide-description *,
.carousel.feature-cards .carousel-slide .slide-heading {
  color: var(--color-black);
  font-weight: var(--font-weight-bold);
  font-size: var(--scale-paragraph-large);
  line-height: var(--paragraph-large-line-height);
}

.carousel.feature-cards .carousel-slide .slide-heading {
  margin-top: var(--size-8);
}

.carousel.feature-cards .button-container {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  padding: 4px;
  gap: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  height: fit-content;
  transform: scale(1);
  transition: transform 300ms ease-in-out;
  transform-origin: top left;
}

.carousel.feature-cards .button-container::before,
.carousel.feature-cards .button-container::after {
  content: none;
}

.carousel.feature-cards .button-container a {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--corner-radius-cr-2);
  padding: var(--size-2);
  margin: 0;
  width: var(--size-24);
  height: var(--size-24);
}

.carousel.feature-cards .button-container a:hover {
  background-color: var(--color-teal-300);
  cursor: pointer;
}

.carousel.feature-cards .button-container :is(a, button)::after {
  background-color: var(--color-blue-brand);
}

@media (width >= 600px) {
  .carousel.feature-cards .carousel-slide {
    flex: 0 0 calc(100% / 3);
    
  }
}

@media (width >= 900px) {
  .carousel.feature-cards .carousel-slide {
    flex: 0 0 calc(100% / 4);
    max-width: var(--carousel-feature-desktop-height);
    min-height: var(--carousel-feature-desktop-height);
  }

  .carousel.feature-cards .carousel-slide .carousel-slide-asset {
    width: var(--carousel-feature-desktop-height);
    min-height: var(--carousel-feature-desktop-height);
    aspect-ratio: 1 / 1;
  }

  .carousel.feature-cards .carousel-slide .carousel-slide-content {
    width: var(--carousel-feature-desktop-height);
  }
}
/* Carousel Partner Variant */
.carousel-wrapper:has(.carousel.partner-grid.autoplay) {
  padding-bottom: var(--size-32);
}

.carousel.partner-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}

.carousel.partner-grid .carousel-slides-container {
  position: unset;
}

.carousel.partner-grid .carousel-slide .carousel-slide-asset.full-width  {
  border-radius: var(--corner-radius-cr-4);
  background: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.carousel.partner-grid .carousel-slide .carousel-slide-asset.full-width picture > img {
  border-radius: var(--corner-radius-cr-4);
  object-fit: contain;
  transform: scale(0.95);
  transition: transform 300ms ease-in-out;
  aspect-ratio: 1 / 1;
}

.carousel.partner-grid .carousel-slide .carousel-slide-asset.full-width picture > img:hover {
  transform: scale(1);
  cursor: pointer;
}

.carousel.partner-grid .carousel-slide .carousel-slide-asset.full-width picture {
  all: unset;
}

.carousel.partner-grid .carousel-slide .carousel-slide-asset .partner-asset:hover {
  cursor: pointer;
}

.carousel.partner-grid.autoplay .autoplay-btn {
  bottom: calc(-1 * var(--size-32));
  padding-top: var(--size-12);
}

@media (width < 600px) {
  .carousel.partner-grid .carousel-navigation-buttons {
    all: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--size-32);
    width: 100%;
  }

  .carousel.partner-grid .carousel-slides-container {
    flex-direction: column;
    gap: var(--size-48);
    overflow: hidden;
  }

  .carousel.partner-grid.autoplay .autoplay-btn {
    position: absolute;
    bottom: var(--size-32);
  }
}

/* Carousel Partner Variant - Large */
.carousel.partner-grid.large .carousel-slides-container,
.carousel.partner-grid.large .autoplay-btn-container {
  max-width: calc(var(--carousel-partner-large-mobile-height) * 2 + var(--size-16));
}

.carousel.partner-grid.large .carousel-slides {
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: var(--size-16); 
  width: 100%;
}

.carousel.partner-grid.large .carousel-page {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-16);
  grid-auto-flow: column;
  place-items: center;
}

.carousel.partner-grid.large .compact .carousel-page {
    grid-auto-columns: var(--carousel-partner-large-mobile-height);
    grid-template-columns: unset;
    place-content: center;
}

@media (width < 600px) {
  .carousel.partner-grid.large .carousel-page:has(.carousel-slide:nth-last-child(2)):not(:has(.carousel-slide:nth-child(3))) {
    justify-content: center;
    place-items: center;
  }
}

.carousel.partner-grid.large .carousel-slide .carousel-slide-asset .partner-asset {
  height: 100%;
  width: 100%;
}

.carousel.partner-grid.large .carousel-slide .carousel-slide-asset img  {
  height: 100%;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.carousel.partner-grid.large .carousel-slide  {
  min-height: unset;
  max-height: var(--carousel-partner-large-mobile-height);
  width: 100%;
  aspect-ratio: 1 / 1;
}

.carousel.partner-grid.large .carousel-slide .carousel-slide-asset {
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-white);
  padding: var(--size-16);
}

@media (width >= 600px) {
  .carousel.partner-grid.large .carousel-slides-container,
  .carousel.partner-grid.large .autoplay-btn-container {
    max-width: calc(var(--carousel-partner-large-tablet-height) * 4 + var(--size-16) * 3);
  }

  .carousel.partner-grid.large .carousel-slides {
    gap: var(--size-16);
  }

  .carousel.partner-grid.large .carousel-slide {
    max-height: unset;
  }

  .carousel.partner-grid.large .carousel-navigation-buttons {
    width: calc(var(--carousel-partner-large-tablet-height) * 4 + var(--size-16) * 3 + var(--size-56) * 2);
    padding: 0;
  }

  .carousel.partner-grid.large .carousel-page {
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(4, 1fr);
    gap: var(--size-16);
    min-width: unset;
    width: max-content;
  }

  .carousel.partner-grid.large .compact .carousel-page {
    grid-auto-columns: var(--carousel-partner-large-tablet-height);
    grid-template-columns: unset;
    place-content: center;
}
}

@media (width >= 900px) {
  .carousel.partner-grid.large .carousel-slides {
    grid-template-rows: repeat(1, auto);
    grid-template-columns: repeat(4, auto);
    gap: var(--size-24);
  }

  .carousel.partner-grid.large .carousel-navigation-buttons {
    width: calc(100% + var(--size-48));
  }

  .carousel.partner-grid.large .carousel-page {
    gap: var(--size-24);
  }

  .carousel.partner-grid.large .compact .carousel-page {
    grid-auto-columns: var(--carousel-partner-large-desktop-height);
    grid-template-columns: unset;
  }

  .carousel.partner-grid.large .carousel-slides-container,
  .carousel.partner-grid.large .autoplay-btn-container {
    max-width: calc(var(--carousel-partner-large-desktop-height) * 4 + var(--size-24) * 3);
  }

  .carousel.partner-grid.large .carousel-slide {
    max-height: unset;
  }

  .carousel.partner-grid.large .carousel-navigation-buttons {
    width: calc(var(--carousel-partner-large-desktop-height) * 4 + var(--size-24) * 3 + var(--size-56) * 2);
    padding: 0;
  }
}

/* Carousel Partner Variant - Small */
.carousel.partner-grid.small .carousel-slides-container {
  max-width: calc(var(--carousel-partner-small-mobile-width) * 2 + var(--size-16));
}

.carousel.partner-grid.small .carousel-slides {
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: var(--size-16); 
}

.carousel.partner-grid.small .carousel-page {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-16);
  grid-auto-flow: column;
  place-items: center;
}

.carousel.partner-grid.small .compact .carousel-page {
    grid-auto-columns: var(--carousel-partner-small-mobile-width);
    grid-template-columns: unset;
}

.carousel.partner-grid.small .carousel-slide  {
  min-height: unset;
  border-radius: var(--corner-radius-cr-4);
  aspect-ratio: 156 / 80;
  width: 100%;
}

.carousel.partner-grid.small .carousel-slide .carousel-slide-asset.full-width .partner-asset {
  aspect-ratio: 156 / 80;
}

.carousel.partner-grid.small .carousel-slide .carousel-slide-asset.full-width picture > img  {
  aspect-ratio: 156 / 80;
}

.carousel.partner-grid.small .carousel-slide .carousel-slide-asset .partner-asset {
  width: 100%;
  height: 100%;
  padding: var(--size-4) var(--size-8);
  background: var(--color-white);
  border-radius: var(--corner-radius-cr-4);
}

.carousel.partner-grid.small .carousel-slide .carousel-slide-asset.full-width picture > img  {
  aspect-ratio: 156 / 80;
}

@media (width >= 600px) {
  .carousel.partner-grid.small .carousel-slides-container {
    max-width: calc(var(--carousel-partner-small-desktop-width) * 3 + var(--size-16) * 2);
  }

  .carousel.partner-grid.small .carousel-slide {
    aspect-ratio: 172 / 80;
    max-height: var(--carousel-partner-small-height);
  }

  .carousel.partner-grid.small .carousel-page {
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
  }

  .carousel.partner-grid.small .carousel-navigation-buttons{
    width: calc(var(--carousel-partner-small-desktop-width) * 3 + var(--size-16) * 2 + var(--size-56) * 2);
    padding: 0;
  }

  .carousel.partner-grid.small .carousel-slide .carousel-slide-asset.full-width .partner-asset {
    aspect-ratio: 172 / 80;
  }

  .carousel.partner-grid.small .carousel-slide .carousel-slide-asset.full-width picture > img  {
    aspect-ratio: 172 / 80;
  }
}

@media (width >= 900px) {
  .carousel.partner-grid.small .carousel-slides-container {
    max-width: calc(var(--carousel-partner-small-desktop-width) * 6 + var(--size-24) * 5);
    padding: 0 var(--size-12);
  }

  .carousel.partner-grid.small .carousel-page {
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(6, 1fr);
    gap: var(--size-24);
    row-gap: var(--size-24);
  }

  .carousel.partner-grid.small .carousel-slide {
    max-width: var(--carousel-partner-small-desktop-width);
  }

  .carousel.partner-grid.small .carousel-navigation-buttons{
    width: calc(var(--carousel-partner-small-desktop-width) * 6 + var(--size-24) * 5 + var(--size-32) * 2);
    padding: 0;
  }
}

/* Carousel Rectangular Card Variant */
.carousel-wrapper:has(.carousel.rectangular-card) {
  max-width: unset;
}

.carousel.rectangular-card {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.carousel.rectangular-card .carousel-slides-container,
.carousel.rectangular-card .autoplay-btn-container {
  max-width: var(--carousel-rectangular-mobile-width);
}

.carousel.rectangular-card .carousel-slides {
  width: 100%;
  max-width: var(--container-size);
  gap: var(--size-48);
  border-radius: var(--corner-radius-cr-4);
  color: var(--color-gray-slate);
  font-size: var(--scale-paragraph);
  line-height: var(--paragraph-line-height);
}

.carousel.rectangular-card .carousel-slide {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--size-48);
  padding: var(--size-24);
  border-radius: 8px;
  background: var(--light-color);
  margin: 0 auto;
  min-height: unset;
  width: 100%;
  background: var(--color-gray-1);
}

.carousel.rectangular-card .carousel-slide .carousel-slide-asset {
  max-width: 180px;
  height: 240px;
  aspect-ratio: 3 / 4;
  border-radius: var(--corner-radius-cr-4);
  overflow: hidden;
}

.carousel.rectangular-card .carousel-slide .carousel-slide-asset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel.rectangular-card .carousel-slide .carousel-slide-content {
  display: flex;
  flex-direction: column;
  gap: var(--size-16);
  flex: 1;
  color: var(--color-gray-slate);
};

.carousel.rectangular-card .carousel-slide .carousel-slide-content .slide-heading {
  color: var(--color-gray-slate);
}

.carousel.rectangular-card .carousel-slide .carousel-slide-content .slide-heading > :first-child,
.carousel.rectangular-card .carousel-slide .carousel-slide-content .slide-heading [data-aue-type="richtext"] > :first-child {
  margin: 0;
  padding: 0;
}

.carousel.rectangular-card .carousel-slide .carousel-slide-content .slide-description {
  all: unset;
  margin: 0;
}

.carousel.rectangular-card .carousel-slide .carousel-slide-content .slide-description > :first-child,
.carousel.rectangular-card .carousel-slide .carousel-slide-content .slide-description [data-aue-type="richtext"] > :first-child 
{
  margin-top: 0;
}

.carousel.rectangular-card .button-container {
  all: unset;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: var(--size-8);
  padding-top: var(--size-20);
}

.carousel.rectangular-card .button-container::before {
  content: none;
}

.carousel.rectangular-card .button-container::after {
  all: unset;
  content: "";
  display: block;
  width: var(--size-18);
  height: var(--size-18);
  mask-image: url(./../../icons/arrow-outward.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--color-blue-link);
  position: relative;
  top: var(--size-4);
}

.carousel.rectangular-card .button-container a {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  text-decoration: none;
  color: var(--color-blue-link);
  font-weight: var(--font-weight-semibold);
}

.carousel.rectangular-card .button-container a::before {
  content: none;
}

.carousel.rectangular-card .button-container a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--size-2);
  width: 100%;
  background: var(--color-mint-brand);
  mask: none;

  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.carousel.rectangular-card .button-container a:hover::after {
  transform: scaleX(1);
}

.carousel.rectangular-card .button-container a:hover{
  font-weight: var(--font-weight-semibold);
} 

.carousel.rectangular-card.autoplay .autoplay-btn {
  bottom: var(--size-32);
  padding-top: var(--size-12);
}

.carousel.rectangular-card.autoplay .carousel-controls .slide-prev, 
.carousel.rectangular-card.autoplay .carousel-controls .slide-next {
  display: none;
}

@media (width >= 600px) {
  .carousel.rectangular-card .carousel-slides-container,
  .carousel.rectangular-card .autoplay-btn-container {
    max-width: var(--carousel-rectangular-tablet-width);
  }

  .carousel.rectangular-card .carousel-slide {
    flex-direction: row;
    align-items: flex-start;
    padding: var(--size-48);
  }
}

@media (width >= 900px) {
  .carousel.rectangular-card .carousel-slides-container,
  .carousel.rectangular-card .autoplay-btn-container {
    max-width: var(--carousel-rectangular-desktop-width);
  }
}

/* Carousel Flip Cards Variant */
.carousel.flip-cards {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: var(--size-16);
  row-gap: var(--size-24);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.carousel.flip-cards .carousel-slide {
  perspective: 1000px;
  position: relative;
  width: 100%;
  flex: 0 1 calc(100% - var(--size-16));
  min-height: unset;
  max-width: var(--carousel-flip-desktop-width);
}

.carousel.flip-cards .carousel-slide-asset {
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius:var(--corner-radius-cr-2);
}

.carousel.flip-cards .carousel-slide-asset img {
  object-fit: cover;
}

.carousel.flip-cards .flip-card-inner {
  transition: transform 0.7s ease-in-out;
  transform-origin: center, center;
  transform-style: preserve-3d;
  position: relative;
  aspect-ratio: 3/4;
  z-index: 1;
  width: 100%;
  height: var(--carousel-flip-mobile-height);
  max-width: var(--carousel-flip-mobile-width);
  border-radius: var(--corner-radius-cr-3);
}

.carousel.flip-cards .carousel-slide:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.carousel.flip-cards .carousel-slide:hover .flip-card-back {
  opacity: 1;
}

.carousel.flip-cards .carousel-slide:hover .flip-card-front {  
  opacity: 0;
}

.carousel.flip-cards .flip-card-front, 
.carousel.flip-cards .flip-card-back {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: var(--size-16);
  padding-bottom: 0;
  transition: opacity 0.7s ease;
  border-radius: var(--corner-radius-cr-3);
}

.carousel.flip-cards .flip-card-front {
  opacity: 1;
  background: var(--carousel-slide-background-light-left);
}

.carousel.flip-cards.dark .flip-card-front {
  background: var(--carousel-slide-background-dark);
}

.carousel.flip-cards .flip-card-back {
  transform: rotateY(180deg);
  padding: var(--size-24) var(--size-16) var(--size-24);
  background: var(--carousel-slide-background-light-right);
  opacity: 0;
}

.carousel.flip-cards.dark .flip-card-back {
  background: var(--carousel-slide-background-dark);
}

.carousel.flip-cards .flip-card-back .flip-icon-container {
  width: var(--carousel-flip-icon-side);
  max-height: var(--carousel-flip-icon-side);
  margin-bottom: var(--size-24);
  margin-top: 0;
}

.carousel.flip-cards .flip-card-back .flip-icon-container picture {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  max-height: var(--carousel-flip-icon-side);
}

.carousel.flip-cards .flip-card-back .flip-icon-container picture img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  max-height: var(--carousel-flip-icon-side);
  object-fit: contain;
}

.carousel.flip-cards .flip-card-back .slide-heading::before {
  content: "";
  mask-image: url(./../../icons/trophy.svg);
  width: var(--size-80);
  height: var(--size-80);
  display: block;
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: var(--color-blue-brand);
  margin-bottom: var(--size-24);
}

.carousel.flip-cards.dark .flip-card-back .slide-heading::before {
  background-color: var(--color-white);
}

.carousel.flip-cards .flip-card-back:has(.flip-icon-container) .slide-heading {
  margin-top: 0;
}

.carousel.flip-cards .flip-card-back:has(.flip-icon-container) .slide-heading::before {
  content: none;
}

.carousel.flip-cards .flip-card-front .slide-heading {
  font-size: var(--scale-paragraph-xtra-large);
  line-height: var(--paragraph-xtra-large-line-height);
  margin-bottom: var(--size-24);
  margin-top: var(--size-24);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}

.carousel.flip-cards.dark .flip-card-front .slide-heading {
  color: var(--color-white);
}

.carousel.flip-cards .flip-card-back .slide-heading {
  font-size: var(--scale-paragraph-xtra-large);
  line-height: var(--paragraph-xtra-large-line-height);
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
}

.carousel.flip-cards.dark .flip-card-back .slide-heading {
  color: var(--color-white);
}

.carousel.flip-cards .flip-card-back .slide-description {
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10; 
  line-clamp: 10;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: var(--size-12);
}

.carousel.flip-cards .flip-card-back .slide-description * {
  color: var(--color-gray-slate);
  margin-top: 0;
  margin-bottom: 0;
}

.carousel.flip-cards.dark .flip-card-back .slide-description *,
.carousel.flip-cards.dark .flip-card-back .slide-description {
  color: var(--color-white);
}

.carousel.flip-cards .button-container {
  all: unset;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: var(--size-4);
  padding-top: var(--size-12);
}

.carousel.flip-cards .button-container::before {
  content: none;
}

.carousel.flip-cards .button-container::after {
  all: unset;
  content: "";
  display: block;
  width: var(--size-18);
  height: var(--size-18);
  mask-image: url(./../../icons/arrow-outward.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: var(--color-blue-link);
  position: relative;
  top: var(--size-4);
}

.carousel.flip-cards.dark .button-container::after {
  background-color: var(--color-white);
}

.carousel.flip-cards .button-container a {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  text-decoration: none;
  color: var(--color-blue-link)
}

.carousel.flip-cards.dark .button-container a {
  color: var(--color-white);
}

.carousel.flip-cards .button-container a::before {
  content: none;
}

.carousel.flip-cards .button-container a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--size-2);
  width: 100%;
  background: var(--color-mint-brand);
  mask: none;

  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.carousel.flip-cards .button-container a:hover::after {
  transform: scaleX(1);
}

.carousel.flip-cards .button-container a:hover{
  font-weight: var(--font-weight-semibold);
}

@media (min-width: 600px) {
  .carousel.flip-cards .carousel-slide {
    flex: 0 1 calc((100% / 2) - var(--size-16));
    max-width: var(--carousel-flip-tablet-width);
  }

  .carousel.flip-cards .flip-card-inner {
    height: var(--carousel-flip-tablet-height);
    max-width: var(--carousel-flip-tablet-width);
  }
}

@media (min-width: 900px) {
  .carousel.flip-cards .carousel-slide {
    flex: 0 1 calc((100% / 3) - var(--size-16));
    max-width: var(--carousel-flip-desktop-width);
  }

  .carousel.flip-cards .flip-card-inner {
    height: var(--carousel-flip-desktop-height);
    max-width: var(--carousel-flip-desktop-width);
  }

  .carousel.flip-cards .flip-card-back.flip-card-back:not(:has(.flip-icon-container)) .slide-heading,
  .carousel.flip-cards .flip-card-back .flip-icon-container {
    margin-top: var(--size-24);
  }
}

/* Carousel Rectangular Inline Variant */
.template-left-column.section .carousel-wrapper:has(.carousel.rectangular-inline),
.template-right-column.section .carousel-wrapper:has(.carousel.rectangular-inline) {
  max-width: unset;
}

.template-left-column.section .carousel.rectangular-inline .carousel-slides-container,
.template-right-column.section .carousel.rectangular-inline .carousel-slides-container {
  justify-content: flex-start;
}

.carousel.rectangular-inline {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: var(--size-16);
  row-gap: var(--size-24);
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.carousel.rectangular-inline .carousel-slide {
    min-height: auto;
}

.carousel.rectangular-inline:not(.hide-carousel) .carousel-slide {
  max-width: 100%;
}

.carousel.rectangular-inline .carousel-slide-asset {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--corner-radius-cr-4);
}

.carousel.rectangular-inline[data-slide-count='1'] .carousel-slide {
  flex: 0 0 100%;
  max-width: 100%;
}

.carousel.rectangular-inline .carousel-slide-asset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--corner-radius-cr-4);
  transform: scale(1);
  transition: transform 300ms ease-in-out;
}

.carousel.rectangular-inline .carousel-slide:hover .carousel-slide-asset img {
  transform: scale(1.05);
}

.carousel.rectangular-inline .carousel-slide-content {
  margin-top: var(--size-8);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--size-8);
}

.carousel.rectangular-inline .slide-heading {
  line-height: 1.4;
  color: var(--color-gray-slate);
  margin: 0;
}

.carousel.rectangular-inline .slide-heading * {
  margin: 0;
}

.carousel.rectangular-inline .slide-description {
  display: block;
  font-size: var(--size-16, 16px);
  line-height: 1.5;
  color: var(--color-gray-body);
  margin: 0;
}

.carousel.rectangular-inline .button-container {
  all: unset;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--size-4);
  margin-top: var(--size-8);
}

.carousel.rectangular-inline .button-container :is(a, button) {
  text-wrap: balance;
  background: none;
  padding: 0;
  border: none;
  cursor: pointer;
  color: var(--color-blue-link);
  font-weight: var(--font-weight-semibold);
  font-size: var(--size-16, 16px);
  text-decoration: none;
  position: relative;
  line-height: var(--paragraph-line-height);
}

.carousel.rectangular-inline .button-container :is(a, button)::after {
  display: inline-block;
  vertical-align: middle;
}

.carousel.rectangular-inline .button-container :is(a, button)::before {
  content: none;
}

.carousel.rectangular-inline .button-container :is(a, button) .button-label {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--color-mint-brand), var(--color-mint-brand));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--size-2);
  padding-bottom: var(--size-2);
  transition: background-size 0.3s ease;
}

.carousel.rectangular-inline .button-container :is(a, button):hover .button-label,
.carousel.rectangular-inline .button-container :is(a, button):focus-visible .button-label {
  background-size: 100% var(--size-2);
}

.carousel.rectangular-inline .button-container::before,
.carousel.rectangular-inline .button-container::after {
  content: none;
}

.carousel.rectangular-inline:not(.hide-carousel) .carousel-slide-asset,
.carousel.rectangular-inline:not(.hide-carousel) .carousel-slide-content,
.carousel.rectangular-inline:not(.hide-carousel) .carousel-slide {
  width: 100%;
  max-width: 100%;
}


@media (width >= 600px) {
  .carousel.rectangular-inline:not(.hide-carousel) .carousel-slides-container {
    max-width: min(100%, calc((var(--carousel-rect-inline-tablet-width) * 2) + var(--size-16)));
  }

  .carousel.rectangular-inline .carousel-slide {
    flex: 0 0 calc((100% / 2) - var(--size-16));
    justify-content: flex-start;
  }

  .carousel.rectangular-inline:not(.hide-carousel) .carousel-slide {
    flex: 0 0 calc((100% - var(--size-16)) / 2);
    max-width: var(--carousel-rect-inline-tablet-width);
  }

  .carousel.rectangular-inline.hide-carousel .carousel-slides {
    align-items: flex-start;
  }

  .carousel.rectangular-inline .carousel-slide-asset {
    max-width: var(--carousel-rect-inline-tablet-width);
    height: auto;
  }

  .carousel.rectangular-inline[data-slide-count='1'] .carousel-slide-asset {
    aspect-ratio: 31 / 9;
    max-width: 100%;
  }
}

@media (width >= 900px) {
    /* 1 slide */
  .carousel.rectangular-inline {
    overflow: hidden;
  }

  .carousel.rectangular-inline .carousel-slides:has(li.carousel-slide:first-child:last-child) .carousel-slide {
    flex: 0 0 100%;
  }

  /* 2 slides  */
  .carousel.rectangular-inline[data-slide-count='2'] .carousel-slide {
    flex: 0 0 calc((100% - var(--size-16)) / 2);
  }

  /* 3 slides */
  .carousel.rectangular-inline[data-slide-count='3'] .carousel-slide {
    flex: 0 0 calc((100% - var(--size-16) * 2) / 3);
  }

  .carousel.rectangular-inline.hide-carousel .carousel-slides {
    justify-content: left;
  }

  .carousel.rectangular-inline:not(.hide-carousel) .carousel-slides-container {
    max-width: min(
      100%,
      calc((var(--carousel-rect-inline-desktop-width) * 3) + (var(--size-16) * 2))
    );
  }

  .carousel.rectangular-inline .carousel-slide {
    flex: 0 0 calc((100% / 3) - var(--size-16));
  }

  .carousel.rectangular-inline:not(.hide-carousel) .carousel-slide {
    flex: 0 0 calc((100% - (var(--size-16) * 2)) / 3);
    max-width: var(--carousel-rect-inline-desktop-width);
  }

  .section.template-left-column .carousel.rectangular-inline .carousel-slide,
  .section.template-right-column .carousel.rectangular-inline .carousel-slide {
    flex: 0 0 calc((100% / 2) - var(--size-16));
  }

    /* 1 slide */
  .carousel.rectangular-inline[data-slide-count='1'] {
    justify-content: flex-start;
  }

  .carousel.rectangular-inline .carousel-slides {
    overflow: hidden;
  }

  .carousel.rectangular-inline .carousel-slide-asset {
    max-width: unset;
    height: auto;
  }

  .carousel.rectangular-inline .carousel-slide-content {
    max-width: unset;
  }

  .section.template-left-column .carousel.rectangular-inline[data-slide-count='3'] .carousel-slide-asset,
  .section.template-right-column .carousel.rectangular-inline[data-slide-count='3'] .carousel-slide-asset {
    max-width: var(--carousel-rect-inline-desktop-width);
    height: auto;
  }

  .section.template-left-column .carousel.rectangular-inline[data-slide-count='3'] .carousel-slide-content,
  .section.template-right-column .carousel.rectangular-inline[data-slide-count='3'] .carousel-slide-content {
    max-width: var(--carousel-rect-inline-desktop-width);
  }

  .section:is(.template-left-column, .template-right-column) .carousel.rectangular-inline[data-slide-count='1'] .carousel-slide,
  .section:is(.template-left-column, .template-right-column) .carousel.rectangular-inline[data-slide-count='1'] .carousel-slide-asset,
  .section:is(.template-left-column, .template-right-column) .carousel.rectangular-inline[data-slide-count='1'] .carousel-slide-content {
    flex: 0 0 100%;
  }



}

/* Carousel Hide / Edit Mode */
.carousel.hide-carousel .carousel-slides {
  all: unset;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  row-gap: var(--size-16);
  gap: var(--size-16);
  flex-wrap: wrap;
  width: 100%;
}

.carousel.hide-carousel .carousel-slides::before,
.carousel.hide-carousel .carousel-slides::after {
  width: 0;
}

.carousel.hero.hide-carousel .carousel-slides {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--size-16);
  position: relative;
  width: 100%;
}

.carousel.hero.hide-carousel .carousel-slide {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.carousel.partner-grid.hide-carousel .carousel-slides {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--size-16);
}

.carousel.partner-grid.hide-carousel .carousel-slide {
  width: 100%;
  max-width: 100%;
}

.carousel.partner-grid.small.hide-carousel .carousel-slide {
  flex: unset;
  max-width: var(--carousel-partner-small-desktop-width);
}

.carousel.partner-grid.large.hide-carousel .carousel-slide {
  flex: unset;
  max-width: var(--carousel-partner-large-desktop-height);
}

.carousel.feature-cards.hide-carousel .carousel-slides, 
.carousel.inline.hide-carousel .carousel-slides {
  align-items: flex-start;
}

/* Additional styles for carousel with section bg image */
.section[data-text-color='section-text-light'] .carousel-navigation-buttons button,
.section[data-text-color='section-text-light'] .carousel-controls button {
  background: rgba(255, 255, 255, 0.3);
  color: var(--color-white);
}

.section[data-text-color='section-text-light'] .carousel-navigation-buttons button:hover,
.section[data-text-color='section-text-light'] .carousel-controls button:hover {
  background: var(--color-teal-300);
  color: var(--color-black);
}

.section[data-text-color='section-text-light'] .carousel.autoplay .autoplay-btn {
  background-color: transparent;
}

.section[data-text-color='section-text-light'] .carousel.autoplay .autoplay-btn::after {
  background-color: var(--color-white);
}

.section[data-text-color='section-text-light'] .carousel:not(.flip-cards):not(.fading):not(.rectangular-card) .slide-description *,
.section[data-text-color='section-text-light'] .carousel:not(.flip-cards):not(.fading):not(.rectangular-card) .slide-heading {
  color: var(--color-white);
}

.section[data-text-color='section-text-light'] .carousel.rectangular-card .slide-description,
.section[data-text-color='section-text-light'] .carousel.rectangular-card .slide-description *,
.section[data-text-color='section-text-light'] .carousel.rectangular-card .slide-description p {
  color: var(--text-primary);
}

.section[data-text-color='section-text-light'] .carousel.rectangular-card .button-container a {
  background-color: transparent;
}

.section[data-text-color='section-text-light'] .carousel.rectangular-card .button-container a:hover {
  background-color: transparent;
}

.section[data-text-color='section-text-light'] .carousel-controls .slide-prev[aria-disabled="false"], 
.section[data-text-color='section-text-light'] .carousel-controls .slide-next[aria-disabled="false"] {
  background: rgba(255 255 255 / 30%);
  color: var(--color-white);
}

.section[data-text-color='section-text-light'] .carousel-controls .slide-prev[aria-disabled="true"], 
.section[data-text-color='section-text-light'] .carousel-controls .slide-next[aria-disabled="true"] {
  background: rgba(255 255 255 / 15%);
  color: rgba(255 255 255 / 50%);
  cursor: not-allowed;
}

.section[data-text-color='section-text-light'] .carousel-controls .slide-prev:hover, 
.section[data-text-color='section-text-light'] .carousel-controls .slide-next:hover {
  color: var(--color-black);
  background: var(--color-teal-300);
}

.section[data-text-color='section-text-light'] .carousel .carousel-slide-indicator button:not(.active) {
  background: var(--color-gray-30);
}

.section[data-text-color='section-text-light'] .carousel .carousel-slide-indicator button:hover, 
.section[data-text-color='section-text-light'] .carousel .carousel-slide-indicator button:focus-visible {
  background: var(--color-gray-50);
}

.section[data-text-color='section-text-light'] .carousel.autoplay .autoplay-btn::after {
  background: var(--color-white);
}

.section[data-text-color='section-text-light'] .carousel.inline .button-container :is(a, button),
.section[data-text-color='section-text-light'] .carousel.rectangular-inline .button-container :is(a, button) {
  color: var(--color-white);
  background-color: transparent;
}

.section[data-text-color='section-text-light'] .carousel.inline .button-container :is(a, button)::after,
.section[data-text-color='section-text-light'] .carousel.rectangular-inline .button-container :is(a, button)::after {
  background-color: var(--color-white);
}

.section[data-text-color='section-text-light'] .carousel .carousel-slide-indicator button.active {
  background: var(--color-teal-500);
} 

/* Styles when there are lists in the cards description */
.carousel-slide-content .slide-description ul {
    margin: 0;
    padding-left: var(--size-24);
}