.card {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x2);
}

.content {
  background-color: var(--Base-Background-Primary-Normal);
  border-radius: var(--Corner-radius-Large);
  display: grid;
  gap: var(--Spacing-x2);
  padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x3)
    var(--Spacing-x2);
}

.img {
  border-radius: var(--Corner-radius-Medium);
  overflow: hidden;
}

.roomDetails {
  display: grid;
  gap: var(--Spacing-x2);
}

.roomName {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x1);
  grid-column: 1/-1;
  justify-content: space-evenly;
}

.details {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x1);
  justify-content: space-evenly;
}

.guest {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x1);
  justify-content: space-evenly;
}

@media screen and (min-width: 1367px) {
  .content {
    gap: var(--Spacing-x3);
    grid-template-columns: auto 1fr;
    padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x2)
      var(--Spacing-x2);
  }

  .img {
    min-width: 306px;
  }
  .roomDetails {
    grid-template-columns: 1fr 1fr;
  }

  .guest {
    align-items: flex-end;
  }
}