:root {
  --z5-container-max: 1400px;
  --z5-page-gutter: 32px;
  --z5-page-gutter-tablet: 24px;
  --z5-page-gutter-mobile: 20px;
  --z5-motion-ease: cubic-bezier(.625, .05, 0, 1);
  --z5-motion-duration: .6s;
}

.z5-container,
[data-z5-container] {
  width: min(var(--z5-container-max), calc(100% - (var(--z5-page-gutter) * 2)));
  margin-inline: auto;
}

.z5-motion-trigger,
[data-parallax="trigger"] {
  backface-visibility: hidden;
}

[data-parallax="target"],
.z5-motion-trigger {
  will-change: transform;
}

@media (max-width: 1024px) {
  .z5-container,
  [data-z5-container] {
    width: min(var(--z5-container-max), calc(100% - (var(--z5-page-gutter-tablet) * 2)));
  }
}

@media (max-width: 767px) {
  .z5-container,
  [data-z5-container] {
    width: min(var(--z5-container-max), calc(100% - (var(--z5-page-gutter-mobile) * 2)));
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax="trigger"],
  [data-parallax="target"] {
    transform: none !important;
    will-change: auto !important;
  }
}