@layer properties, theme, base, components, utilities;
@layer components {
  .bookmaker-facts h2 { margin-bottom: 18px; }
  .bookmaker-facts dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bookmaker-facts dl > div { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 14px 16px; min-width: 0; border: 1px solid #e3eaf2; border-radius: 12px; background: #f7f9fc; }
  .bookmaker-facts dl dt { margin: 0; flex: none; font-size: 11px; font-weight: 500; line-height: 1.45; color: #64748b; }
  .bookmaker-facts dl dd { margin: 0; flex: none; text-align: left; font-size: 14px; font-weight: 700; line-height: 1.5; color: #0f1f3d; overflow-wrap: anywhere; }
  .bookmaker-facts dl > div:first-child { background: #ecfdf5; border-color: #b9e7d7; }
  .bookmaker-facts dl > div:first-child dd { font-size: 22px; line-height: 1.2; color: #047857; }
  @media (min-width: 480px) { .bookmaker-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
}