/**
 * grid-utilities.css
 *
 * Responsive grid utilities. Replaces duplicate grid definitions
 * across page-specific CSS files.
 *
 * Usage: <div class="g-grid g-cols-3 g-gap-md">
 *
 * @package BeatTheFish
 * @since   2.3.0
 */

/* Base grid */
.g-grid {
  display: grid;
  grid-template-columns: 1fr;
}

/* Gap sizes */
.g-gap-xs  { gap: 8px; }
.g-gap-sm  { gap: 10px; }
.g-gap-md  { gap: 14px; }
.g-gap-lg  { gap: 16px; }
.g-gap-xl  { gap: 20px; }

/* 600px breakpoint */
@media (min-width: 600px) {
  .g-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .g-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .g-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .g-cols-5 { grid-template-columns: repeat(3, 1fr); }
}

/* 768px breakpoint */
@media (min-width: 768px) {
  .g-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .g-cols-5 { grid-template-columns: repeat(5, 1fr); }
}

/* 900px breakpoint */
@media (min-width: 900px) {
  .g-cols-3 { grid-template-columns: repeat(3, 1fr); }
}