// Grid layout atoms

/**
 * @section Grid Base
 */

/** @public Display grid with gap */
.grid {
  display: grid;
  gap: var(--gap-md);
}

/**
 * @section Column Layouts
 */

/** @public 1 column grid */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/** @public 2 column grid */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/** @public 3 column grid */
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/** @public 4 column grid */
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/** @public 6 column grid */
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/** @public 12 column grid */
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/**
 * @section Auto Layouts
 */

/** @public Responsive auto-fit (min 250px) */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gap-md);
}

/** @public Responsive auto-fill (min 250px) */
.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--gap-md);
}

/**
 * @section Item Spanning
 */

/** @public Span 1 column */
.col-span-1 { grid-column: span 1 / span 1; }

/** @public Span 2 columns */
.col-span-2 { grid-column: span 2 / span 2; }

/** @public Span 3 columns */
.col-span-3 { grid-column: span 3 / span 3; }

/** @public Span 4 columns */
.col-span-4 { grid-column: span 4 / span 4; }

/** @public Span 6 columns */
.col-span-6 { grid-column: span 6 / span 6; }

/** @public Span all columns */
.col-span-full { grid-column: 1 / -1; }

/**
 * @section Responsive
 */

// Collapses to 1 column @768px
@media (max-width: 768px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-6,
  .grid-cols-12 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  /** @public Override to 2 columns @768px */
  .md-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .md-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}