.hp-hero-wrap {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.hp-hero {
  position: relative;
  overflow: hidden;
  background: var(--hp-bg, #f7f3f1);
  border-radius: var(--hp-radius, 0);
  min-height: var(--hp-height, 350px);
}
.hp-slides,
.hp-slide,
.hp-slide picture,
.hp-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hp-slide {
  opacity: 0;
  z-index: 0;
  transition: opacity 900ms ease, transform 900ms ease;
}
.hp-slide--active {
  opacity: 1;
  z-index: 1;
}
.hp-hero--transition-fade .hp-slide {
  transform: none;
}
.hp-hero--transition-slide .hp-slide {
  opacity: 1;
  transform: translateX(100%);
  transition: transform 900ms ease;
}
.hp-hero--transition-slide .hp-slide--active {
  transform: translateX(0);
  z-index: 2;
}
.hp-hero--transition-slide .hp-slide--leaving {
  transform: translateX(-100%);
  z-index: 1;
}
.hp-slide img {
  object-fit: cover;
  object-position: var(--hp-focus-x, 50%) var(--hp-focus-y, 50%) !important;
}
.hp-overlay {
  position: absolute;
  inset: 0;
  background: var(--hp-overlay-color, #000);
  opacity: var(--hp-overlay-opacity, .2);
  mix-blend-mode: var(--hp-overlay-blend, multiply);
  pointer-events: none;
  z-index: 3;
}
.hp-logo-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--hp-logo-wrapper, 1200px);
  box-sizing: border-box;
  padding: var(--hp-logo-padding, 0);
  pointer-events: none;
  z-index: 4;
}
.hp-logo-layer--x-left {
  justify-content: flex-start;
}
.hp-logo-layer--x-center {
  justify-content: center;
}
.hp-logo-layer--x-right {
  justify-content: flex-end;
}
.hp-logo-layer--y-top {
  align-items: flex-start;
}
.hp-logo-layer--y-center {
  align-items: center;
}
.hp-logo-layer--y-bottom {
  align-items: flex-end;
}
.hp-logo {
  display: block;
  width: var(--hp-logo-width, 460px);
  max-width: 80vw;
  max-height: calc(var(--hp-height, 350px) - 40px);
  object-fit: contain;
}
.hp-logo--mobile {
  display: none;
}
.hp-application,
.hp-application-link {
	position: absolute;
	top: 0;
	left: 0;
	margin-top: var(--hp-app-margin-top, 0);
	margin-left: var(--hp-app-margin-left, 0);
	width: var(--hp-app-width, 400px);
	height: var(--hp-app-height, 250px);
	object-fit: contain;
	object-position: left top;
	transform: rotate(var(--hp-app-rotation, 0deg));
	transform-origin: left top;
	z-index: 5;
}
.hp-application {
	display: block;
	pointer-events: none;
}
.hp-application-link {
	display: block;
	cursor: pointer;
	pointer-events: auto;
	z-index: 50;
}
.hp-application-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left top;
	pointer-events: auto;
}
.hp-empty {
  min-height: var(--hp-height, 350px);
}
@media (max-width: 700px) {
  .hp-hero-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }
  .hp-hero,
  .hp-empty {
    min-height: clamp(240px, 60vw, 420px);
  }
  .hp-logo-layer {
    padding: 0 12px;
  }
  .hp-logo-layer--mobile-full {
    padding: 0;
  }
  .hp-logo-layer--mobile-hidden {
    display: none;
  }
  .hp-logo-layer--mobile-x-left {
    justify-content: flex-start;
  }
  .hp-logo-layer--mobile-x-center {
    justify-content: center;
  }
  .hp-logo-layer--mobile-x-right {
    justify-content: flex-end;
  }
  .hp-logo {
    width: var(--hp-logo-mobile-width, 50vw);
    max-width: calc(100vw - 24px);
    max-height: calc(clamp(240px, 60vw, 420px) - 24px);
    height: auto;
    margin-top: var(--hp-logo-mobile-margin-top, 0px);
    margin-left: var(--hp-logo-mobile-margin-left, 0px);
  }
  .hp-logo-layer--mobile-full .hp-logo {
    max-width: 100vw;
  }
  .hp-logo-layer--has-mobile-logo .hp-logo--desktop {
    display: none;
  }
  .hp-logo--mobile {
    display: block;
  }
  .hp-application,
  .hp-application-link {
    width: var(--hp-app-mobile-width, 140px) !important;
    height: var(--hp-app-mobile-height, 140px) !important;
  }
}