/** 
  * Due to css import issues with parallel routes we are forced to 
  * use a regular css file and import it in the page.tsx
  * This is addressed in Next 15: https://github.com/vercel/next.js/pull/66300
  */

.enter-details-layout {
  background-color: var(--Scandic-Brand-Warm-White);
}

.enter-details-layout__content {
  display: grid;
  gap: var(--Spacing-x3) var(--Spacing-x9);
  margin: var(--Spacing-x5) auto 0;
  /* simulates padding on viewport smaller than --max-width-navigation */
  width: min(
    calc(100dvw - (var(--Spacing-x2) * 2)),
    var(--max-width-navigation)
  );
}

.enter-details-layout__summaryContainer {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
}

@media screen and (min-width: 1367px) {
  .enter-details-layout__content {
    grid-template-columns: 1fr 340px;
    grid-template-rows: auto 1fr;
  }

  .enter-details-layout__summaryContainer {
    position: static;
    display: grid;
    grid-column: 2/3;
    grid-row: 1/-1;
  }
}