/* =====================================
   UNIVERSAL RESPONSIVE GRID SYSTEM
===================================== */

[class*="grid-"]{
width:100% !important;
box-sizing:border-box;
}

.grid-2,
.grid-2-1,
.grid-1-2,
.grid-3,
.grid-4,
.grid-1-2-1{
display:grid !important;
width:100% !important;
gap:20px;
align-items:start;
}

.grid-2 > *,
.grid-2-1 > *,
.grid-1-2 > *,
.grid-3 > *,
.grid-4 > *,
.grid-1-2-1 > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box;
}

/* Desktop */
.grid-2{grid-template-columns:1fr 1fr !important;}
.grid-2-1{grid-template-columns:2fr 1fr !important;}
.grid-1-2{grid-template-columns:1fr 2fr !important;}
.grid-3{grid-template-columns:1fr 1fr 1fr !important;}
.grid-4{grid-template-columns:repeat(4,1fr) !important;}
.grid-1-2-1{grid-template-columns:1fr 2fr 1fr !important;}

/* Tablet + Mobile */
@media (max-width:1024px){
.grid-2,
.grid-2-1,
.grid-1-2,
.grid-3,
.grid-4,
.grid-1-2-1{
grid-template-columns:1fr !important;
gap:18px;
}
}

@media (max-width:767px){
.grid-2,
.grid-2-1,
.grid-1-2,
.grid-3,
.grid-4,
.grid-1-2-1{
grid-template-columns:1fr !important;
gap:16px;
}
}