section.hero {
  margin-top: var(--header-height) !important;
}
section.hero .back {
  text-decoration: none;
  color: var(--_text);
}
section.hero .back:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
section.hero .back [class*=icon-] {
  margin-top: 2px;
  width: 14px;
  height: 14px;
}
section.hero .back [class*=icon-]::after {
  background-color: var(--_text);
}
section.hero .supertitle {
  color: var(--black);
  opacity: 0.6;
  text-transform: uppercase;
}
section.hero .img-wrapper {
  overflow: hidden;
  border-radius: 0.25rem;
  position: relative;
}
@container main (min-width: 64.0625rem) {
  section.hero .img-wrapper {
    aspect-ratio: 16/7;
    -ms-grid-row: 1;
    -ms-grid-row-span: 5;
    grid-row: 1/6;
  }
}
@container main (max-width: 64rem) {
  section.hero .img-wrapper {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
section.hero .logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  max-width: 300px;
  max-height: 300px;
  -o-object-fit: contain;
     object-fit: contain;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  z-index: 1;
}
section.hero .logo path, section.hero .logo tspan {
  fill: #fff;
}
section.hero.admin .booking {
  display: none;
}
section.hero .booking {
  background: var(--white);
  z-index: 4;
  padding: 0.625rem 0;
  border-radius: 0.25rem;
}
section.hero .booking:has(.btn) {
  background: transparent;
}
section.hero .booking:has(.btn) .btn {
  background: var(--_background);
  color: var(--_text);
  font-size: 1.25rem;
  padding: 0.625rem 1.25rem;
}
@container main (max-width: 64rem) {
  section.hero .booking:has(.btn) .btn {
    background: var(--_background-invert);
    color: var(--_text-invert);
  }
}
@container main (min-width: 64.0625rem) {
  section.hero .booking {
    -ms-grid-row: 3;
    grid-row: 3;
  }
}
@container main (max-width: 64rem) {
  section.hero .booking {
    margin-top: 1.875rem;
  }
  section.hero .booking .searchmask-container {
    padding: 0 !important;
  }
}
section.hero .booking .besearchmask .searchmask-wrapper {
  background: var(--white);
}
section.hero .booking .besearchmask .searchmask-wrapper input,
section.hero .booking .besearchmask .searchmask-wrapper .occupancy-summary-texts {
  background: #fff;
}
section.hero .content {
  border-radius: 0.25rem;
  background: var(--_background-invert);
  color: var(--_text-invert);
  z-index: 2;
  padding: 3.125rem;
}
section.hero .content h1,
section.hero .content .supertitle {
  color: var(--_text-invert);
}
@container main (min-width: 64.0625rem) {
  section.hero .content {
    -ms-grid-row: 5;
    -ms-grid-row-span: 3;
    grid-row: 5/8;
  }
  section.hero .content .text {
    max-width: 80%;
  }
}
@container main (max-width: 64rem) {
  section.hero .content {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 1.875rem;
  }
}
section.hero .content * {
  text-align: center;
}
section.hero .info-icons [class*=icon-] {
  width: 16px;
  height: 16px;
}
section.hero .info-icons [class*=icon-]::after {
  background-color: var(--_text-invert);
}

body.dark section.hero .content h1 {
  --_text-invert: var(--blue);
}