@ptcwebops/ptcw-design 4.2.5 → 4.2.6

package/dist/collection/components/ptc-background-video/ptc-background-video.js

@@ -4,8 +4,10 @@ export class PtcBackgroundVideo {
     this.videoSrc = undefined;
     this.posterSrc = undefined;
     this.overlay = true;
+    this.overlayType = 'standard';
     this.playButtonTitle = undefined;
     this.pauseButtonTitle = undefined;
+    this.buttonLocation = 'bottom-right';
     this.paused = undefined;
     this.type = 'default';
     this.isIframe = false;
@@ -38,7 +40,7 @@ export class PtcBackgroundVideo {
   }
   render() {
     const videoContent = this.isIframe ? (h("div", { class: "iframe-wrapper" }, h("iframe", { id: "jumbotron-iframe", src: this.videoSrc, frameborder: 0, allow: "autoplay", allowFullScreen: true, class: "background-video-embed" }))) : (h("video", { src: this.videoSrc, poster: this.posterSrc, autoplay: true, loop: true, muted: true, playsinline: true }));
-    return (h(Host, { class: this.type }, videoContent, !!this.videoSrc && this.playButtonTitle && (h("div", { class: "play-button" }, this.paused && (h("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), styles: "button.icon-toggle { padding :0px 8px; }", "aria-label": "Video Play button" }, h("icon-asset", { name: "play", size: "small", type: "ptc", color: "black" })))), !this.paused && !!this.pauseButtonTitle && (h("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), "aria-label": "Video Pause button" }, h("icon-asset", { name: "pause", size: "small", type: "ptc", color: "black" })))))), this.overlay ? h("div", { class: "video-overlay" }) : '', this.type == 'default' ? h("slot", null) : ''));
+    return (h(Host, { class: this.type }, videoContent, !!this.videoSrc && this.playButtonTitle && (h("div", { class: `play-button ${this.buttonLocation}` }, this.paused && (h("ptc-tooltip", { class: "play-btn", mode: "wrapper", description: this.playButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), styles: "button.icon-toggle { padding :0px 8px; }", "aria-label": "Video Play button" }, h("icon-asset", { name: "play", size: "small", type: "ptc", color: "black" })))), !this.paused && !!this.pauseButtonTitle && (h("ptc-tooltip", { class: "pause-btn", mode: "wrapper", description: this.pauseButtonTitle, position: "bottom-right", styles: ".wrapper-content.sc-ptc-tooltip .tooltip.sc-ptc-tooltip{min-width:unset!important;}" }, h("ptc-button", { type: "button", color: "icon-toggle", onClick: e => this.toggleVideoPlay(e), "aria-label": "Video Pause button" }, h("icon-asset", { name: "pause", size: "small", type: "ptc", color: "black" })))))), this.overlay ? h("div", { class: `video-overlay ${this.overlayType}` }) : '', this.type == 'default' ? h("slot", null) : ''));
   }
   toggleVideoPlay(e) {
     e.preventDefault();
@@ -119,6 +121,24 @@ export class PtcBackgroundVideo {
         "reflect": false,
         "defaultValue": "true"
       },
+      "overlayType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'standard' | 'dark'",
+          "resolved": "\"dark\" | \"standard\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Overlay Type standard is gray gradient. dark is dark gradient"
+        },
+        "attribute": "overlay-type",
+        "reflect": false,
+        "defaultValue": "'standard'"
+      },
       "playButtonTitle": {
         "type": "string",
         "mutable": false,
@@ -153,6 +173,24 @@ export class PtcBackgroundVideo {
         "attribute": "pause-button-title",
         "reflect": false
       },
+      "buttonLocation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'",
+          "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Pause Button Location"
+        },
+        "attribute": "button-location",
+        "reflect": false,
+        "defaultValue": "'bottom-right'"
+      },
       "type": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/ptc-homepage-video-background/ptc-homepage-video-background.css

@@ -0,0 +1,306 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card {
+  word-break: break-word;
+  hyphens: manual;
+  -webkit-hyphens: manual;
+  -moz-hyphens: manual;
+  -ms-hyphens: manual;
+}
+@supports (hyphenate-limit-chars: 12 3 3) {
+  h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    /* For Safari */
+    -webkit-hyphenate-limit-after: 3;
+    /* For Safari */
+    hyphenate-limit-chars: 12 3 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-last: always;
+    hyphenate-limit-zone: 6%;
+    -webkit-hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+    -webkit-hyphenate-limit-chars: 12 3 3;
+    -webkit-hyphenate-limit-lines: 2;
+    -moz-hyphens: auto;
+    -moz-hyphenate-limit-chars: 12 3 3;
+    -moz-hyphenate-limit-lines: 2;
+    -ms-hyphens: auto;
+    -ms-hyphenate-limit-chars: 12 3 3;
+    -ms-hyphenate-limit-lines: 2;
+  }
+}
+
+:host {
+  display: block;
+  position: relative;
+  margin: 72px 0;
+}
+@media only screen and (min-width: 1200px) {
+  :host {
+    margin: 112px 0;
+  }
+}
+
+.primary-content-wrapper {
+  max-width: 720px;
+  padding: 160px 24px;
+}
+@media only screen and (min-width: 1200px) {
+  .primary-content-wrapper {
+    padding: 160px 32px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .primary-content-wrapper {
+    padding: 160px 24px;
+  }
+}
+
+.bg-video {
+  width: 100%;
+}
+
+.container {
+  margin: auto;
+  max-width: 1200px;
+  position: relative;
+  z-index: 20;
+  min-height: 787px;
+  overflow: hidden;
+}
+
+.card-links {
+  margin: 0;
+  padding-bottom: 88px;
+}
+.card-links .secondary-content-wrapper {
+  margin: 0 24px;
+  max-width: 720px;
+}
+@media only screen and (min-width: 1200px) {
+  .card-links .secondary-content-wrapper {
+    margin: 0 32px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .card-links .secondary-content-wrapper {
+    margin: 0 24px;
+  }
+}
+.card-links .card-section {
+  display: flex;
+  position: relative;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  margin: 20px 0 0 0;
+  white-space: nowrap;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  transition: box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);
+}
+.card-links .card-section::-webkit-scrollbar {
+  display: none;
+}
+.card-links .card-section .card-link {
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+  z-index: 10;
+  align-items: center;
+  gap: 16px;
+  flex: 0 0 234px;
+  align-self: stretch;
+  border-radius: 4px 4px 0px 0px;
+  border-bottom: 2px solid var(--color-blue-07);
+  background: transparent;
+  backdrop-filter: blur(12px);
+  padding: 24px;
+  word-wrap: normal;
+  color: var(--color-white);
+  font-family: var(--ptc-font-latin);
+  font-size: var(--ptc-font-size-medium);
+  font-style: var(--ptc-font-style-normal);
+  font-weight: var(--ptc-font-weight-bold);
+  line-height: var(--ptc-line-height-densest);
+  margin: 0 12px;
+}
+.card-links .card-section .card-link:first-child {
+  margin-left: 24px;
+}
+.card-links .card-section .card-link:last-child {
+  margin-right: 24px;
+}
+.card-links .card-section .card-link .link-text {
+  display: block;
+  inline-size: 190px;
+  white-space: break-spaces;
+}
+.card-links .card-section .card-link .bgb,
+.card-links .card-section .card-link .bgh,
+.card-links .card-section .card-link .bgp {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transition: opacity var(--ptc-transition-medium) var(--ptc-ease-out);
+  z-index: 8;
+  opacity: 0;
+}
+.card-links .card-section .card-link .bgb {
+  background: linear-gradient(85deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.07) 100.13%);
+  opacity: 1;
+}
+.card-links .card-section .card-link .bgh {
+  background: linear-gradient(85deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.17) 100.13%);
+}
+.card-links .card-section .card-link .bgp {
+  background: linear-gradient(85deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.12) 100.13%);
+}
+.card-links .card-section .card-link:hover .bgb,
+.card-links .card-section .card-link:hover .bgp {
+  opacity: 0;
+}
+.card-links .card-section .card-link:hover .bgh {
+  opacity: 1;
+}
+.card-links .card-section .card-link:active .bgb,
+.card-links .card-section .card-link:active .bgh {
+  opacity: 0;
+}
+.card-links .card-section .card-link:active .bgp {
+  opacity: 1;
+}
+.card-links .card-section:before {
+  position: absolute;
+  width: 32px;
+  background: linear-gradient(85deg, rgba(255, 255, 255, 0) 0%, white 100.13%);
+  top: 16px;
+  right: 0;
+  bottom: 0;
+  z-index: 12;
+}
+.card-links .card-section.scroll-st {
+  box-shadow: inset 2px 0px 0px rgba(255, 255, 255, 0.3);
+}
+.card-links .card-section.scroll-ed {
+  box-shadow: inset -2px 0px 0px rgba(255, 255, 255, 0.3);
+}
+.card-links .card-section.scroll-ed.scroll-st {
+  box-shadow: inset 2px 0px 0px rgba(255, 255, 255, 0.3), inset -2px 0px 0px rgba(255, 255, 255, 0.3);
+}
+@media only screen and (min-width: 1200px) {
+  .card-links .card-section {
+    margin: 20px 32px 0;
+    align-items: flex-start;
+    justify-content: flex-start;
+    align-content: flex-start;
+  }
+  .card-links .card-section.scroll-st, .card-links .card-section.scroll-ed, .card-links .card-section.scroll-ed.scroll-st {
+    box-shadow: unset;
+  }
+  .card-links .card-section .card-link {
+    flex: unset;
+  }
+  .card-links .card-section .card-link:first-child {
+    margin-left: 0;
+  }
+  .card-links .card-section .card-link:last-child {
+    margin-right: 0;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .card-links .card-section {
+    margin: 20px 24px 0;
+  }
+}
+
+.card-section {
+  overflow-x: visible;
+  overflow-y: visible;
+  animation-duration: 0ms;
+  animation-delay: 1000ms;
+  animation-fill-mode: forwards;
+}
+@media only screen and (min-width: 1200px) {
+  .card-section {
+    overflow-x: visible;
+  }
+}
+.card-section .card-link {
+  animation-duration: 750ms;
+  animation-delay: 0ms;
+  animation-fill-mode: forwards;
+  opacity: 0;
+  transform: translate3d(0, 30%, 0);
+}
+.card-section .card-link.card-link-1 {
+  animation-delay: 0ms;
+}
+.card-section .card-link.card-link-2 {
+  animation-delay: 250ms;
+}
+.card-section .card-link.card-link-3 {
+  animation-delay: 500ms;
+}
+.card-section .card-link.card-link-4 {
+  animation-delay: 750ms;
+}
+.card-section.in-view {
+  animation-name: fadeUpInContainer;
+}
+.card-section.in-view .card-link {
+  animation-name: fadeUpIn;
+}
+
+@keyframes fadeUpIn {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 30%, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translateZ(0);
+  }
+}
+@keyframes fadeUpInContainer {
+  0% {
+    overflow: visible;
+    overflow-y: visible;
+    overflow-x: visible;
+    @media only screen and (min-width: 1200px) {
+      overflow-x: visible;
+    }
+  }
+  100% {
+    overflow: inherit;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    @media only screen and (min-width: 1200px) {
+      overflow-x: hidden;
+    }
+  }
+}

package/dist/collection/components/ptc-homepage-video-background/ptc-homepage-video-background.js

@@ -0,0 +1,243 @@
+import { Host, h } from '@stencil/core';
+import { observeInView } from '../../utils/utils';
+class SliderSettings {
+}
+export class PtcHomepageVideoBackground {
+  constructor() {
+    this.videoSrc = undefined;
+    this.posterSrc = undefined;
+    this.overlay = true;
+    this.playButtonTitle = undefined;
+    this.pauseButtonTitle = undefined;
+    this.buttonLocation = 'bottom-right';
+    this.links = undefined;
+  }
+  componentWillLoad() {
+    this.sliderSettings = {
+      IsMouseDown: false,
+      PreventAnchor: false,
+      Timeout: undefined,
+      StartX: 0,
+      ScrollLeft: 0
+    };
+    this.readLinkItems();
+  }
+  componentDidLoad() {
+    this.slider = this.el.shadowRoot.querySelector('.card-section');
+    this.slider.addEventListener('scroll', () => this.onSliderScroll());
+    window.addEventListener('scroll', () => this.onSliderScroll());
+    this.onSliderScroll();
+    observeInView(this.el, '.card-section', true);
+  }
+  readLinkItems() {
+    this.links = [];
+    const anchors = this.el.querySelectorAll('a');
+    anchors.forEach(a => {
+      let link = a;
+      if (link && this.links.length < 4) {
+        this.links.push(link);
+      }
+    });
+  }
+  onSliderScroll() {
+    if (this.slider.scrollLeft === 0 && this.slider.classList.contains('scroll-st')) {
+      this.slider.classList.remove('scroll-st');
+    }
+    else if (this.slider.scrollLeft !== 0 && !this.slider.classList.contains('scroll-st')) {
+      this.slider.classList.add('scroll-st');
+    }
+    if (this.slider.scrollLeft === (this.slider.scrollWidth - this.slider.offsetWidth) && this.slider.classList.contains('scroll-ed')) {
+      this.slider.classList.remove('scroll-ed');
+    }
+    else if (this.slider.scrollLeft !== (this.slider.scrollWidth - this.slider.offsetWidth) && !this.slider.classList.contains('scroll-ed')) {
+      this.slider.classList.add('scroll-ed');
+    }
+  }
+  onLinkClick(e) {
+    e.preventDefault();
+    if (!this.sliderSettings.PreventAnchor) {
+      let link = e.currentTarget;
+      if (link && link.href) {
+        window.location.href = link.href;
+      }
+    }
+    this.sliderSettings.PreventAnchor = false;
+    clearTimeout(this.sliderSettings.Timeout);
+  }
+  onSliderMouseDown(e, slider) {
+    e.preventDefault();
+    this.sliderSettings.IsMouseDown = true;
+    slider.classList.add('active');
+    this.sliderSettings.StartX = e.pageX - slider.offsetLeft;
+    this.sliderSettings.ScrollLeft = slider.scrollLeft;
+    this.sliderSettings.PreventAnchor = false;
+    this.sliderSettings.Timeout = setTimeout(() => {
+      this.sliderSettings.PreventAnchor = true;
+    }, 80);
+  }
+  onSliderMouseExit(e, slider) {
+    e.preventDefault();
+    clearTimeout(this.sliderSettings.Timeout);
+    this.sliderSettings.IsMouseDown = false;
+    slider.classList.remove('active');
+  }
+  onSliderMouseDrag(e, slider) {
+    if (this.sliderSettings.IsMouseDown) {
+      e.preventDefault();
+      const x = e.pageX - slider.offsetLeft;
+      const walk = (x - this.sliderSettings.StartX);
+      slider.scrollLeft = this.sliderSettings.ScrollLeft - walk;
+    }
+  }
+  render() {
+    return (h(Host, null, h("ptc-preloader-section", { "section-type": 'home-video-background' }, h("ptc-background-video", Object.assign({}, this.getBackgroundVideoSettings(), { "overlay-type": 'dark' }), h("div", { class: "container" }, h("div", { class: "primary-content-wrapper" }, h("slot", { name: "primary-content" })), h("div", { class: "card-links" }, h("div", { class: "secondary-content-wrapper" }, h("slot", { name: "secondary-content" })), h("div", Object.assign({ class: "card-section" }, this.getSliderBindings()), this.links && this.links.map((link, i) => {
+      const icon = link.getAttribute('data-icon');
+      return (h("a", { class: `card-link card-link-${i + 1}`, "tab-index": i + 1, href: link.href, onClick: (e) => this.onLinkClick(e) }, h("div", { class: "bgb" }), h("div", { class: "bgh" }), h("div", { class: "bgp" }), icon && h("icon-asset", { type: "ptc", size: "large", color: 'white', name: icon }), h("span", { class: "link-text" }, link.textContent)));
+    }))))))));
+  }
+  getBackgroundVideoSettings() {
+    return {
+      videoSrc: this.videoSrc,
+      posterSrc: this.posterSrc,
+      pauseButtonTitle: this.pauseButtonTitle,
+      playButtonTitle: this.playButtonTitle,
+      buttonLocation: this.buttonLocation,
+      overlay: this.overlay,
+      class: 'bg-video'
+    };
+  }
+  getSliderBindings() {
+    return {
+      onMouseDown: (e) => { this.onSliderMouseDown(e, this.slider); },
+      onMouseUp: (e) => { this.onSliderMouseExit(e, this.slider); },
+      onMouseLeave: (e) => { this.onSliderMouseExit(e, this.slider); },
+      onMouseMove: (e) => { this.onSliderMouseDrag(e, this.slider); }
+    };
+  }
+  static get is() { return "ptc-homepage-video-background"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-homepage-video-background.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-homepage-video-background.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "videoSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Video url"
+        },
+        "attribute": "video-src",
+        "reflect": false
+      },
+      "posterSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Poster url(Placeholder image till the video get the loaded)"
+        },
+        "attribute": "poster-src",
+        "reflect": false
+      },
+      "overlay": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Overlay(Optional, By default is true)"
+        },
+        "attribute": "overlay",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "playButtonTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Play Button Title"
+        },
+        "attribute": "play-button-title",
+        "reflect": false
+      },
+      "pauseButtonTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Pause Button Title"
+        },
+        "attribute": "pause-button-title",
+        "reflect": false
+      },
+      "buttonLocation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'",
+          "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Pause Button Location"
+        },
+        "attribute": "button-location",
+        "reflect": false,
+        "defaultValue": "'bottom-right'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "links": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css

@@ -236,6 +236,73 @@ ptc-link, ptc-square-card {
   display: flex;
 }
 
+.skeleton-background-video-tall {
+  width: 100%;
+  padding: 160px 0;
+  background-color: var(--color-gray-01);
+}
+.skeleton-background-video-tall .block {
+  background: linear-gradient(to right, var(--color-gray-02) 25%, var(--color-gray-03) 50%, var(--color-gray-02) 75%);
+  background-size: 200% 100%;
+  animation: loading 2.5s linear infinite;
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+.skeleton-background-video-tall .top-1 {
+  width: 60%;
+  height: 37px;
+  max-width: 561px;
+}
+.skeleton-background-video-tall .top-2 {
+  width: 70%;
+  height: 37px;
+  max-width: 605px;
+  margin-bottom: 16px;
+}
+.skeleton-background-video-tall .top-3 {
+  width: 90%;
+  height: 21px;
+  max-width: 688px;
+}
+.skeleton-background-video-tall .top-4 {
+  width: 50%;
+  height: 21px;
+  max-width: 521px;
+  margin-bottom: 32px;
+}
+.skeleton-background-video-tall .top-5 {
+  width: 177px;
+  height: 49px;
+}
+.skeleton-background-video-tall .bottom-1 {
+  width: 200px;
+  height: 30px;
+  margin-bottom: 16px;
+}
+.skeleton-background-video-tall .top-section {
+  margin-bottom: 160px;
+}
+.skeleton-background-video-tall .bottom-section {
+  overflow: hidden;
+}
+.skeleton-background-video-tall .cards {
+  overflow: hidden;
+  white-space: nowrap;
+}
+.skeleton-background-video-tall .cards .card {
+  display: inline-block;
+  padding: 24px;
+  width: 228px;
+  height: 50px;
+  margin: 0 16px;
+}
+.skeleton-background-video-tall .cards .card:first-child {
+  margin-left: 0;
+}
+.skeleton-background-video-tall .cards .card:last-child {
+  margin-right: 0;
+}
+
 @keyframes pulse {
   0% {
     opacity: 0.5;