:root {
  --slot-width: 970px;
  --slot-height: 250px;
  --preview-scale: 1;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #f2f2f2;
  font-family: Arial, Helvetica, sans-serif;
}

.stage {
  display: grid;
  width: 100vw;
  height: 100vh;
  place-items: center;
  overflow: hidden;
  background: #f2f2f2;
}

.banner {
  position: relative;
  display: block;
  width: var(--slot-width);
  height: var(--slot-height);
  overflow: hidden;
  color: transparent;
  text-decoration: none;
  transform: scale(var(--preview-scale));
  transform-origin: center;
}

.banner__fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.banner__layer {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: var(--z);
  display: block;
  width: var(--w);
  height: var(--h);
  pointer-events: none;
  user-select: none;
}

.asset {
  display: none;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

html[data-layout="wide"] .asset--wide,
html[data-layout="landscape"] .asset--landscape,
html[data-layout="portrait"] .asset--portrait,
html[data-layout="narrow"] .asset--narrow {
  display: block;
}

.banner__layer--bg {
  --x: 0;
  --y: 0;
  --w: 100%;
  --h: 100%;
  --z: 0;
}

.banner__layer--bg .asset {
  object-fit: cover;
}

html[data-layout="wide"] .banner__layer--logo {
  --x: clamp(18px, 2.1%, 22px);
  --y: 8%;
  --w: clamp(132px, 17.3%, 168px);
  --h: 23.2%;
  --z: 5;
}

html[data-layout="wide"] .banner__layer--headline {
  --x: 2.4%;
  --y: 36.5%;
  --w: 36.2%;
  --h: 35.6%;
  --z: 5;
}

html[data-layout="wide"] .banner__layer--phone {
  --x: 70.7%;
  --y: 3.2%;
  --w: 20.8%;
  --h: 96.8%;
  --z: 2;
}

html[data-layout="wide"] .banner__layer--tomato {
  --x: 46.4%;
  --y: .4%;
  --w: 18%;
  --h: 71.6%;
  --z: 3;
}

html[data-layout="wide"] .banner__layer--banana {
  --x: 58.8%;
  --y: 34%;
  --w: 24%;
  --h: 88%;
  --z: 3;
}

html[data-layout="wide"] .banner__layer--milk {
  --x: 81.1%;
  --y: 56%;
  --w: 18.9%;
  --h: 92%;
  --z: 4;
}

html[data-layout="wide"] .banner__layer--highlight-a {
  --x: 1.75%;
  --y: 75.6%;
  --w: 14.6%;
  --h: 8.8%;
  --z: 6;
}

html[data-layout="wide"] .banner__layer--highlight-b {
  --x: 3.5%;
  --y: 84.8%;
  --w: 23.5%;
  --h: 7.6%;
  --z: 6;
}

html[data-layout="wide"] .banner__layer--body {
  --x: 2.2%;
  --y: 77.5%;
  --w: 58%;
  --h: 14.4%;
  --z: 7;
}

html[data-layout="landscape"] .banner__layer--logo {
  --x: 4.2%;
  --y: 6.25%;
  --w: 29%;
  --h: 14.7%;
  --z: 5;
}

html[data-layout="landscape"] .banner__layer--headline {
  --x: 4.2%;
  --y: 34.6%;
  --w: 45.8%;
  --h: 29.7%;
  --z: 5;
}

html[data-layout="landscape"] .banner__layer--phone {
  --x: 61.9%;
  --y: 3.75%;
  --w: 34%;
  --h: 88.4%;
  --z: 2;
}

html[data-layout="landscape"] .banner__layer--tomato {
  --x: 30.6%;
  --y: 0;
  --w: 36.5%;
  --h: 54.4%;
  --z: 3;
}

html[data-layout="landscape"] .banner__layer--banana {
  --x: 48.1%;
  --y: 30.3%;
  --w: 44.8%;
  --h: 64.7%;
  --z: 3;
}

html[data-layout="landscape"] .banner__layer--milk {
  --x: 76%;
  --y: 67.8%;
  --w: 35.4%;
  --h: 54.1%;
  --z: 4;
}

html[data-layout="landscape"] .banner__layer--highlight-a {
  --x: 3.95%;
  --y: 72.8%;
  --w: 23.3%;
  --h: 5.3%;
  --z: 6;
}

html[data-layout="landscape"] .banner__layer--highlight-b {
  --x: 7.1%;
  --y: 83.1%;
  --w: 37.5%;
  --h: 5.3%;
  --z: 6;
}

html[data-layout="landscape"] .banner__layer--body {
  --x: 4.7%;
  --y: 73.9%;
  --w: 47.7%;
  --h: 19.1%;
  --z: 7;
}

@media (max-aspect-ratio: 1.25) {
  html[data-layout="landscape"] .banner__layer--milk {
    --y: 72.6%;
    --h: 31.4%;
  }

  html[data-layout="landscape"] .banner__layer--highlight-a {
    --h: 4.1%;
  }

  html[data-layout="landscape"] .banner__layer--highlight-b {
    --y: 81%;
    --h: 4.1%;
  }

  html[data-layout="landscape"] .banner__layer--body {
    --h: 14.8%;
  }
}

@media (min-aspect-ratio: 1.8) {
  html[data-layout="landscape"] .banner__layer--highlight-a {
    --x: 4.23%;
  }

  html[data-layout="landscape"] .banner__layer--milk .asset--landscape {
    object-position: right bottom;
  }

  html[data-layout="landscape"] .banner__layer--highlight-a .asset--landscape {
    object-position: right center;
  }
}

html[data-layout="portrait"] .banner__layer--logo {
  --x: 6.25%;
  --y: 4.2%;
  --w: 38.4%;
  --h: 8.75%;
  --z: 5;
}

html[data-layout="portrait"] .banner__layer--phone {
  --x: 46.2%;
  --y: 2.1%;
  --w: 48.8%;
  --h: 53.8%;
  --z: 2;
}

html[data-layout="portrait"] .banner__layer--tomato {
  --x: -15.3%;
  --y: 15.8%;
  --w: 42.5%;
  --h: 29.6%;
  --z: 3;
}

html[data-layout="portrait"] .banner__layer--tomato .asset--portrait {
  object-position: left center;
}

html[data-layout="portrait"] .banner__layer--banana {
  --x: 20.3%;
  --y: 18.3%;
  --w: 62.2%;
  --h: 39.6%;
  --z: 3;
}

html[data-layout="portrait"] .banner__layer--milk {
  --x: 67.8%;
  --y: 33.5%;
  --w: 53.1%;
  --h: 36%;
  --z: 4;
}

html[data-layout="portrait"] .banner__layer--milk .asset--portrait {
  object-position: right center;
}

html[data-layout="portrait"] .banner__layer--headline {
  --x: 6.3%;
  --y: 55%;
  --w: 77.2%;
  --h: 22.3%;
  --z: 5;
}

html[data-layout="portrait"] .banner__layer--highlight-a {
  --x: 5.3%;
  --y: 80%;
  --w: 41.3%;
  --h: 4.2%;
  --z: 6;
}

html[data-layout="portrait"] .banner__layer--highlight-a .asset--portrait,
html[data-layout="portrait"] .banner__layer--highlight-b .asset--portrait,
html[data-layout="portrait"] .banner__layer--body .asset--portrait {
  object-position: left center;
}

html[data-layout="portrait"] .banner__layer--highlight-b {
  --x: 10.6%;
  --y: 87.9%;
  --w: 66.6%;
  --h: 4.2%;
  --z: 6;
}

html[data-layout="portrait"] .banner__layer--body {
  --x: 6.4%;
  --y: 80.8%;
  --w: 85%;
  --h: 15%;
  --z: 7;
}

html[data-layout="narrow"] .banner__layer--logo {
  --x: 6.25%;
  --y: 3.6%;
  --w: 37.1%;
  --h: 7.1%;
  --z: 5;
}

html[data-layout="narrow"] .banner__layer--phone {
  --x: 39%;
  --y: 1.4%;
  --w: 60.4%;
  --h: 57.1%;
  --z: 2;
}

html[data-layout="narrow"] .banner__layer--tomato {
  --x: -15%;
  --y: 13.8%;
  --w: 42.5%;
  --h: 25.4%;
  --z: 3;
}

html[data-layout="narrow"] .banner__layer--banana {
  --x: 15.8%;
  --y: 25.7%;
  --w: 62.5%;
  --h: 34%;
  --z: 3;
}

html[data-layout="narrow"] .banner__layer--milk {
  --x: 64%;
  --y: 42.6%;
  --w: 55%;
  --h: 35%;
  --z: 4;
}

html[data-layout="narrow"] .banner__layer--headline {
  --x: 6.3%;
  --y: 59.3%;
  --w: 85.8%;
  --h: 21.2%;
  --z: 5;
}

html[data-layout="narrow"] .banner__layer--highlight-a {
  --x: 5.3%;
  --y: 83.2%;
  --w: 41.3%;
  --h: 3.6%;
  --z: 6;
}

html[data-layout="narrow"] .banner__layer--highlight-b {
  --x: 10.6%;
  --y: 90%;
  --w: 66.6%;
  --h: 3.6%;
  --z: 6;
}

html[data-layout="narrow"] .banner__layer--body {
  --x: 6.5%;
  --y: 83.8%;
  --w: 85%;
  --h: 12.6%;
  --z: 7;
}

html:not(.is-animating):not(.is-static) .banner__layer:not(.banner__layer--bg) {
  opacity: 0;
}

html.is-animating .banner__layer {
  will-change: opacity, transform, translate;
}

.banner__layer--logo,
.banner__layer--headline {
  transform-origin: 0 50%;
}

html.is-animating .banner__layer--logo {
  animation: x5-text-left-cycle 13000ms cubic-bezier(.19, 1, .22, 1) infinite both;
}

html.is-animating .banner__layer--headline {
  animation: x5-text-left-cycle 13000ms cubic-bezier(.19, 1, .22, 1) infinite both;
  animation-delay: 80ms;
}

.banner__layer--body,
.banner__layer--highlight {
  transform-origin: 0 100%;
}

html.is-animating .banner__layer--highlight,
html.is-animating .banner__layer--body {
  animation: x5-text-left-cycle 13000ms cubic-bezier(.19, 1, .22, 1) infinite both;
}

html.is-animating .banner__layer--highlight-a {
  animation-delay: 230ms;
}

html.is-animating .banner__layer--highlight-b {
  animation-delay: 230ms;
}

html.is-animating .banner__layer--body {
  animation-delay: 230ms;
}

.banner__layer--phone,
.banner__layer--tomato,
.banner__layer--banana,
.banner__layer--milk {
  transform-origin: 50% 55%;
}

html.is-animating .banner__layer--phone {
  animation: x5-phone-cycle 13000ms cubic-bezier(.2, .9, .2, 1) infinite both;
}

html.is-animating .banner__layer--tomato {
  --float-y: -6px;
  --rise-y: 270px;
  animation:
    x5-product-rise-cycle 13000ms cubic-bezier(.19, 1, .22, 1) infinite both,
    x5-product-float 2100ms ease-in-out infinite both;
  animation-delay: 120ms, -300ms;
}

html.is-animating[data-layout="portrait"] .banner__layer--tomato {
  --float-y: -7px;
  animation:
    x5-product-rise-cycle 13000ms cubic-bezier(.19, 1, .22, 1) infinite both,
    x5-portrait-tomato-float 2600ms ease-in-out infinite both;
  animation-delay: 120ms, -450ms;
}

html.is-animating .banner__layer--banana {
  --float-y: -5px;
  --rise-y: 220px;
  animation:
    x5-product-rise-cycle 13000ms cubic-bezier(.19, 1, .22, 1) infinite both,
    x5-product-float 2300ms ease-in-out infinite both;
  animation-delay: 210ms, -1000ms;
}

html.is-animating .banner__layer--milk {
  --float-y: -2px;
  --rise-y: 170px;
  animation:
    x5-product-rise-cycle 13000ms cubic-bezier(.19, 1, .22, 1) infinite both,
    x5-product-float 2000ms ease-in-out infinite both;
  animation-delay: 300ms, -700ms;
}

@keyframes x5-text-left-cycle {
  0%,
  5.9% {
    opacity: 0;
    transform: translate3d(-96px, 0, 0) scale(.98);
  }

  8.9% {
    opacity: 1;
    transform: translate3d(8px, 0, 0) scale(1.01);
  }

  11.1%,
  89.7% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  93.4% {
    opacity: 1;
    transform: translate3d(8px, 0, 0) scale(1.01);
  }

  100% {
    opacity: 0;
    transform: translate3d(-96px, 0, 0) scale(.98);
  }
}

@keyframes x5-phone-cycle {
  0%,
  5.9% {
    opacity: 0;
    transform: translate3d(120px, 0, 0) rotate(2deg) scale(.97);
  }

  11.8%,
  89.7% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(120px, 0, 0) rotate(2deg) scale(.97);
  }
}

@keyframes x5-product-rise-cycle {
  0%,
  5.9% {
    opacity: 0;
    transform: translate3d(0, var(--rise-y), 0) scale(.96);
  }

  12.6% {
    opacity: 1;
    transform: translate3d(0, -8px, 0) scale(1.01);
  }

  15.5%,
  89.7% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  93.4% {
    opacity: 1;
    transform: translate3d(0, -8px, 0) scale(1.01);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, var(--rise-y), 0) scale(.96);
  }
}

@keyframes x5-product-float {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 var(--float-y);
  }
}

@keyframes x5-portrait-tomato-float {
  0%,
  100% {
    rotate: 0deg;
    translate: 0 0;
  }

  25% {
    rotate: -1.2deg;
    translate: -4px -3px;
  }

  50% {
    rotate: .8deg;
    translate: 2px var(--float-y);
  }

  75% {
    rotate: -.6deg;
    translate: -2px -2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner__layer {
    opacity: 1;
    transform: none;
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
    animation: none;
  }
}