/* ==========================================================
   LicitaAI.club
   grid.css
   Design System v2.0
   Mobile First
   Compatível com todos os HTMLs existentes
==========================================================*/

/*==========================================================
  CONTAINER
==========================================================*/

.container{
    width:100%;
    max-width:var(--container-width);
    margin-inline:auto;
    padding-inline:var(--container-padding);
}

.container-fluid{
    width:100%;
    padding-inline:var(--container-padding);
}

/*==========================================================
  GRID BASE
==========================================================*/

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

.grid-1{grid-template-columns:1fr;}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
.grid-4{grid-template-columns:1fr;}
.grid-5{grid-template-columns:1fr;}
.grid-6{grid-template-columns:1fr;}

.col{
    min-width:0;
}

/*==========================================================
  AUTO GRID
==========================================================*/

.grid-auto{
    display:grid;
    gap:var(--space-6);
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

.grid-auto-sm{
    display:grid;
    gap:var(--space-5);
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.grid-auto-lg{
    display:grid;
    gap:var(--space-7);
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
}

/*==========================================================
  GAP
==========================================================*/

.gap-0{gap:0;}
.gap-1{gap:var(--space-1);}
.gap-2{gap:var(--space-2);}
.gap-3{gap:var(--space-3);}
.gap-4{gap:var(--space-4);}
.gap-5{gap:var(--space-5);}
.gap-6{gap:var(--space-6);}
.gap-7{gap:var(--space-7);}
.gap-8{gap:var(--space-8);}
.gap-9{gap:var(--space-9);}

/*==========================================================
  ALIGN
==========================================================*/

.items-start{align-items:start;}
.items-center{align-items:center;}
.items-end{align-items:end;}
.items-stretch{align-items:stretch;}

.justify-start{justify-content:start;}
.justify-center{justify-content:center;}
.justify-end{justify-content:end;}
.justify-between{justify-content:space-between;}
.justify-around{justify-content:space-around;}
.justify-evenly{justify-content:space-evenly;}

/*==========================================================
  LAYOUT
==========================================================*/

.layout{
    display:grid;
    min-height:100vh;
    grid-template-columns:1fr;
}

.dashboard-grid{
    display:grid;
    gap:var(--space-6);
    grid-template-columns:1fr;
}

/*==========================================================
  TABLET
==========================================================*/

@media(min-width:768px){

.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(2,1fr);}
.grid-5{grid-template-columns:repeat(3,1fr);}
.grid-6{grid-template-columns:repeat(3,1fr);}

.dashboard-grid{
grid-template-columns:repeat(2,1fr);
}

}

/*==========================================================
  DESKTOP
==========================================================*/

@media(min-width:1024px){

.layout{
grid-template-columns:var(--sidebar-width) 1fr;
}

.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}
.grid-6{grid-template-columns:repeat(6,1fr);}

}

/*==========================================================
  LARGE DESKTOP
==========================================================*/

@media(min-width:1280px){

.dashboard-grid{
grid-template-columns:repeat(4,1fr);
}

}

@media(min-width:1600px){

.container{
max-width:1680px;
}

}