.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(--Spacing-x2)
  );
  display: grid;
  grid-template-areas:
    "hotelImages"
    "tabNavigation"
    "mainSection"
    "mapContainer";
  margin: 0 auto;
  max-width: var(--max-width);
}

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

.mainSection {
  grid-area: mainSection;
  display: grid;
  gap: var(--Spacing-x9);
  padding: var(--Spacing-x4) var(--Spacing-x2);
}

.mapContainer {
  display: none;
}

.overview {
  display: grid;
  gap: var(--Spacing-x3);
}

.introContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--Spacing-x4);
  scroll-margin-top: var(--hotel-page-scroll-margin-top);
}

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

@media screen and (min-width: 1367px) {
  .pageContainer {
    grid-template-areas:
      "hotelImages mapContainer"
      "tabNavigation mapContainer"
      "mainSection mapContainer";
    grid-template-columns: 1fr var(--hotel-page-map-desktop-width);
  }
  .mainSection {
    grid-area: mainSection;
    padding: var(--Spacing-x6) var(--Spacing-x4);
  }
  .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(--Spacing-x5);
    padding-right: var(--Spacing-x5);
  }
}
