/* Room features: consistent line icons in soft circles, used on room.php and rooms.php.
   Columns follow the width of the block itself, so it adapts to whatever column holds it. */
.room-features { container: room-features / inline-size; width: 100%; margin-top: 36px; }
.room-features-heading { margin: 0 0 22px; font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.room-feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 26px; margin: 0; padding: 0; list-style: none; }
.room-feature { display: flex; align-items: center; gap: 14px; min-width: 0; }
.room-feature-icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-tint, #f1e8d6); color: var(--gold-icon, #956c24); }
.room-feature-svg { display: block; width: 24px; height: 24px; }
.room-feature-label { min-width: 0; color: var(--ink); font-size: 15px; font-weight: 400; line-height: 1.35; text-wrap: pretty; hyphens: manual; }

@container room-features (max-width: 600px) {
  .room-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .room-feature { gap: 11px; }
  .room-feature-icon { width: 40px; height: 40px; }
  .room-feature-svg { width: 22px; height: 22px; }
  .room-feature-label { font-size: 14px; }
}
@container room-features (max-width: 300px) {
  .room-feature-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}