@ptcwebops/ptcw-design 6.4.18 → 6.4.20-beta

package/dist/collection/components/ptc-case-studies-slider/ptc-case-studies-slider.css

@@ -83,7 +83,8 @@ swiper-slide {
 }
 .swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 /* 3D Effects */
 .swiper-3d.swiper-css-mode .swiper-wrapper {
@@ -390,8 +391,7 @@ button.swiper-pagination-bullet {
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
-          -moz-appearance: none;
-       appearance: none;
+          appearance: none;
 }
 .swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer;
@@ -559,8 +559,7 @@ button.swiper-pagination-bullet {
 .swiper-zoom-container > canvas {
   max-width: 100%;
   max-height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 .swiper-slide-zoomed {
   cursor: move;
@@ -606,7 +605,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cube .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
   visibility: hidden;
   transform-origin: 0 0;
@@ -635,7 +635,8 @@ swiper-container .swiper-notification {
 .swiper-cube .swiper-slide-shadow-left,
 .swiper-cube .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
@@ -661,7 +662,8 @@ swiper-container .swiper-notification {
 }
 .swiper-flip .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
 }
 .swiper-flip .swiper-slide .swiper-slide {
@@ -676,10 +678,12 @@ swiper-container .swiper-notification {
 .swiper-flip .swiper-slide-shadow-left,
 .swiper-flip .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-creative .swiper-slide {
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
   transition-property: transform, opacity, height;
 }
@@ -688,7 +692,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cards .swiper-slide {
   transform-origin: center bottom;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
 }
 
@@ -782,14 +787,17 @@ a:focus-visible {
 
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .light-links a.light-link,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-grey-10 a.light-link,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-plm-grey a.light-link {
   color: var(--color-blue-04);
@@ -798,38 +806,47 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .light-links a.light-link:visited,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-grey-10 a.light-link:visited,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .light-links a.light-link:active,
 .light-links a.light-link:visited:active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-grey-10 a.light-link:active,
 .background-grey-10 a.light-link:visited:active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-plm-grey a.light-link:active,
 .background-plm-grey a.light-link:visited:active {
@@ -838,24 +855,30 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .light-links a.light-link:hover,
 .light-links a.light-link:visited:hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-grey-10 a.light-link:hover,
 .background-grey-10 a.light-link:visited:hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-plm-grey a.light-link:hover,
 .background-plm-grey a.light-link:visited:hover {
@@ -863,14 +886,17 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .light-links a.light-link.disabled,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-grey-10 a.light-link.disabled,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
@@ -878,14 +904,17 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .light-links a.light-link:focus-visible,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-grey-10 a.light-link:focus-visible,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
@@ -905,10 +934,6 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
-.white-links a {
-  color: var(--color-white) !important;
-}
-
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;

package/dist/collection/components/ptc-data-lookup/ptc-data-lookup.js

@@ -96,6 +96,10 @@ export class PtcDataLookup {
       elementId: "contact-jp-job-title",
       elqFieldName: "C_Title",
     });
+    this.elqLib.add_field_mapping({
+      elementId: "hdnHubVideoID",
+      elqFieldName: "HubVideoID",
+    });
   }
   getCookie(name) {
     let cookieValue = null;

package/dist/collection/components/ptc-featured-list/ptc-featured-list.css

@@ -88,14 +88,17 @@ a:focus-visible {
 
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .light-links a.light-link,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-grey-10 a.light-link,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-plm-grey a.light-link {
   color: var(--color-blue-04);
@@ -104,38 +107,47 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .light-links a.light-link:visited,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-grey-10 a.light-link:visited,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .light-links a.light-link:active,
 .light-links a.light-link:visited:active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-grey-10 a.light-link:active,
 .background-grey-10 a.light-link:visited:active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-plm-grey a.light-link:active,
 .background-plm-grey a.light-link:visited:active {
@@ -144,24 +156,30 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .light-links a.light-link:hover,
 .light-links a.light-link:visited:hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-grey-10 a.light-link:hover,
 .background-grey-10 a.light-link:visited:hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-plm-grey a.light-link:hover,
 .background-plm-grey a.light-link:visited:hover {
@@ -169,14 +187,17 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .light-links a.light-link.disabled,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-grey-10 a.light-link.disabled,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
@@ -184,14 +205,17 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .light-links a.light-link:focus-visible,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-grey-10 a.light-link:focus-visible,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
@@ -211,10 +235,6 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
-.white-links a {
-  color: var(--color-white) !important;
-}
-
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;

package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.css

@@ -145,14 +145,17 @@ a:focus-visible {
 
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .light-links a.light-link,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-grey-10 a.light-link,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-plm-grey a.light-link {
   color: var(--color-blue-04);
@@ -161,38 +164,47 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .light-links a.light-link:visited,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-grey-10 a.light-link:visited,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .light-links a.light-link:active,
 .light-links a.light-link:visited:active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-grey-10 a.light-link:active,
 .background-grey-10 a.light-link:visited:active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-plm-grey a.light-link:active,
 .background-plm-grey a.light-link:visited:active {
@@ -201,24 +213,30 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .light-links a.light-link:hover,
 .light-links a.light-link:visited:hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-grey-10 a.light-link:hover,
 .background-grey-10 a.light-link:visited:hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-plm-grey a.light-link:hover,
 .background-plm-grey a.light-link:visited:hover {
@@ -226,14 +244,17 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .light-links a.light-link.disabled,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-grey-10 a.light-link.disabled,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
@@ -241,14 +262,17 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .light-links a.light-link:focus-visible,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-grey-10 a.light-link:focus-visible,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
@@ -268,10 +292,6 @@ ptc-modal inline-form a,
   outline: 5px solid var(--keyboard-nav-outline);
 }
 
-.white-links a {
-  color: var(--color-white) !important;
-}
-
 .ptc-link {
   color: var(--color-gray-10);
   text-decoration: underline;

package/dist/collection/components/ptc-icon-component/ptc-icon-component.css

@@ -83,7 +83,8 @@ swiper-slide {
 }
 .swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 /* 3D Effects */
 .swiper-3d.swiper-css-mode .swiper-wrapper {
@@ -390,8 +391,7 @@ button.swiper-pagination-bullet {
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
-          -moz-appearance: none;
-       appearance: none;
+          appearance: none;
 }
 .swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer;
@@ -559,8 +559,7 @@ button.swiper-pagination-bullet {
 .swiper-zoom-container > canvas {
   max-width: 100%;
   max-height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 .swiper-slide-zoomed {
   cursor: move;
@@ -606,7 +605,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cube .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
   visibility: hidden;
   transform-origin: 0 0;
@@ -635,7 +635,8 @@ swiper-container .swiper-notification {
 .swiper-cube .swiper-slide-shadow-left,
 .swiper-cube .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
@@ -661,7 +662,8 @@ swiper-container .swiper-notification {
 }
 .swiper-flip .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
 }
 .swiper-flip .swiper-slide .swiper-slide {
@@ -676,10 +678,12 @@ swiper-container .swiper-notification {
 .swiper-flip .swiper-slide-shadow-left,
 .swiper-flip .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-creative .swiper-slide {
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
   transition-property: transform, opacity, height;
 }
@@ -688,7 +692,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cards .swiper-slide {
   transform-origin: center bottom;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
 }
 

package/dist/collection/components/ptc-img/ptc-img.css

@@ -128,4 +128,80 @@ ptc-footer {
   .hidden-lg {
     display: none !important;
   }
+}
+.lazy-bg {
+  background-image: none !important;
+  background-color: var(--color-gray-03);
+}
+
+.ptc-img {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.low-quality,
+.medium-quality,
+.high-quality {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.low-quality {
+  z-index: 1;
+}
+
+.medium-quality {
+  z-index: 2;
+  opacity: 0;
+}
+
+.high-quality {
+  z-index: 3;
+  opacity: 0;
+}
+
+.ptc-img--lazy .lazy-bg {
+  background-image: none !important;
+  background-color: var(--color-gray-03);
+}
+.ptc-img--lazy .low-quality,
+.ptc-img--lazy .medium-quality,
+.ptc-img--lazy .high-quality {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  transition: opacity 0.5s ease-in-out;
+}
+.ptc-img--lazy .low-quality {
+  z-index: 1;
+}
+.ptc-img--lazy .medium-quality {
+  z-index: 2;
+  opacity: 0;
+}
+.ptc-img--lazy .high-quality {
+  z-index: 3;
+  opacity: 0;
 }