body {
  --keyhole-tile-width: calc(100vw * 150 / 1920);
  --keyhole-tile-height: calc(100vw * 142 / 1920);
  --keyhole-offset-x: calc(100vw * 59 / 1920);
  position: relative;
  background-color: #606367;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  content: '';
  pointer-events: none;
  background-color: #606367;
  background-image:
    linear-gradient(rgba(41, 44, 47, 0.42), rgba(41, 44, 47, 0.42)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 142'%3E%3Cpath fill='%23000' fill-opacity='.5' fill-rule='evenodd' d='M94.322 132.5H56.678l7.675-46.243C59.311 82.802 56 77.09 56 70.599 56 60.051 64.712 51.5 75.5 51.5 86.262 51.5 95 60.051 95 70.6c0 6.49-3.349 12.203-8.391 15.658l7.713 46.242Z'/%3E%3C/svg%3E"),
    url('./assets/background-parallax-texture.png');
  background-position:
    center,
    var(--keyhole-offset-x) top,
    center top;
  background-repeat: repeat, repeat, no-repeat;
  background-size:
    auto,
    var(--keyhole-tile-width) var(--keyhole-tile-height),
    100% auto;
  background-blend-mode: normal, multiply, multiply;
  opacity: 0.82;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  content: '';
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' seed='31' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.55' intercept='-.18'/%3E%3CfeFuncG type='linear' slope='1.55' intercept='-.18'/%3E%3CfeFuncB type='linear' slope='1.55' intercept='-.18'/%3E%3CfeFuncA type='table' tableValues='0 .72'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.55;
}

.showcase,
.parallax-background {
  position: relative;
  z-index: 1;
}

.parallax-background {
  min-height: max(100svh, calc(100vw * 1.2792));
  background: transparent;
  overflow: hidden;
}

.parallax-background::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  content: '';
  pointer-events: none;
  background-image:
    url('./assets/about-preview/graffi/graffi1.png'), url('./assets/about-preview/graffi/graffi2.png'),
    url('./assets/about-preview/graffi/graffi3.png');
  background-position:
    calc(100vw * 548 / 1920) calc(100vw * 182 / 1920),
    calc(100vw * 1268 / 1920) calc(100vw * 840 / 1920),
    calc(100vw * 270 / 1920) calc(100vw * 903 / 1920);
  background-repeat: no-repeat;
  background-size:
    calc(100vw * 219 / 1920) auto,
    calc(100vw * 231 / 1920) auto,
    calc(100vw * 511 / 1920) auto;
}

.parallax-background__mobile-cards-top,
.parallax-background__mobile-cards-divider,
.parallax-background__mobile-cutout,
.parallax-background__mobile-bg,
.parallax-background__scratch,
.parallax-background__scratches-divider {
  display: none;
}

.parallax-background__paper {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.parallax-background__cards {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: grayscale(1);
}

.parallax-background__icons {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.parallax-background__icons-wrap {
  display: contents;
}

.parallax-background__icons-border,
.parallax-background__icons-scratches {
  display: none;
}

.parallax-background__icon {
  --icon-delay: 0ms;
  --icon-rotate: 0deg;
  --icon-shiver: 1deg;
  position: absolute;
  isolation: isolate;
  display: block;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  outline: 0;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transform: rotate(var(--icon-rotate));
  transform-origin: 50% 50%;
  animation: about-icon-shiver var(--icon-duration, 1.8s) linear infinite;
  animation-delay: var(--icon-delay);
}

.parallax-background__icon::before {
  position: absolute;
  inset: -8%;
  z-index: 2;
  content: '';
  background-image: var(--selected-icon-url);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.parallax-background__icon img,
.parallax-background__icon svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 calc(100vw * 1 / 1920) #292c2f) drop-shadow(calc(100vw * 0.9 / 1920) calc(100vw * 0.9 / 1920) 0 rgba(41, 44, 47, 0.68));
  transition:
    filter 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.parallax-background__icon:hover img,
.parallax-background__icon:hover svg,
.parallax-background__icon:focus-visible img,
.parallax-background__icon:focus-visible svg {
  transform: translateY(calc(100vw * -2 / 1920)) scale(1.06);
}

.parallax-background__icon:focus,
.parallax-background__icon:focus-visible {
  outline: none;
  box-shadow: none;
}

.parallax-background__icon.is-selected svg {
  transform: scale(1.13);
}

.parallax-background__icon.is-selected svg [fill='white'] {
  fill: #ffd629;
  transition: fill 180ms ease;
}

.parallax-background__icon.is-selected:hover img,
.parallax-background__icon.is-selected:hover svg,
.parallax-background__icon.is-selected:focus-visible img,
.parallax-background__icon.is-selected:focus-visible svg {
  transform: translateY(calc(100vw * -2 / 1920)) scale(1.16);
}

.parallax-background__icon--wands {
  --icon-delay: 0ms;
  --icon-duration: 1.7s;
  --icon-rotate: -27deg;
  --icon-shiver: 1.2deg;
  top: calc(100vw * 440 / 1920);
  left: calc(100vw * 816 / 1920);
  width: calc(100vw * 86 / 1920);
}

.parallax-background__icon--joystick {
  --icon-delay: -600ms;
  --icon-duration: 2s;
  --icon-rotate: 5deg;
  --icon-shiver: -1deg;
  top: calc(100vw * 383 / 1920);
  left: calc(100vw * 923 / 1920);
  width: calc(100vw * 62 / 1920);
}

.parallax-background__icon--cookie {
  --icon-delay: -1200ms;
  --icon-duration: 1.6s;
  --icon-rotate: 13deg;
  --icon-shiver: 0.9deg;
  top: calc(100vw * 451 / 1920);
  left: calc(100vw * 1043 / 1920);
  width: calc(100vw * 50 / 1920);
}

.parallax-background__icon--rabbit {
  --icon-delay: -400ms;
  --icon-duration: 1.9s;
  --icon-rotate: -9deg;
  --icon-shiver: 1.15deg;
  top: calc(100vw * 533 / 1920);
  left: calc(100vw * 925 / 1920);
  width: calc(100vw * 42 / 1920);
}

.parallax-background__icon--code {
  --icon-delay: -900ms;
  --icon-duration: 1.75s;
  --icon-rotate: 4deg;
  --icon-shiver: -1deg;
  top: calc(100vw * 616 / 1920);
  left: calc(100vw * 850 / 1920);
  width: calc(100vw * 46 / 1920);
}

.parallax-background__icon--ai {
  --icon-delay: -1600ms;
  --icon-duration: 2.1s;
  --icon-rotate: -4deg;
  --icon-shiver: 0.95deg;
  top: calc(100vw * 609 / 1920);
  left: calc(100vw * 1030 / 1920);
  width: calc(100vw * 50 / 1920);
}

@keyframes about-icon-shiver {
  0% { transform: rotate(var(--icon-rotate)) translate(0, 0); }
  12% { transform: rotate(calc(var(--icon-rotate) + var(--icon-shiver))) translate(0.4px, -0.3px); }
  24% { transform: rotate(calc(var(--icon-rotate) - 0.4deg)) translate(-0.3px, 0.3px); }
  36% { transform: rotate(calc(var(--icon-rotate) + 0.3deg)) translate(0.35px, 0.25px); }
  48% { transform: rotate(calc(var(--icon-rotate) - var(--icon-shiver))) translate(-0.4px, -0.2px); }
  60% { transform: rotate(calc(var(--icon-rotate) + 0.5deg)) translate(0.3px, -0.35px); }
  72% { transform: rotate(calc(var(--icon-rotate) - 0.3deg)) translate(-0.25px, 0.4px); }
  84% { transform: rotate(calc(var(--icon-rotate) + var(--icon-shiver))) translate(0.35px, 0.2px); }
  100% { transform: rotate(var(--icon-rotate)) translate(0, 0); }
}

.parallax-background__detail {
  position: absolute;
  z-index: 5;
  top: calc(100vw * 352 / 1920);
  left: calc(100vw * 250 / 1920);
  display: grid;
  justify-items: center;
  width: calc(100vw * 410 / 1920);
  margin: 0;
  color: #111;
  text-align: center;
}

.parallax-background__detail-title {
  margin: 0;
  color: white;
  font-family: 'Rubik One', Arial, sans-serif;
  font-size: calc(100vw * 22 / 1920);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  paint-order: stroke fill;
  text-shadow:
    0.75px 0 #292c2f,
    -0.75px 0 #292c2f,
    0 0.75px #292c2f,
    0 -0.75px #292c2f,
    0.45px 0.45px #292c2f,
    -0.45px 0.45px #292c2f,
    0.45px -0.45px #292c2f,
    -0.45px -0.45px #292c2f;
  -webkit-text-stroke: 0.75px #292c2f;
}

.parallax-background__stars {
  display: block;
  width: calc(100vw * 46 / 1920);
  height: auto;
  margin-top: calc(100vw * 34 / 1920);
}

.parallax-background__detail-text {
  width: calc(100vw * 385 / 1920);
  margin: calc(100vw * 31 / 1920) 0 0;
  font-family: 'Bricolage Grotesque', Arial, sans-serif;
  font-size: calc(100vw * 16 / 1920);
  font-weight: 400;
  line-height: 1.45;
}

.parallax-background__detail-icon {
  display: block;
  width: calc(100vw * 244 / 1920);
  height: auto;
  margin-top: calc(100vw * 70 / 1920);
  opacity: 1;
  filter: drop-shadow(0 0 1px #292c2f) drop-shadow(0.5px 0.5px 0 rgba(41, 44, 47, 0.35));
  transition:
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.24, 1);
}

.parallax-background__detail-icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.parallax-background__detail.is-changing .parallax-background__detail-icon {
  opacity: 0;
  transform: translateY(calc(100vw * 8 / 1920)) scale(0.96);
}

.parallax-background__quote {
  position: absolute;
  z-index: 5;
  top: calc(100vw * 105 / 1920);
  left: 50%;
  display: grid;
  gap: calc(100vw * 13 / 1920);
  width: calc(100vw * 410 / 1920);
  color: #292c2f;
  font-family: 'Amatic SC', cursive;
  font-size: calc(100vw * 32 / 1920);
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.parallax-background__quote strong {
  color: #fe4ba6;
  font-size: calc(100vw * 32 / 1920);
  line-height: 1;
}

.parallax-background__quote span {
  display: block;
}

.parallax-background__copy {
  position: absolute;
  z-index: 5;
  top: calc(100vw * 406 / 1920);
  left: calc(100vw * 1268 / 1920);
  width: calc(100vw * 470 / 1920);
  margin: 0;
  color: #111;
  font-family: 'Bricolage Grotesque', Arial, sans-serif;
  font-size: calc(100vw * 16 / 1920);
  font-weight: 400;
  line-height: 1.45;
}

.parallax-background__copy p {
  margin: 0 0 calc(100vw * 20 / 1920);
}

.parallax-background__copy strong {
  color: #fe4ba6;
  font-weight: 700;
}

.parallax-background__bruco-link {
  position: relative;
  display: inline-block;
  margin-top: calc(100vw * 10 / 1920);
  color: #292c2f;
  font-family: 'Amatic SC', cursive;
  font-size: calc(100vw * 32 / 1920);
  font-weight: 700;
  line-height: 0.98;
  perspective: calc(100vw * 380 / 1920);
  text-decoration: none;
  text-transform: uppercase;
}

.parallax-background__bruco-link::before {
  position: absolute;
  right: -0.06em;
  bottom: -0.24em;
  left: -0.03em;
  height: 0.22em;
  content: '';
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='1' viewBox='0 0 120 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M67.2169 0.189894C69.8655 0.256386 71.9506 -0.0374972 75.1789 0.00404164C78.4072 0.0455811 78.8907 0.20147 82.588 0.166395C86.285 0.131327 89.9841 0.23795 91.6303 0.173902C93.2764 0.109836 93.4502 0.303532 95.7878 0.260511C98.1253 0.217497 99.5421 0.24278 101.586 0.305738C103.631 0.368698 109.912 0.422448 112.196 0.345106C114.48 0.267764 117.085 0.401962 118.651 0.43379C119.139 0.443704 119.523 0.457272 119.818 0.471388C119.942 0.477373 120 0.489894 120 0.502254C120 0.502262 120 0.50227 120 0.502278C120 0.517667 119.911 0.532798 119.75 0.534742C118.972 0.544181 117.809 0.569083 116.436 0.624891C113.874 0.728953 113.594 0.61396 110.135 0.667433C106.676 0.720905 104.598 0.827809 100.528 0.75868C96.4588 0.689557 95.524 0.978833 89.7791 0.814893C84.0344 0.650966 83.4297 0.953497 77.7049 0.993726C71.98 1.03395 64.7535 0.867031 61.3025 0.880872C57.8514 0.894714 53.2164 0.929954 48.3242 0.890028C43.4319 0.850103 37.3925 0.950888 31.9923 0.879652C26.592 0.808417 18.9572 0.718444 15.4301 0.658155C11.903 0.597867 11.0434 0.584269 7.6484 0.621107C5.69694 0.642282 3.00862 0.622322 0.737871 0.544447C-0.404918 0.505254 -0.145961 0.450684 1.00429 0.424574C2.68634 0.386394 4.06712 0.4119 4.93381 0.343702C6.66563 0.207405 7.40168 0.155119 9.58798 0.234449C11.7742 0.31377 12.8043 0.133501 14.0787 0.154249C15.3532 0.175008 15.3322 0.281338 21.8123 0.199415C28.2925 0.117489 31.845 0.0965854 34.299 0.0769176C36.753 0.0572498 41.8771 0.149534 45.8765 0.116224C49.8759 0.082917 58.0066 0.113443 61.2842 0.0589122C64.5616 0.00438544 64.5684 0.123402 67.2169 0.189894Z' fill='black'/%3E%3C/svg%3E");
  opacity: 1;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.parallax-background__bruco-flip {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

.parallax-background__bruco-face {
  display: block;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.parallax-background__bruco-face--back {
  position: absolute;
  inset: 0;
  transform: rotateX(180deg) rotateZ(180deg);
}

.parallax-background__bruco-link:hover .parallax-background__bruco-flip,
.parallax-background__bruco-link:focus-visible .parallax-background__bruco-flip {
  animation: bruco-link-flip 1180ms cubic-bezier(0.42, 0, 0.21, 1);
}

@keyframes bruco-link-flip {
  0% { transform: rotateX(0deg); }
  25% { transform: rotateX(90deg); }
  50% { transform: rotateX(180deg); }
  75% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

.parallax-background__bruco-link:hover .parallax-background__bruco-face--front,
.parallax-background__bruco-link:focus-visible .parallax-background__bruco-face--front {
  animation: bruco-link-front-face 1180ms steps(1, end);
}

.parallax-background__bruco-link:hover .parallax-background__bruco-face--back,
.parallax-background__bruco-link:focus-visible .parallax-background__bruco-face--back {
  animation: bruco-link-back-face 1180ms steps(1, end);
}

@keyframes bruco-link-front-face {
  0%, 25%, 75%, 100% { visibility: visible; }
  25.1%, 74.9% { visibility: hidden; }
}

@keyframes bruco-link-back-face {
  0%, 25%, 75%, 100% { visibility: hidden; }
  25.1%, 74.9% { visibility: visible; }
}

.parallax-background__bruco-link:hover::before,
.parallax-background__bruco-link:focus-visible::before,
.parallax-background__bruco-link.is-auto-animating::before {
  opacity: 1;
  transform: none;
}

.parallax-background__bruco-link.is-auto-animating .parallax-background__bruco-flip {
  animation: bruco-link-flip 1180ms cubic-bezier(0.42, 0, 0.21, 1);
}

.parallax-background__bruco-link.is-auto-animating .parallax-background__bruco-face--front {
  animation: bruco-link-front-face 1180ms steps(1, end);
}

.parallax-background__bruco-link.is-auto-animating .parallax-background__bruco-face--back {
  animation: bruco-link-back-face 1180ms steps(1, end);
}

@media (prefers-reduced-motion: reduce) {
  .parallax-background__bruco-link:hover .parallax-background__bruco-flip,
  .parallax-background__bruco-link:focus-visible .parallax-background__bruco-flip,
  .parallax-background__bruco-link:hover .parallax-background__bruco-face--front,
  .parallax-background__bruco-link:focus-visible .parallax-background__bruco-face--front,
  .parallax-background__bruco-link:hover .parallax-background__bruco-face--back,
  .parallax-background__bruco-link:focus-visible .parallax-background__bruco-face--back {
    animation: none;
  }

  .parallax-background__bruco-face--front {
    visibility: visible;
  }

  .parallax-background__bruco-face--back {
    visibility: hidden;
  }
}

@media (max-width: 1024px) {
  body {
    --keyhole-tile-width: calc(100svh * 150 / 1200);
    --keyhole-tile-height: calc(100svh * 142 / 1200);
    --keyhole-offset-x: calc(50% + 7.9svh);
  }

  body::before {
    background-size:
      auto,
      var(--keyhole-tile-width) var(--keyhole-tile-height),
      auto 100svh;
  }

  .parallax-background {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: auto;
    background: white;
    overflow: visible;
  }

  .parallax-background__paper,
  .parallax-background__cards,
  .parallax-background::after {
    display: none;
  }

  .parallax-background__mobile-cards-divider {
    order: 4;
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    filter: grayscale(1);
  }

  .parallax-background__mobile-cards-top {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: calc(100vw * 371 / 390);
    height: auto;
    pointer-events: none;
    user-select: none;
    filter: grayscale(1);
  }

  .parallax-background__quote {
    order: 1;
    position: relative;
    z-index: 3;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    min-height: calc(100vw * 230 / 390);
    padding: calc(100vw * 120 / 390) calc(100vw * 24 / 390) calc(100vw * 18 / 390);
    align-content: start;
    gap: calc(100vw * 6 / 390);
    font-size: calc(100vw * 26 / 390);
    text-align: left;
  }

  .parallax-background__quote strong {
    font-size: calc(100vw * 30 / 390);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: calc(100vw * 10 / 390);
    -webkit-text-stroke: 0.8px #fe4ba6;
    paint-order: stroke fill;
  }

  .parallax-background__quote span {
    display: block;
    font-size: calc(100vw * 22 / 390);
    line-height: 1.15;
  }

  .parallax-background__copy {
    display: contents;
  }

  .parallax-background__copy p:nth-child(1) {
    order: 2;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: calc(100vw * 32 / 390) calc(100vw * 64 / 390) 0 calc(100vw * 24 / 390);
    font-family: 'Bricolage Grotesque', Arial, sans-serif;
    font-size: calc(100vw * 16 / 390);
    font-weight: 400;
    line-height: 1.45;
    color: #111;
  }

  .parallax-background__copy p:nth-child(2) {
    order: 3;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: calc(100vw * 20 / 390) calc(100vw * 24 / 390) calc(100vw * 40 / 390);
    font-family: 'Bricolage Grotesque', Arial, sans-serif;
    font-size: calc(100vw * 16 / 390);
    font-weight: 400;
    line-height: 1.45;
    color: #111;
  }

  .parallax-background__detail {
    order: 5;
    position: relative;
    z-index: 3;
    top: auto;
    left: auto;
    width: 100%;
    padding: calc(100vw * 10 / 390) calc(100vw * 24 / 390) 0;
    justify-items: center;
    text-align: center;
  }

  .parallax-background__stars {
    order: 1;
    width: calc(100vw * 54 / 390);
    margin-top: 0;
  }

  .parallax-background__detail-title {
    order: 2;
    font-size: calc(100vw * 29 / 390);
    margin-top: calc(100vw * 18 / 390);
    -webkit-text-stroke: 1px #292c2f;
  }

  .parallax-background__detail-text {
    order: 3;
    width: min(calc(100vw * 320 / 390), 30rem);
    font-size: calc(100vw * 16 / 390);
    line-height: 1.45;
    margin-top: calc(100vw * 28 / 390);
  }

  .parallax-background__detail-icon {
    display: none;
  }

  .parallax-background__icons-wrap {
    display: block;
    order: 6;
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .parallax-background__icons-border {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 350%;
    height: auto;
    pointer-events: none;
    z-index: 5;
  }

  .parallax-background__icons-border--top {
    top: calc(100vw * 20 / 190);
    transform: translateX(-50%) scaleY(-1);
  }

  .parallax-background__icons-border--bottom {
    bottom: calc(100vw * -20 / 850);
    transform: translateX(-50%);
  }

  .parallax-background__icons-scratches {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    margin-bottom: calc(100vw * -8 / 390);
  }

  .parallax-background__icons {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: calc(100vw * 122 / 390);
    width: 100%;
    min-height: calc(100vw * 204 / 390);
    margin-top: calc(100vw * 56 / 390);
    padding: calc(100vw * 40 / 390) calc(100vw * 50 / 390) calc(100vw * 40 / 390);
    inset: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: calc(100vw * 50 / 390);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    pointer-events: auto;
    touch-action: pan-x;
  }

  .parallax-background__icons::-webkit-scrollbar {
    display: none;
  }

  .parallax-background__icons::before,
  .parallax-background__icons::after {
    content: none;
  }

  .parallax-background__icon {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    scroll-snap-align: center;
    top: auto !important;
    left: auto !important;
    width: calc(100vw * 50 / 390) !important;
    min-width: calc(100vw * 50 / 390);
    transform: rotate(var(--icon-rotate));
    touch-action: pan-x;
  }

  .parallax-background__icon--rabbit {
    width: calc(100vw * 30 / 390) !important;
    min-width: calc(100vw * 30 / 390);
  }

  .parallax-background__icon.is-selected {
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.38)) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.24));
    transform: rotate(var(--icon-rotate)) scale(1.85);
    animation: none;
  }

  .parallax-background__icon.is-selected svg {
    transform: none;
  }

  .parallax-background__copy p:nth-child(3) {
    position: absolute;
    z-index: 3;
    right: calc(100vw * 24 / 390);
    bottom: calc(100vw * 330 / 390);
    width: calc(100vw * 200 / 390);
    margin: 0;
    padding: 0;
    font-family: 'Bricolage Grotesque', Arial, sans-serif;
    font-size: calc(100vw * 14 / 390);
    font-weight: 400;
    line-height: 1.4;
    color: #111;
    text-align: right;
  }

  .parallax-background__bruco-link {
    position: absolute;
    z-index: 3;
    display: block;
    right: calc(100vw * 24 / 390);
    bottom: calc(100vw * 260 / 390);
    margin: 0;
    font-size: calc(100vw * 30 / 390);
    perspective: none;
  }

  .parallax-background {
    background: transparent;
  }

  .parallax-background__mobile-bg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(100vw * 540 / 270);
    background: white;
    z-index: 0;
    pointer-events: none;
  }

  .parallax-background__scratches-divider {
    display: block;
    position: absolute;
    z-index: 3;
    bottom: 490px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 368px;
    height: auto;
    pointer-events: none;
    user-select: none;
  }

  .parallax-background__mobile-cutout {
    order: 9;
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
  }

  .parallax-background__scratch {
    display: block;
    position: absolute;
    z-index: 3;
    bottom: 24px;
    left: 10px;
    width: 79px;
    height: auto;
    pointer-events: none;
    user-select: none;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  body {
    --keyhole-tile-width: calc(100vw * 150 / 1200);
    --keyhole-tile-height: calc(100vw * 142 / 1200);
    --keyhole-offset-x: calc(50% + calc(100vw * 59 / 1200));
  }

  .parallax-background__scratches-divider {
    bottom: calc(100vw * 490 / 390);
    max-width: none;
  }
}