/*****************************************/
/***** Display grid: (d-grid) utilities **/
/*****   d-*-grid-1 to d-*-grid-12       */
/*****************************************/
.d-grid-1 { grid-template-columns: 1fr; }
.d-grid-2 { grid-template-columns: 1fr 1fr; }
.d-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.d-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.d-grid-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.d-grid-6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
.d-grid-7 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.d-grid-8 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.d-grid-9 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.d-grid-10 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.d-grid-11 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.d-grid-12 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }


/* ---------------------------------------------------- */
/* --- 2. BREAKPOINT 'sm' (min 576px) --- */
/* ---------------------------------------------------- */
@media (min-width: 576px) {
    .d-sm-grid-1 { grid-template-columns: 1fr; }
    .d-sm-grid-2 { grid-template-columns: 1fr 1fr; }
    .d-sm-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
    .d-sm-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .d-sm-grid-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    .d-sm-grid-6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-sm-grid-7 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-sm-grid-8 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-sm-grid-9 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-sm-grid-10 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-sm-grid-11 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-sm-grid-12 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
}

/* ---------------------------------------------------- */
/* --- 3. BREAKPOINT 'md' (min 768px) --- */
/* ---------------------------------------------------- */
@media (min-width: 768px) {
    .d-md-grid-1 { grid-template-columns: 1fr; }
    .d-md-grid-2 { grid-template-columns: 1fr 1fr; }
    .d-md-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
    .d-md-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .d-md-grid-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    .d-md-grid-6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-md-grid-7 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-md-grid-8 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-md-grid-9 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-md-grid-10 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-md-grid-11 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-md-grid-12 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
}

/* ---------------------------------------------------- */
/* --- 4. BREAKPOINT 'lg' (min 992px) --- */
/* ---------------------------------------------------- */
@media (min-width: 992px) {
    .d-lg-grid-1 { grid-template-columns: 1fr; }
    .d-lg-grid-2 { grid-template-columns: 1fr 1fr; }
    .d-lg-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
    .d-lg-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .d-lg-grid-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    .d-lg-grid-6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-lg-grid-7 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-lg-grid-8 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-lg-grid-9 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-lg-grid-10 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-lg-grid-11 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-lg-grid-12 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
}

/* ---------------------------------------------------- */
/* --- 5. BREAKPOINT 'xl' (min 1200px) --- */
/* ---------------------------------------------------- */
@media (min-width: 1200px) {
    .d-xl-grid-1 { grid-template-columns: 1fr; }
    .d-xl-grid-2 { grid-template-columns: 1fr 1fr; }
    .d-xl-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
    .d-xl-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .d-xl-grid-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    .d-xl-grid-6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-xl-grid-7 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-xl-grid-8 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-xl-grid-9 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-xl-grid-10 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-xl-grid-11 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-xl-grid-12 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
}

/* ---------------------------------------------------- */
/* --- 6. BREAKPOINT 'xxl' (min 1400px) --- */
/* ---------------------------------------------------- */
@media (min-width: 1400px) {
    .d-xxl-grid-1 { grid-template-columns: 1fr; }
    .d-xxl-grid-2 { grid-template-columns: 1fr 1fr; }
    .d-xxl-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
    .d-xxl-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .d-xxl-grid-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    .d-xxl-grid-6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-xxl-grid-7 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-xxl-grid-8 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-xxl-grid-9 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-xxl-grid-10 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-xxl-grid-11 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .d-xxl-grid-12 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
}