/** 
  * 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__container {
  display: grid;
  gap: var(--Spacing-x3) var(--Spacing-x9);
  /* simulates padding on viewport smaller than --max-width-navigation */
}

.enter-details-layout__content {
  margin: var(--Spacing-x3) var(--Spacing-x2) 0;
}

.enter-details-layout__summaryContainer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
}

@media screen and (min-width: 1367px) {
  .enter-details-layout__container {
    grid-template-columns: 1fr 340px;
    grid-template-rows: auto 1fr;
    margin: var(--Spacing-x5) auto 0;
    width: min(
      calc(100dvw - (var(--Spacing-x2) * 2)),
      var(--max-width-navigation)
    );
  }

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