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

.content {
  display: grid;
  gap: var(--Spacing-x3) var(--Spacing-x9);
  grid-template-columns: 1fr 340px;
  grid-template-rows: auto 1fr;
  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)
  );
}

.summaryContainer {
  grid-column: 2 / 3;
  grid-row: 1/-1;
}

.summary {
  background-color: var(--Main-Grey-White);

  border-color: var(--Primary-Light-On-Surface-Divider-subtle);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--Corner-radius-Large);

  z-index: 1;
}

.hider {
  display: none;
}

.shadow {
  display: none;
}

@media screen and (min-width: 950px) {
  .summaryContainer {
    display: grid;
    grid-template-rows: auto auto 1fr;
    margin-top: calc(0px - var(--Spacing-x9));
  }

  .summary {
    position: sticky;
    top: calc(
      var(--booking-widget-desktop-height) +
        var(--booking-widget-desktop-height) + var(--Spacing-x-one-and-half)
    );
    margin-top: calc(0px - var(--Spacing-x9));
    border-bottom: none;
    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
  }

  .hider {
    display: block;
    background-color: var(--Scandic-Brand-Warm-White);
    position: sticky;
    margin-top: var(--Spacing-x4);
    top: calc(
      var(--booking-widget-desktop-height) +
        var(--booking-widget-desktop-height) - 6px
    );
    height: 40px;
  }

  .shadow {
    display: block;
    background-color: var(--Main-Grey-White);
    border-color: var(--Primary-Light-On-Surface-Divider-subtle);
    border-style: solid;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top: none;
    border-bottom: none;
  }
}

@media screen and (min-width: 1367px) {
  .summary {
    top: calc(
      var(--booking-widget-desktop-height) + var(--Spacing-x2) +
        var(--Spacing-x-half)
    );
  }

  .hider {
    top: calc(var(--booking-widget-desktop-height) - 6px);
  }
}