/* Resort108 BBB Experience HIGHLIGHTS image frame V223 */

/*
 * One image fills the card width. Two or more images retain a tidy gallery.
 * Every image uses a true 3:2 display box and crops from the centre only when
 * the uploaded source has a different proportion.
 */
.highlights .card-media {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 13px !important;
  align-items: start !important;
  padding: 13px !important;
  border-bottom: 1px solid #d9deda !important;
  background: linear-gradient(145deg, #fafbf9 0%, #eef0ee 100%) !important;
}

.highlights .card-media:has(> img:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.highlights .card-media img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 9px !important;
  border: 1px solid #c9cecb !important;
  border-radius: 3px !important;
  outline: 1px solid rgba(255, 255, 255, .96) !important;
  outline-offset: -14px !important;
  background: linear-gradient(145deg, #ffffff 0%, #eceeec 100%) !important;
  box-shadow:
    0 8px 20px rgba(15, 23, 42, .13),
    inset 0 0 0 1px rgba(255, 255, 255, .82) !important;
}

.highlights .card-media img:only-child {
  grid-column: 1 / -1 !important;
}

@media (hover: hover) and (pointer: fine) {
  .highlights .card-media img {
    transition: transform .28s ease, box-shadow .28s ease !important;
  }
  .highlights .card-media img:hover {
    transform: translateY(-2px) !important;
    box-shadow:
      0 12px 25px rgba(15, 23, 42, .17),
      inset 0 0 0 1px rgba(255, 255, 255, .86) !important;
  }
}

@media (max-width: 760px) {
  .highlights .card-media,
  .highlights .card-media:has(> img:nth-child(2):last-child) {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .highlights .card-media img,
  .highlights .card-media img:only-child {
    grid-column: auto !important;
    padding: 7px !important;
    outline-offset: -11px !important;
  }
}