.pageContainer {
  --hotel-tab-navigation-z-index: 2;
  --hotel-mobile-map-toggle-button-z-index: 1;
  --hotel-dynamic-map-z-index: 2;

  --hotel-page-navigation-height: 59px;
  --hotel-page-scroll-margin-top: calc(
    var(--hotel-page-navigation-height) + var(--booking-widget-mobile-height) +
      var(--Space-x2)
  );
  --hotel-page-intro-section-width: 607px; /* Max width according to Figma */

  display: grid;
  grid-template-areas:
    "header"
    "tabNavigation"
    "mainSection"
    "mapContainer";
  max-width: var(--max-width);
}

.header {
  background-color: var(--Base-Surface-Subtle-Normal);
  grid-area: header;
}

.mainSection {
  grid-area: mainSection;
  display: grid;
  gap: var(
    --Spacing-x9
  ); /* var(--Space-x9) does not exist in the design system, hence the "old" variable */
  padding: var(--Space-x4) 0;
  width: var(--max-width-page);
  margin: 0 auto;
}

.mapContainer {
  display: none;
}

.overview {
  display: grid;
  gap: var(--Space-x3);
  scroll-margin-top: var(--hotel-page-scroll-margin-top);
}

.introContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--Space-x4);
}

.alertsContainer {
  display: grid;
  gap: var(--Space-x2);
}

@media screen and (min-width: 768px) {
  .pageContainer {
    --hotel-page-scroll-margin-top: calc(
      var(--hotel-page-navigation-height) +
        var(--booking-widget-tablet-height) + var(--Space-x2)
    );
    margin: 0 auto;
  }

  .mainSection {
    padding: var(--Space-x6) var(--Layout-Tablet-Margin-Margin-min);
  }
}

@media screen and (min-width: 1367px) {
  .pageContainer {
    --hotel-page-scroll-margin-top: calc(
      var(--hotel-page-navigation-height) +
        var(--booking-widget-desktop-height) + var(--Space-x2)
    );
    grid-template-areas:
      "header mapContainer"
      "tabNavigation mapContainer"
      "mainSection mapContainer";
    grid-template-columns: 1fr var(--hotel-page-map-desktop-width);
  }
  .mainSection {
    grid-area: mainSection;
    padding: var(--Space-x6) var(--max-width-single-spacing);
    width: 100%;
  }
  .mapContainer {
    display: flex;
    grid-area: mapContainer;
    align-self: start;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--Base-Surface-Primary-light-Normal);
  }

  .pageContainer > nav {
    padding-left: var(--Space-x5);
    padding-right: var(--Space-x5);
  }
}
