/** Shopify CDN: Minification failed

Line 9:0 Unexpected "{"
Line 9:1 Expected identifier but found "%"
Line 10:9 Expected identifier but found whitespace
Line 11:1 Expected identifier but found "%"

**/
{% comment %}
  Custom. This CSS is scoped to only the image-with-text-carousel section.
{% endcomment %}

.image-with-text-carousel .image-with-text__wrapper {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: nowrap;
}

.image-with-text-carousel .image-with-text__wrapper .media-item .media {
  width: 100%;
  min-height: 100%;
  --padding-bottom: 25rem;
}

.image-with-text-carousel .image-with-text__wrapper .media-item .media .image-container .image-wrapper {
  height: 100%;
  border-radius: var(--large-radius);
  overflow: hidden;
}

.image-with-text-carousel .image-with-text__wrapper .media-item .media .image-container .image-wrapper img,
.image-with-text-carousel .image-with-text__wrapper .media-item .media .image-container .image-wrapper svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.image-with-text-carousel .image-with-text__wrapper .media-item .media .image-container.image-has-secondary {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.image-with-text-carousel .image-with-text__wrapper .media-item .media .image-container.image-has-secondary .image-wrapper {
  flex: 1 1 50%;
}

.image-with-text-carousel .image-with-text__wrapper .media-item.image-height--medium .media {
  --padding-bottom: 35rem;
}

.image-with-text-carousel .image-with-text__wrapper .media-item.image-height--large .media {
  --padding-bottom: 45rem;
}

.image-with-text-carousel .image-with-text__wrapper .media-item.image-height--adapt .media {
  --padding-bottom: var(--ratio-percent, 30rem);
}

@media screen and (max-width: 749px) {
  .image-with-text-carousel .image-with-text__wrapper .media-item .media {
    --padding-bottom: 15rem;
  }

  .image-with-text-carousel .image-with-text__wrapper .media-item.image-height--medium .media {
    --padding-bottom: 20rem;
  }

  .image-with-text-carousel .image-with-text__wrapper .media-item.image-height--large .media {
    --padding-bottom: 30rem;
  }

  .image-with-text-carousel .image-with-text__wrapper .media-item.image-height--adapt .media {
    --padding-bottom: var(--ratio-percent, 20rem);
  }

  .image-with-text-carousel .image-with-text__wrapper {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .image-with-text-carousel .image-with-text__wrapper .media-item,
  .image-with-text-carousel .image-with-text__wrapper .text-item {
    width: 100%;
    display: block;
  }

  .image-with-text-carousel .carousel-img {
    height: auto;
    object-fit: contain;
  }
}

@media screen and (min-width: 750px) {
  .image-with-text-carousel .image-with-text__wrapper .media-item {
    flex: 0 0 auto;
    width: 40%;
  }

  .image-with-text-carousel .image-with-text__wrapper .media-item.image-width--medium {
    width: 50%;
  }

  .image-with-text-carousel .image-with-text__wrapper .media-item.image-width--large {
    width: 60%;
  }

  .image-with-text-carousel .image-with-text__wrapper.image-with-text--reverse .media-item {
    order: 2;
  }
}

.image-with-text-carousel .text-item {
  flex: 1 1 auto;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border-radius: var(--large-radius);
}

.image-with-text-carousel .text-item .text-content {
  max-width: 45rem;
}

.image-with-text-carousel .text-item .text-content .text-content-socials .social-item {
  --icon-width: 1.5rem;
}

.image-with-text-carousel .text-item .text-content .text-content-buttons:not(:first-child) {
  margin-top: 2rem;
}

.image-with-text-carousel .media-item,
.image-with-text-carousel .text-item {
  flex: 1 1 50%;
  display: flex;
  align-items: stretch;
}

.image-with-text-carousel .media-item .swiper,
.image-with-text-carousel .media-item .swiper-wrapper,
.image-with-text-carousel .media-item .swiper-slide,
.image-with-text-carousel .carousel-image-wrapper {
  height: 100%;
}

.image-with-text-carousel .carousel-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}