/* v1.0.17: mobile-only hero gradient placement and scale. */
.cgtj .cgtj-hero__mobile-gradient {
  display: none;
}

@media (max-width: 560px) {
  /* The desktop/tablet gradient is positioned against the full hero. On phones,
     use the artwork-bound copy below so it cannot drift into the body copy. */
  .cgtj .cgtj-hero > .cgtj-hero__gradient,
  .cgtj .cgtj-hero > .cgtj-gradient-positioned--hero {
    display: none !important;
  }

  .cgtj .cgtj-hero__art--mobile {
    isolation: isolate;
  }

  .cgtj .cgtj-hero__art--mobile .cgtj-hero__mobile-gradient {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    display: block;
    width: 200% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain;
    pointer-events: none;
    filter: none;
    transform: translate(-50%, -50%);
  }

  .cgtj .cgtj-hero__art--mobile .cgtj-hero__product {
    position: relative;
    z-index: 1;
  }
}