/* =============================================
   ISOLATED GRID SYSTEM - igs prefix
   ============================================= */

/* Base Grid */
.igs {
  --igs-cols: 1;
  --igs-gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(var(--igs-cols), minmax(0, 1fr));
  gap: var(--igs-gap);
  width: 100%;
}

/* Column Base */
.igs__col {
  grid-column: span var(--igs-cols) / span var(--igs-cols);
  width: 100%;
}

/* Responsive Breakpoints */
@media (min-width: 576px) {
  .igs { --igs-cols: 2; }
  .igs__col--sm-1 { grid-column: span 1 / span 1; }
  .igs__col--sm-2 { grid-column: span 2 / span 2; }
}

@media (min-width: 768px) {
  .igs { --igs-cols: 3; }
  .igs__col--md-1 { grid-column: span 1 / span 1; }
  .igs__col--md-2 { grid-column: span 2 / span 2; }
  .igs__col--md-3 { grid-column: span 3 / span 3; }
}

@media (min-width: 992px) {
  .igs { --igs-cols: 4; }
  .igs__col--lg-1 { grid-column: span 1 / span 1; }
  .igs__col--lg-2 { grid-column: span 2 / span 2; }
  .igs__col--lg-3 { grid-column: span 3 / span 3; }
  .igs__col--lg-4 { grid-column: span 4 / span 4; }
}

@media (min-width: 1200px) {
  .igs { --igs-cols: 6; }
  .igs__col--xl-1 { grid-column: span 1 / span 1; }
  .igs__col--xl-2 { grid-column: span 2 / span 2; }
  .igs__col--xl-3 { grid-column: span 3 / span 3; }
  .igs__col--xl-4 { grid-column: span 4 / span 4; }
  .igs__col--xl-5 { grid-column: span 5 / span 5; }
  .igs__col--xl-6 { grid-column: span 6 / span 6; }
}

/* Gap Utilities */
.igs--gap-none { --igs-gap: 0; }
.igs--gap-sm { --igs-gap: 0.75rem; }
.igs--gap-md { --igs-gap: 1.5rem; }
.igs--gap-lg { --igs-gap: 3rem; }

/* Alignment */
.igs--align-start { align-items: start; }
.igs--align-center { align-items: center; }
.igs--align-end { align-items: end; }
.igs--align-stretch { align-items: stretch; }

/* Justification */
.igs--justify-start { justify-items: start; }
.igs--justify-center { justify-items: center; }
.igs--justify-end { justify-items: end; }
.igs--justify-stretch { justify-items: stretch; }

/* Self Alignment */
.igs__col--self-start { align-self: start; }
.igs__col--self-center { align-self: center; }
.igs__col--self-end { align-self: end; }

/* Column Alignment */
.igs__col--content-start { justify-self: start; }
.igs__col--content-center { justify-self: center; }
.igs__col--content-end { justify-self: end; }