.card {
  display: grid;
  grid-template-areas:
    "image header"
    "hotel hotel"
    "prices prices";
  gap: var(--Spacing-x2);
  padding: var(--Spacing-x2);
  background-color: var(--Base-Surface-Primary-light-Normal);
  border: 1px solid var(--Base-Border-Subtle);
  border-radius: var(--Corner-radius-Medium);
  width: 100%;
}

.imageContainer {
  grid-area: image;
}

.tripAdvisor {
  display: none;
}

.image {
  height: 100%;
  width: 116px;
  object-fit: cover;
}

.hotelInformation {
  grid-area: header;
}

.hotel {
  display: flex;
  flex-direction: column;
  grid-area: hotel;
}

.facilities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Spacing-x1);
}

.facilitiesItem {
  display: flex;
  align-items: center;
  gap: var(--Spacing-x-half);
}

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

.public,
.member {
  max-width: fit-content;
  margin-bottom: var(--Spacing-x-half);
}

.button {
  justify-content: center;
}

@media screen and (min-width: 1367px) {
  .card {
    grid-template-areas:
      "image header"
      "image hotel"
      "image prices";
    overflow: hidden;
    padding: 0;
  }

  .imageContainer {
    position: relative;
  }

  .tripAdvisor {
    position: absolute;
    display: block;
    left: 7px;
    top: 7px;
  }

  .image {
    width: 518px;
  }

  .hotelInformation {
    padding-top: var(--Spacing-x2);
    padding-right: var(--Spacing-x2);
  }

  .hotel {
    gap: var(--Spacing-x2);
    padding-right: var(--Spacing-x2);
  }

  .prices {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-right: var(--Spacing-x2);
    padding-bottom: var(--Spacing-x2);
  }

  .detailsButton {
    border-bottom: none;
  }

  .button {
    width: 160px;
  }
}