web/apps/scandic-web/components/HotelReservation/MyStay/Rooms/rooms.module.css

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

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

.roomsContainer {
  display: grid;
  gap: var(--Spacing-x3);
  width: 100%;
  grid-template-columns: 1fr;
}

.roomWrapper {
  width: 100%;
  min-width: 0;
}

.roomWrapper > * {
  width: 100%;
}

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

.totalContainer {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x1);
  padding: 0 var(--Spacing-x2);
}

.total {
  display: flex;
  justify-content: flex-end;
  gap: var(--Spacing-x1);
}

@media (min-width: 768px) {
  .roomsContainer {
    grid-template-columns: repeat(2, 1fr);
  }

  .roomsContainer:has(> *:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }

  .title {
    padding: 0;
  }

  .totalContainer {
    padding: 0;
  }
}