.background {
  background-color: var(--Base-Surface-Primary-light-Normal);
}

.header {
  height: 560px;
  position: relative;
  z-index: 10;
}

.header:after {
  content: "";
  background: linear-gradient(
    182deg,
    rgba(38, 32, 30, 0.08) 13%,
    rgba(77, 0, 27, 0.4) 100%
  );
  position: absolute;
  inset: 0;
}

.headerContent {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  grid-gap: var(--Spacing-x2);
  padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x4);
}

@media screen and (min-width: 768px) {
  .headerContent {
    grid-gap: var(--Spacing-x4);
  }
}

.topImage {
  max-width: 100%;
}

.fauxBookingWidget {
  height: 84px;
  width: 100%;
}

.floatingBookingWidgetContainer {
  height: 0px;
  width: 100vw;
  display: flex;
  justify-content: center;
  background-color: green;
}

.floatingBookingWidget {
  background: pink;
  transform: translateY(-155px);
  height: fit-content;
  width: 100%;
  display: flex;
  justify-content: center;

  &[data-intersecting="true"] {
    background: white;
  }

  & > * {
    max-width: 100%;
  }
}

.main {
  display: grid;
  gap: var(--Spacing-x6);
  padding: calc(var(--Spacing-x5) * 2) 0 calc(var(--Spacing-x5) * 4);
  background-color: var(--Base-Surface-Primary-light-Normal);
}

.section:empty {
  display: none;
}

.section {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-content);
  width: 100%;
}

@media screen and (min-width: 768px) {
  .main {
    gap: calc(var(--Spacing-x5) + var(--Spacing-x4));
  }
  .section {
    padding-left: var(--Spacing-x5);
    padding-right: var(--Spacing-x5);
  }
}
