html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
}

body {
  display: grid;
  place-items: center;
}

.banner {
  position: relative;
  display: block;
  overflow: hidden;
  width: min(100vw, calc(100vh * var(--banner-ratio)));
  aspect-ratio: var(--banner-ratio);
}

.banner--desktop {
  --banner-ratio: calc(1200 / 145);
  --panel-x: 100%;
  --panel-y: 0;
  --discount-x: 0;
  --discount-y: 17%;
}

.banner--mobile {
  --banner-ratio: 1;
  --panel-x: 0;
  --panel-y: 100%;
  --discount-x: 110%;
  --discount-y: 0;
}

.banner > *,
.banner__discount img {
  position: absolute;
  display: block;
}

.banner__background,
.banner__discount-background {
  inset: 0;
  width: 100%;
  height: 100%;
}

.banner--desktop .banner__logo {
  left: 2.3333%;
  top: 23.4483%;
  width: 47.0833%;
  height: 60%;
}

.banner--desktop .banner__tape {
  left: 23.9167%;
  top: 4.8276%;
  width: 28.5%;
  height: 90.3448%;
}

.banner--desktop .banner__panel {
  left: 70.1667%;
  top: 0%;
  width: 29.8333%;
  height: 100%;
}

.banner--desktop .banner__discount {
  left: 57.1667%;
  top: 9.6552%;
  width: 11.75%;
  height: 80.6897%;
}

.banner--desktop .banner__period {
  left: 75.9167%;
  top: 12.4138%;
  width: 21.0833%;
  height: 35.8621%;
}

.banner--desktop .banner__button {
  left: 73.0833%;
  top: 64.1379%;
  width: 23.9167%;
  height: 24.1379%;
}

.banner--desktop .banner__panel {
  background: #d30f3f;
}

.banner--mobile .banner__logo {
  left: 7%;
  top: 9.6%;
  width: 84.8%;
  height: 36%;
}

.banner--mobile .banner__tape {
  left: 27.6%;
  top: 8.8%;
  width: 68.2%;
  height: 46%;
}

.banner--mobile .banner__panel {
  left: 32%;
  top: 70.2%;
  width: 65.2%;
  height: 29.8%;
}

.banner--mobile .banner__discount {
  left: 32%;
  top: 51.6%;
  width: 65.2%;
  height: 18.6%;
}

.banner--mobile .banner__period {
  left: 42.6%;
  top: 75%;
  width: 50.6%;
  height: 10.4%;
}

.banner--mobile .banner__button {
  left: 35.8%;
  top: 89.2%;
  width: 57.4%;
  height: 7%;
}

.banner__discount-text {
  left: 9.2025%;
  top: 24.7312%;
  width: 80.0613%;
  height: 52.6882%;
}

.banner:hover .banner__button {
  filter: drop-shadow(0 3px 5px rgb(0 0 0 / 40%));
}

.banner:focus-visible {
  outline: 3px solid #ffcc00;
  outline-offset: -4px;
}

.banner--english {
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: 900;
  text-align: center;
}

.banner--english .banner__discount {
  font-size: 2.4vw;
  line-height: 0.94;
  font-style: italic;
}

.banner--english .banner__discount strong {
  font-size: 1.9em;
}

.banner--english .banner__discount small {
  display: block;
  margin-top: 0.2em;
  color: #ffcf25;
  font-size: 0.7em;
}

.banner--english .banner__period {
  font-size: 2.5vw;
  font-style: italic;
  line-height: 1;
}

.banner--english .banner__button {
  display: grid;
  place-items: center;
  background: #fff;
  color: #951130;
  font-size: 1.5vw;
}

.banner--english.banner--mobile .banner__discount {
  display: grid;
  align-content: center;
  background: #111;
  font-size: 5.5vw;
}

.banner--english.banner--mobile .banner__discount strong {
  font-size: 1.2em;
}

.banner--english.banner--mobile .banner__period {
  font-size: 4.5vw;
}

.banner--english.banner--mobile .banner__button {
  font-size: 3.5vw;
}

@media (prefers-reduced-motion: no-preference) {
  .banner__logo {
    --from-y: 12%;
    --from-scale: 0.6;
    animation: banner-enter 600ms 200ms both;
  }

  .banner__panel {
    animation: banner-panel 500ms 300ms ease-out both;
  }

  .banner__discount {
    --from-x: var(--discount-x);
    --from-y: var(--discount-y);
    animation: banner-enter 600ms 600ms both;
  }

  .banner--desktop .banner__discount {
    animation: banner-enter 600ms 600ms both, banner-pulse 520ms 1950ms ease-out;
    --pulse-scale: 1.14;
  }

  .banner__discount-text {
    animation: banner-pulse 520ms 1950ms ease-out;
    --pulse-scale: 1.14;
  }

  .banner__period {
    --from-x: 12%;
    animation: banner-enter 600ms 850ms both;
  }

  .banner__button {
    --from-x: 42%;
    animation: banner-enter 600ms 1100ms both, banner-pulse 1s 3100ms ease-in-out;
    --pulse-scale: 1.03;
  }

  .banner__tape {
    animation: banner-tape 680ms 1750ms both;
  }
}

@keyframes banner-enter {
  0% {
    opacity: 0;
    transform: translate(var(--from-x, 0), var(--from-y, 0)) scale(var(--from-scale, 1));
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.35, 1);
  }

  82% {
    opacity: 1;
    transform: translate(-0.7%, -1%) scale(1.015);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes banner-panel {
  from {
    transform: translate(var(--panel-x), var(--panel-y));
  }
}

@keyframes banner-tape {
  0% {
    opacity: 0;
    transform: translate(-12%, -45%) rotate(-14deg) scale(2.1);
    animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.5);
  }

  8% {
    opacity: 1;
  }

  30% {
    transform: none;
  }

  38% {
    transform: scale(1.06, 0.9);
  }

  66% {
    transform: scale(0.98, 1.03);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes banner-pulse {
  35% {
    transform: scale(var(--pulse-scale));
  }
}