/**
 * FluxCSS Responsive Breakpoints
 * Mobile-first responsive utilities
 */

/* Small screens and up */
@media (min-width: 640px) {
  .my-sm\:block { display: block; }
  .my-sm\:hidden { display: none; }
  .my-sm\:flex { display: flex; }
  .my-sm\:grid { display: grid; }
  .my-sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .my-sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .my-sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}

/* Medium screens and up */
@media (min-width: 768px) {
  .my-md\:block { display: block; }
  .my-md\:hidden { display: none; }
  .my-md\:flex { display: flex; }
  .my-md\:grid { display: grid; }
  .my-md\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .my-md\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .my-md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}

/* Large screens and up */
@media (min-width: 1024px) {
  .my-lg\:block { display: block; }
  .my-lg\:hidden { display: none; }
  .my-lg\:flex { display: flex; }
  .my-lg\:grid { display: grid; }
  .my-lg\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .my-lg\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .my-lg\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}

/* Extra large screens and up */
@media (min-width: 1280px) {
  .my-xl\:block { display: block; }
  .my-xl\:hidden { display: none; }
  .my-xl\:flex { display: flex; }
  .my-xl\:grid { display: grid; }
  .my-xl\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .my-xl\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .my-xl\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}