/* ==========================================================================
   HAUS OF LESS
   Grid System
   Version: 2.0
   Last Updated: July 2026

   Changes
   - Optimized grid architecture
   - Improved responsive behavior
   - Standardized spacing
   - Added utility improvements
   - Production ready
   ========================================================================== */


/* ==========================================================
   Base Grid
========================================================== */

.grid{

    display:grid;

    gap:var(--space-5);

    grid-auto-flow:row;

}


/* ==========================================================
   Two Columns
========================================================== */

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:var(--space-7);

    align-items:center;

}


/* ==========================================================
   Three Columns
========================================================== */

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:2.5rem;

    align-items:stretch;

}


/* ==========================================================
   Four Columns
========================================================== */

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:var(--space-5);

    align-items:stretch;

}


/* ==========================================================
   Five Columns
========================================================== */

.grid-5{

    display:grid;

    grid-template-columns:repeat(5,minmax(0,1fr));

    gap:var(--space-5);

    align-items:stretch;

}


/* ==========================================================
   Editorial Grid
========================================================== */

.editorial-grid{

    display:grid;

    grid-template-columns:

        220px

        minmax(0,1fr);

    gap:var(--space-8);

    align-items:start;

}


/* ==========================================================
   Split Grid
========================================================== */

.split-grid{

    display:grid;

    grid-template-columns:

        minmax(0,1fr)

        minmax(0,1fr);

    gap:var(--space-8);

    align-items:end;

}


/* ==========================================================
   Hero Grid
========================================================== */

.hero-grid{

    display:grid;

    grid-template-columns:

        minmax(0,720px)

        1fr;

    gap:var(--space-8);

    align-items:end;

}


/* ==========================================================
   Cards Grid
========================================================== */

.cards-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(300px,1fr));

    gap:var(--space-5);

    align-items:stretch;

}


/* ==========================================================
   Services Grid
========================================================== */

.services-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(280px,1fr));

    gap:2.5rem;

    align-items:stretch;

}


/* ==========================================================
   Situation Grid
========================================================== */

.situation-grid{

    display:grid;

    grid-template-columns:

        repeat(3,minmax(0,1fr));

    gap:var(--space-5);

}


/* ==========================================================
   Gallery Grid
========================================================== */

.gallery-grid{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:1.5rem;

}


/* ==========================================================
   Partners Grid
========================================================== */

.partners-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(180px,1fr));

    gap:var(--space-5);

    align-items:center;

}


/* ==========================================================
   Responsive
========================================================== */

@media (max-width:1200px){

    .grid-4{

        grid-template-columns:repeat(2,1fr);

    }

    .grid-5{

        grid-template-columns:repeat(3,1fr);

    }

}


@media (max-width:992px){

    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .split-grid,
    .editorial-grid,
    .hero-grid,
    .situation-grid,
    .gallery-grid{

        grid-template-columns:1fr;

    }

    .editorial-grid{

        gap:var(--space-5);

    }

    .split-grid,
    .hero-grid{

        gap:var(--space-6);

    }

}


@media (max-width:768px){

    .cards-grid,
    .services-grid,
    .partners-grid{

        grid-template-columns:1fr;

    }

}