// Responsive breakpoint variants

// sm: 640px+
@media (min-width: 640px) {
  .sm\:flex { display: flex }
  .sm\:hidden { display: none }
  .sm\:block { display: block }
  .sm\:inline-flex { display: inline-flex }
  .sm\:grid { display: grid }
  .sm\:flex-row { flex-direction: row }
  .sm\:flex-col { flex-direction: column }
  .sm\:items-center { align-items: center }
  .sm\:justify-between { justify-content: space-between }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .sm\:gap-4 { gap: 16px }
  .sm\:gap-6 { gap: 24px }
  .sm\:p-4 { padding: 16px }
  .sm\:p-6 { padding: 24px }
  .sm\:px-4 { padding-left: 16px; padding-right: 16px }
  .sm\:px-6 { padding-left: 24px; padding-right: 24px }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem }
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem }
  .sm\:w-auto { width: auto }
  .sm\:max-w-sm { max-width: 384px }
  .sm\:max-w-md { max-width: 448px }
  .sm\:max-w-lg { max-width: 512px }
}

// md: 768px+
@media (min-width: 768px) {
  .md\:flex { display: flex }
  .md\:hidden { display: none }
  .md\:block { display: block }
  .md\:inline-flex { display: inline-flex }
  .md\:grid { display: grid }
  .md\:contents { display: contents }
  .md\:flex-row { flex-direction: row }
  .md\:flex-col { flex-direction: column }
  .md\:flex-1 { flex: 1 1 0% }
  .md\:items-center { align-items: center }
  .md\:items-start { align-items: flex-start }
  .md\:justify-between { justify-content: space-between }
  .md\:justify-start { justify-content: flex-start }
  .md\:justify-end { justify-content: flex-end }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .md\:col-span-2 { grid-column: span 2 / span 2 }
  .md\:col-span-3 { grid-column: span 3 / span 3 }
  .md\:gap-4 { gap: 16px }
  .md\:gap-6 { gap: 24px }
  .md\:gap-8 { gap: 32px }
  .md\:p-4 { padding: 16px }
  .md\:p-6 { padding: 24px }
  .md\:p-8 { padding: 32px }
  .md\:px-4 { padding-left: 16px; padding-right: 16px }
  .md\:px-6 { padding-left: 24px; padding-right: 24px }
  .md\:px-8 { padding-left: 32px; padding-right: 32px }
  .md\:py-4 { padding-top: 16px; padding-bottom: 16px }
  .md\:py-6 { padding-top: 24px; padding-bottom: 24px }
  .md\:text-sm { font-size: 0.875rem; line-height: 1.25rem }
  .md\:text-base { font-size: 1rem; line-height: 1.5rem }
  .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem }
  .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem }
  .md\:text-2xl { font-size: 1.5rem; line-height: 2rem }
  .md\:text-left { text-align: left }
  .md\:text-center { text-align: center }
  .md\:w-auto { width: auto }
  .md\:w-1\/2 { width: 50% }
  .md\:w-1\/3 { width: 33.333333% }
  .md\:w-2\/3 { width: 66.666667% }
  .md\:max-w-md { max-width: 448px }
  .md\:max-w-lg { max-width: 512px }
  .md\:max-w-xl { max-width: 576px }
  .md\:max-w-2xl { max-width: 672px }
  .md\:space-y-0 > :not(:first-child) { margin-top: 0 }
  .md\:space-x-4 > :not(:first-child) { margin-left: 16px }
  .md\:space-x-6 > :not(:first-child) { margin-left: 24px }
  .md\:sticky { position: sticky }
  .md\:top-0 { top: 0 }
  .md\:overflow-auto { overflow: auto }
  .md\:rounded-lg { border-radius: var(--radius-lg) }
  .md\:border { border: 1px solid var(--border) }
  .md\:shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) }
}

// lg: 1024px+
@media (min-width: 1024px) {
  .lg\:flex { display: flex }
  .lg\:hidden { display: none }
  .lg\:block { display: block }
  .lg\:inline-flex { display: inline-flex }
  .lg\:grid { display: grid }
  .lg\:flex-row { flex-direction: row }
  .lg\:flex-col { flex-direction: column }
  .lg\:flex-1 { flex: 1 1 0% }
  .lg\:items-center { align-items: center }
  .lg\:justify-between { justify-content: space-between }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
  .lg\:col-span-2 { grid-column: span 2 / span 2 }
  .lg\:col-span-3 { grid-column: span 3 / span 3 }
  .lg\:col-span-4 { grid-column: span 4 / span 4 }
  .lg\:gap-4 { gap: 16px }
  .lg\:gap-6 { gap: 24px }
  .lg\:gap-8 { gap: 32px }
  .lg\:p-6 { padding: 24px }
  .lg\:p-8 { padding: 32px }
  .lg\:px-6 { padding-left: 24px; padding-right: 24px }
  .lg\:px-8 { padding-left: 32px; padding-right: 32px }
  .lg\:py-6 { padding-top: 24px; padding-bottom: 24px }
  .lg\:py-8 { padding-top: 32px; padding-bottom: 32px }
  .lg\:text-lg { font-size: 1.125rem; line-height: 1.75rem }
  .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem }
  .lg\:text-2xl { font-size: 1.5rem; line-height: 2rem }
  .lg\:text-3xl { font-size: 1.875rem; line-height: 2.25rem }
  .lg\:w-auto { width: auto }
  .lg\:w-1\/3 { width: 33.333333% }
  .lg\:w-1\/4 { width: 25% }
  .lg\:max-w-lg { max-width: 512px }
  .lg\:max-w-xl { max-width: 576px }
  .lg\:max-w-4xl { max-width: 896px }
  .lg\:sticky { position: sticky }
  .lg\:top-0 { top: 0 }
}

// xl: 1280px+
@media (min-width: 1280px) {
  .xl\:flex { display: flex }
  .xl\:hidden { display: none }
  .xl\:block { display: block }
  .xl\:grid { display: grid }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
  .xl\:gap-6 { gap: 24px }
  .xl\:gap-8 { gap: 32px }
  .xl\:p-8 { padding: 32px }
  .xl\:px-8 { padding-left: 32px; padding-right: 32px }
  .xl\:text-xl { font-size: 1.25rem; line-height: 1.75rem }
  .xl\:text-2xl { font-size: 1.5rem; line-height: 2rem }
  .xl\:max-w-6xl { max-width: 1152px }
  .xl\:max-w-7xl { max-width: 1280px }
}

// 2xl: 1536px+
@media (min-width: 1536px) {
  .\32xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .\32xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
  .\32xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
  .\32xl\:gap-8 { gap: 32px }
  .\32xl\:p-8 { padding: 32px }
  .\32xl\:max-w-7xl { max-width: 1280px }
}

// Print
@media print {
  .print\:hidden { display: none }
  .print\:block { display: block }
}