/* grid.css */
:root {
    /* Gap scale */
    --gap-1: 1px;
    --gap-2: 2px;
    --gap-3: 4px;
    --gap-4: 8px;
    --gap-5: 16px;
    --gap-6: 24px;
    --gap-7: 32px;
    --gap-8: 40px;
    --gap-9: 48px;
    --gap-10: 64px;
  }
  
  /* Base grid */
  .grid {
    display: grid;
    width: 100%;
  }
  .auto-flow-column {
    grid-auto-flow: column;
  }
  
  /* Columns (1-5) */
  .grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .grid-cols-9  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  
  /* Responsive Breakpoints */
  /* Small (sm) - 640px */
  @media (min-width: 640px) {
    .sm-grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sm-grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm-grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm-grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sm-grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sm-grid-cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .sm-grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .sm-grid-cols-9  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .sm-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .sm-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .sm-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  }
  
  /* Medium (md) - 768px */
  @media (min-width: 768px) {
    .md-grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md-grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md-grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md-grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md-grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md-grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md-grid-cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .md-grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .md-grid-cols-9  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .md-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .md-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .md-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .gap-md-8 { gap: var(--gap-8); }
    .gap-md-7 { gap: var(--gap-7); }
    .gap-md-20 { gap: 20px; }
  }
  
  /* Large (lg) - 1024px */
  @media (min-width: 1024px) {
      .lg-grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
      .lg-grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .lg-grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .lg-grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .lg-grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
      .lg-grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
      .lg-grid-cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
      .lg-grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
      .lg-grid-cols-9  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
      .lg-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
      .lg-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
      .lg-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  }
  
  /* Extra Large (xl) - 1280px */
  @media (min-width: 1280px) {
    .xl-grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .xl-grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xl-grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl-grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl-grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xl-grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .xl-grid-cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .xl-grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .xl-grid-cols-9  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .xl-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .xl-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .xl-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  }
  
  /* Gap Utilities */
  .gap-1 { gap: var(--gap-1); }
  .gap-2 { gap: var(--gap-2); }
  .gap-3 { gap: var(--gap-3); }
  .gap-4 { gap: var(--gap-4); }
  .gap-5 { gap: var(--gap-5); }
  .gap-6 { gap: var(--gap-6); }
  .gap-7 { gap: var(--gap-7); }
  .gap-8 { gap: var(--gap-8); }
 
  .gap-9 { gap: var(--gap-9); }
  .gap-10 { gap: var(--gap-10); }
  
  /* Column Gaps */
  .col-gap-1 { column-gap: var(--gap-1); }
  .col-gap-2 { column-gap: var(--gap-2); }
  .col-gap-3 { column-gap: var(--gap-3); }
  .col-gap-4 { column-gap: var(--gap-4); }
  .col-gap-5 { column-gap: var(--gap-5); }
  .col-gap-6 { column-gap: var(--gap-6); }
  .col-gap-7 { column-gap: var(--gap-7); }
  .col-gap-8 { column-gap: var(--gap-8); }
  .col-gap-9 { column-gap: var(--gap-9); }
  .col-gap-10 { column-gap: var(--gap-10); }
  
  /* Row Gaps */
  .row-gap-1 { row-gap: var(--gap-1); }
  .row-gap-2 { row-gap: var(--gap-2); }
  .row-gap-3 { row-gap: var(--gap-3); }
  .row-gap-4 { row-gap: var(--gap-4); }
  .row-gap-5 { row-gap: var(--gap-5); }
  .row-gap-6 { row-gap: var(--gap-6); }
  .row-gap-7 { row-gap: var(--gap-7); }
  .row-gap-8 { row-gap: var(--gap-8); }
  .row-gap-9 { row-gap: var(--gap-9); }
  .row-gap-10 { row-gap: var(--gap-10); }



  /* Column Span (for custom grids based on 12 cols) */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }

/* Media queries for responsive column spans */
@media (min-width: 768px) {
  .md-col-span-1 { grid-column: span 1 / span 1; }
  .md-col-span-2 { grid-column: span 2 / span 2; }
  .md-col-span-3 { grid-column: span 3 / span 3; }
  .md-col-span-4 { grid-column: span 4 / span 4; }
  .md-col-span-5 { grid-column: span 5 / span 5; }
  .md-col-span-6 { grid-column: span 6 / span 6; }
  .md-col-span-7 { grid-column: span 7 / span 7; }
  .md-col-span-8 { grid-column: span 8 / span 8; }
  .md-col-span-9 { grid-column: span 9 / span 9; }
  .md-col-span-10 { grid-column: span 10 / span 10; }
  .md-col-span-11 { grid-column: span 11 / span 11; }
  .md-col-span-12 { grid-column: span 12 / span 12; }
}
@media (min-width: 1024) {
  .lg-col-span-1 { grid-column: span 1 / span 1; }
  .lg-col-span-2 { grid-column: span 2 / span 2; }
  .lg-col-span-3 { grid-column: span 3 / span 3; }
  .lg-col-span-4 { grid-column: span 4 / span 4; }
  .lg-col-span-5 { grid-column: span 5 / span 5; }
  .lg-col-span-6 { grid-column: span 6 / span 6; }
  .lg-col-span-7 { grid-column: span 7 / span 7; }
  .lg-col-span-8 { grid-column: span 8 / span 8; }
  .lg-col-span-9 { grid-column: span 9 / span 9; }
  .lg-col-span-10 { grid-column: span 10 / span 10; }
  .lg-col-span-11 { grid-column: span 11 / span 11; }
  .lg-col-span-12 { grid-column: span 12 / span 12; }
}

/* Orders */
@media only screen and (max-width: 768px) {
  .sm-order-1{order: 1;}
  .sm-order-2{order: 2;}
}


.justify-items-center{
  justify-items: center;
}