.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;
}
.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-application {
	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;
	pointer-events: none;
}
.hp-empty {
  min-height: var(--hp-height, 350px);
}
@media (max-width: 700px) {
  .hp-hero-wrap {
    padding-top: 40px;
  }
  .hp-hero,
  .hp-empty {
    min-height: 240px;
  }
  .hp-logo {
    width: 580px;
    max-width: 580px;
    height: auto;
  }
  .hp-application {
    width: var(--hp-app-mobile-width, 140px);
    height: var(--hp-app-mobile-height, 140px);
  }
}