.section-image-floating-wrapper {
  --text-min-height: 600px;
  --slide-image-fade-duration: 0.7s;
  --slide-item-flex-active: 5;
  --slide-item-flex-inactive: 1;
  --slide-item-flex-transition: flex 1s cubic-bezier(0.29, 0, 0.2, 1);

  display: flex;
  background-color: rgb(var(--color-background));
}

.image-floating__text-wrapper {
  flex: 1;
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-background));
}

.image-floating__heading {
  font-family: var(--text-font);
  font-style: var(--text-font-style);
  font-weight: var(--text-font-weight);
}

.image-floating__icon {
  width: 176px;
  height: 176px;
  line-height: 0;
  background-color: var(--icon-background-color);
  border-radius: 50%;
}

.image-floating__icon img {
  width: 100%;
  height: 100%;
}

.image-floating__slide-wrapper {
  position: relative;
  flex: 2;
}

.image-floating__slide-item {
  height: var(--image-height);
}

.image-floating__slide-item-link {
  display: block;
  width: 100%;
  height: 100%;
}

.image-floating__slide-item-link > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.image-floating__slide-item-link > svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 960px) {
  .image-floating__text-wrapper {
    min-height: var(--text-min-height);
  }

  .image-floating__heading {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .image-floating__desc {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .image-floating__slide-item {
    flex: var(--slide-item-flex-inactive);
    transition: var(--slide-item-flex-transition);
    will-change: flex;
  }

  .image-floating__slide-item.active {
    flex: var(--slide-item-flex-active);
  }

  .image-floating__slide-list {
    display: flex;
  }
}

@media (max-width: 959px) {
  .section-image-floating-wrapper {
    display: block;
  }
  .image-floating__text-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
  }

  .image-floating__icon-wrapper {
    position: absolute;
    inset-block-end: -25px;
    inset-inline-end: 30px;
  }

  .image-floating__icon {
    width: 60px;
    height: 60px;
  }

  .image-floating__slide-list {
    position: relative;
    height: var(--image-height);
  }

  .image-floating__slide-item {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    opacity: 0;
    transition: opacity var(--slide-image-fade-duration);
  }

  .image-floating__slide-item.fade-in {
    opacity: 1;
  }

  .image-floating__slide-item.fade-out {
    opacity: 0;
  }
}