.wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--Space-x3);
}

.container {
  display: flex;
  flex-direction: column;
  gap: var(--Space-x5);
}

.room {
  background-color: var(--Background-Primary);
  display: flex;
  flex-direction: column;
  gap: var(--Space-x2);
  padding: var(--Space-x3) 0;
}

.roomName {
  color: var(--Scandic-Brand-Burgundy);
  padding: 0 var(--Space-x2);
}

.booking {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content {
  display: grid;
  gap: var(--Space-x2);
  position: relative;
  width: 100%;
  margin: 0 auto;
  grid-template-columns: 1fr;
}

.cancelled {
  opacity: 0.5;
}

.roomDetails {
  display: flex;
  flex-direction: column;
  gap: var(--Space-x5);
}

.guestDetailsMobileWrapper {
  display: block;
  padding: 0 var(--Space-x2);
}

.guestDetailsDesktopWrapper {
  display: none;
}

.priceDetailsButton {
  padding: 0 var(--Space-x2);
}

@media (min-width: 768px) {
  .room {
    background-color: transparent;
    padding: 0;
  }

  .roomName {
    padding: 0;
  }

  .booking {
    border-radius: var(--Corner-Radius-lg);
    background-color: var(--Background-Primary);
  }

  .content {
    padding: var(--Space-x2);
    grid-template-columns: 3fr 2fr;
    width: var(--max-width-content);
  }

  .guestDetailsMobileWrapper {
    display: none;
  }

  .guestDetailsDesktopWrapper {
    display: block;
    margin-top: auto;
  }

  .priceDetailsButton {
    padding: 0;
  }
}