.tf-featured-frame-card.tf-featured-frame-card--active[style*="--tf-featured-frame-image:"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: none !important;
}

.tf-featured-frame-card.tf-featured-frame-card--active[style*="--tf-featured-frame-image:"]::before,
.tf-featured-frame-card.tf-featured-frame-card--active[style*="--tf-featured-frame-image:"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--tf-featured-frame-image);
  background-repeat: no-repeat;
}

.tf-featured-frame-card.tf-featured-frame-card--active[style*="--tf-featured-frame-image:"]::before {
  z-index: 0;
  background-position: center;
  background-size: cover;
  filter: blur(24px);
  transform: scale(1.1);
}

.tf-featured-frame-card.tf-featured-frame-card--active[style*="--tf-featured-frame-image:"]::after {
  z-index: 0;
  bottom: auto;
  height: calc(100% / var(--tf-featured-frame-desktop-scale));
  background-position: var(--tf-featured-frame-desktop-x) var(--tf-featured-frame-desktop-y);
  background-size: 100% auto;
  transform-origin: var(--tf-featured-frame-desktop-x) var(--tf-featured-frame-desktop-y);
  transform: scale(var(--tf-featured-frame-desktop-scale));
}

.tf-featured-frame-card.tf-featured-frame-card--active[style*="--tf-featured-frame-image:"] > .e-con-inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .tf-featured-frame-card.tf-featured-frame-card--active[style*="--tf-featured-frame-image:"]::after {
    height: calc(100% / var(--tf-featured-frame-mobile-scale));
    background-position: var(--tf-featured-frame-mobile-x) var(--tf-featured-frame-mobile-y);
    transform-origin: var(--tf-featured-frame-mobile-x) var(--tf-featured-frame-mobile-y);
    transform: scale(var(--tf-featured-frame-mobile-scale));
  }
}

.tf-reframe-featured-single-hero {
  display: block;
  overflow: hidden;
}

.tf-reframe-featured-single-hero > .tf-reframe-featured-single-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--tf-reframe-featured-single-hero-desktop-x) var(--tf-reframe-featured-single-hero-desktop-y);
  transform-origin: var(--tf-reframe-featured-single-hero-desktop-x) var(--tf-reframe-featured-single-hero-desktop-y);
  transform: scale(var(--tf-reframe-featured-single-hero-desktop-scale));
}

@media (max-width: 768px) {
  .tf-reframe-featured-single-hero > .tf-reframe-featured-single-hero__image {
    object-position: var(--tf-reframe-featured-single-hero-mobile-x) var(--tf-reframe-featured-single-hero-mobile-y);
    transform-origin: var(--tf-reframe-featured-single-hero-mobile-x) var(--tf-reframe-featured-single-hero-mobile-y);
    transform: scale(var(--tf-reframe-featured-single-hero-mobile-scale));
  }

}