/*! Strand UI | MIT License | dillingerstaffing.com */

/* cf: grid-tracks */
/* cf: component-knobs */

/* ── Base ── */
.strand-grid {
  display: grid;
  max-width: 100%;
  box-sizing: border-box;
}

.strand-grid > * {
  min-width: 0;
}

.strand-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.strand-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.strand-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.strand-grid--auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.strand-grid--auto-220 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.strand-grid--auto-md {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.strand-grid--auto-260 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.strand-grid--gap-3 {
  gap: var(--strand-space-3);
}

.strand-grid--gap-4 {
  gap: var(--strand-space-4);
}

.strand-grid--gap-5 {
  gap: var(--strand-space-5);
}

.strand-grid--gap-6 {
  gap: var(--strand-space-6);
}

.strand-grid--gap-8 {
  gap: var(--strand-space-8);
}

.strand-grid--sidebar {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .strand-grid--sidebar {
    grid-template-columns: 264px minmax(0, 1fr);
  }
}

.strand-grid--split {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .strand-grid--split {
    grid-template-columns: minmax(0, 1fr) var(--strand-split-panel, 600px);
  }
}