/*
 * Metronic's styles.css is a Tailwind build compiled from the demo markup, so
 * utilities the demos never used are absent. These are the few this dashboard
 * needs on top of it — keep the list short and prefer existing classes.
 */
.p-8 { padding: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.w-fit { width: fit-content; }
.tracking-widest { letter-spacing: 0.1em; }
.items-baseline { align-items: baseline; }
.mt-0\.5 { margin-top: 0.125rem; }
.font-mono { font-family: var(--font-mono); }
.break-all { word-break: break-all; }
.object-contain { object-fit: contain; }
.max-w-\[260px\] { max-width: 260px; }
.max-w-\[420px\] { max-width: 420px; }
.max-h-\[320px\] { max-height: 320px; }
.max-h-\[65vh\] { max-height: 65vh; }
.size-\[260px\] { width: 260px; height: 260px; }
.top-\[8\%\] { top: 8%; }
.w-\[150px\] { width: 150px; }
.w-\[190px\] { width: 190px; }
.w-\[200px\] { width: 200px; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}