.mobileSummary {
  display: block;
}

.desktopSummary {
  display: none;
}

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

  border-color: var(--Primary-Light-On-Surface-Divider-subtle);
  border-style: solid;
  border-width: 1px;
  border-bottom: none;
  z-index: 10;
}

.hider {
  display: none;
}

.shadow {
  display: none;
}

@media screen and (min-width: 1367px) {
  .mobileSummary {
    display: none;
  }

  .desktopSummary {
    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(--Spacing-x2) +
        var(--Spacing-x-half)
    );
    z-index: 9;
    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
    margin-top: calc(0px - var(--Spacing-x9));
  }

  .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;
  }

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