.container {
  /* default */
  @apply w-full h-auto flex flex-col rounded-[8px] overflow-hidden border bg-white hover:ring;
  /* responsive > sm */
  @apply sm:flex-row sm:min-h-[250px];
}

.image {
  @apply w-full h-full rounded-l-[8px] object-cover antialiased;
}

.left {
  @apply h-auto basis-full shrink-0 relative;
  /* responsive > sm */
  @apply sm:basis-[248px];
}

.left-carousel {
  @apply h-full w-full;
  /* responsive > sm */
  @apply sm:w-[248px];
}

.contentWrapper {
  @apply flex flex-col justify-between w-full min-h-[250px];
  /* responsive > sm */
  @apply sm:flex-row;
}

.left-content-wrapper {
  @apply flex w-full max-w-[336px] flex-col justify-between gap-4 px-4 py-4;
}

.right-content-wrapper {
  @apply flex flex-row-reverse justify-between text-right px-4 py-4;
  /* responsive > sm */
  @apply sm:flex sm:flex-col sm:justify-between sm:min-h-[250px];
}

.title {
  @apply text-xl font-semibold select-none line-clamp-2 overflow-ellipsis;
}

.location {
  @apply mt-1 text-sm text-gray-600 select-none;
}

.badgeGroup {
  @apply flex items-center mt-2.5 gap-3 gap-y-2 flex-wrap;
}

.recommended {
  @apply absolute left-4 top-4 z-10 select-none;
}

.detail-info {
  @apply text-primary-500;
}

.like {
  @apply absolute right-4 top-4 h-7 w-7 z-[100] !rounded-2xl cursor-pointer;
}

.discount-price {
  @apply text-xs leading-[18px] !text-gray-500 line-through font-normal;
}

.price {
  @apply text-xl font-semibold leading-[30px] text-slate-800 pt-1 flex justify-end items-center gap-2;
  /* responsive > sm */
  @apply sm:block sm:gap-0;
}

.card-button-wrapper {
  @apply flex flex-col items-end justify-center h-auto;
  /* responsive > sm */
  @apply sm:justify-end sm:h-full;
}

.night-info {
  @apply text-xs leading-[18px] text-gray-500 font-normal;
}

.divider {
  @apply block sm:hidden w-full h-px bg-gray-200;
}

.select-date-wrapper {
  @apply flex justify-center w-full;
  /* responsive > sm */
  @apply sm:flex-col sm:h-full sm:justify-between sm:items-end;
}

.select-date-text {
  @apply text-blue-500 text-sm font-medium leading-tight cursor-pointer;
  /* responsive > sm */
  @apply sm:text-gray-500 sm:text-xs sm:leading-[18px] sm:font-normal sm:cursor-auto;
}
.available-button-wrapper {
  @apply block w-full px-4 pb-4 sm:hidden;
}