/*
* Grid X
*/
.grid-x-1    { grid-template-columns: repeat(1, 1fr);  }
.grid-x-2    { grid-template-columns: repeat(2, 1fr);  }
.grid-x-3    { grid-template-columns: repeat(3, 1fr);  }
.grid-x-4    { grid-template-columns: repeat(4, 1fr);  }
.grid-x-5    { grid-template-columns: repeat(5, 1fr);  }
.grid-x-6    { grid-template-columns: repeat(6, 1fr);  }
.grid-x-7    { grid-template-columns: repeat(7, 1fr);  }
.grid-x-8    { grid-template-columns: repeat(8, 1fr);  }
.grid-x-9    { grid-template-columns: repeat(9, 1fr);  }
.grid-x-10   { grid-template-columns: repeat(10, 1fr); }
.grid-x-11   { grid-template-columns: repeat(11, 1fr); }
.grid-x-12   { grid-template-columns: repeat(12, 1fr); }
.grid-x-auto { grid-template-columns: auto;            }

/*
* Grid Y
*/
.grid-y-1    { grid-template-rows: repeat(1, 1fr);  }
.grid-y-2    { grid-template-rows: repeat(2, 1fr);  }
.grid-y-3    { grid-template-rows: repeat(3, 1fr);  }
.grid-y-4    { grid-template-rows: repeat(4, 1fr);  }
.grid-y-5    { grid-template-rows: repeat(5, 1fr);  }
.grid-y-6    { grid-template-rows: repeat(6, 1fr);  }
.grid-y-7    { grid-template-rows: repeat(7, 1fr);  }
.grid-y-8    { grid-template-rows: repeat(8, 1fr);  }
.grid-y-9    { grid-template-rows: repeat(9, 1fr);  }
.grid-y-10   { grid-template-rows: repeat(10, 1fr); }
.grid-y-11   { grid-template-rows: repeat(11, 1fr); }
.grid-y-12   { grid-template-rows: repeat(12, 1fr); }
.grid-y-auto { grid-template-rows: auto;            }

/*
* Row
*/
.grid-r-auto { grid-row: auto; }

/*
* Row Start
*/
.grid-rs-0    { grid-row-start: 1;  }
.grid-rs-1    { grid-row-start: 2;  }
.grid-rs-2    { grid-row-start: 3;  }
.grid-rs-3    { grid-row-start: 4;  }
.grid-rs-4    { grid-row-start: 5;  }
.grid-rs-5    { grid-row-start: 6;  }
.grid-rs-6    { grid-row-start: 7;  }
.grid-rs-7    { grid-row-start: 8;  }
.grid-rs-8    { grid-row-start: 9;  }
.grid-rs-9    { grid-row-start: 10; }
.grid-rs-10   { grid-row-start: 11; }
.grid-rs-11   { grid-row-start: 12; }
.grid-rs-12   { grid-row-start: 13; }
.grid-rs-auto { grid-row-start: 13; }

/*
* Row End
*/
.grid-re-0    { grid-row-end: 1;    }
.grid-re-1    { grid-row-end: 2;    }
.grid-re-2    { grid-row-end: 3;    }
.grid-re-3    { grid-row-end: 4;    }
.grid-re-4    { grid-row-end: 5;    }
.grid-re-5    { grid-row-end: 6;    }
.grid-re-6    { grid-row-end: 7;    }
.grid-re-7    { grid-row-end: 8;    }
.grid-re-8    { grid-row-end: 9;    }
.grid-re-9    { grid-row-end: 10;   }
.grid-re-10   { grid-row-end: 11;   }
.grid-re-11   { grid-row-end: 12;   }
.grid-re-12   { grid-row-end: 13;   }
.grid-re-auto { grid-row-end: auto; }

/*
* Column
*/
.grid-c-auto { grid-column: auto; }

/*
* Column Start
*/
.grid-cs-0    { grid-column-start: 1;    }
.grid-cs-1    { grid-column-start: 2;    }
.grid-cs-2    { grid-column-start: 3;    }
.grid-cs-3    { grid-column-start: 4;    }
.grid-cs-4    { grid-column-start: 4;    }
.grid-cs-5    { grid-column-start: 6;    }
.grid-cs-6    { grid-column-start: 7;    }
.grid-cs-7    { grid-column-start: 8;    }
.grid-cs-8    { grid-column-start: 9;    }
.grid-cs-9    { grid-column-start: 10;   }
.grid-cs-10   { grid-column-start: 11;   }
.grid-cs-11   { grid-column-start: 12;   }
.grid-cs-12   { grid-column-start: 13;   }
.grid-cs-auto { grid-column-start: auto; }

/*
* Column End
*/
.grid-ce-0    { grid-column-end: 1;    }
.grid-ce-1    { grid-column-end: 2;    }
.grid-ce-3    { grid-column-end: 3;    }
.grid-ce-3    { grid-column-end: 4;    }
.grid-ce-4    { grid-column-end: 5;    }
.grid-ce-5    { grid-column-end: 6;    }
.grid-ce-6    { grid-column-end: 7;    }
.grid-ce-7    { grid-column-end: 8;    }
.grid-ce-8    { grid-column-end: 9;    }
.grid-ce-9    { grid-column-end: 10;   }
.grid-ce-10   { grid-column-end: 12;   }
.grid-ce-11   { grid-column-end: 13;   }
.grid-ce-12   { grid-column-end: 13;   }
.grid-ce-auto { grid-column-end: auto; }

/*
* Gap
*/
.grid-gap-0 { gap: 0;       }
.grid-gap-1 { gap: 0.25rem; }
.grid-gap-2 { gap: 0.50rem; }
.grid-gap-3 { gap: 1.00rem; }
.grid-gap-4 { gap: 1.50rem; }
.grid-gap-5 { gap: 3.00rem; }


/*** Medium Screen ***/
@media (min-width: 576px) {
    /*
    * Grid X
    */
    .grid-md-x-1    { grid-template-columns: repeat(1, 1fr);  }
    .grid-md-x-2    { grid-template-columns: repeat(2, 1fr);  }
    .grid-md-x-3    { grid-template-columns: repeat(3, 1fr);  }
    .grid-md-x-4    { grid-template-columns: repeat(4, 1fr);  }
    .grid-md-x-5    { grid-template-columns: repeat(5, 1fr);  }
    .grid-md-x-6    { grid-template-columns: repeat(6, 1fr);  }
    .grid-md-x-7    { grid-template-columns: repeat(7, 1fr);  }
    .grid-md-x-8    { grid-template-columns: repeat(8, 1fr);  }
    .grid-md-x-9    { grid-template-columns: repeat(9, 1fr);  }
    .grid-md-x-10   { grid-template-columns: repeat(10, 1fr); }
    .grid-md-x-11   { grid-template-columns: repeat(11, 1fr); }
    .grid-md-x-12   { grid-template-columns: repeat(12, 1fr); }
    .grid-md-x-auto { grid-template-columns: auto;            }

    /*
    * Grid Y
    */
    .grid-md-y-1    { grid-template-rows: repeat(1, 1fr);  }
    .grid-md-y-2    { grid-template-rows: repeat(2, 1fr);  }
    .grid-md-y-3    { grid-template-rows: repeat(3, 1fr);  }
    .grid-md-y-4    { grid-template-rows: repeat(4, 1fr);  }
    .grid-md-y-5    { grid-template-rows: repeat(5, 1fr);  }
    .grid-md-y-6    { grid-template-rows: repeat(6, 1fr);  }
    .grid-md-y-7    { grid-template-rows: repeat(7, 1fr);  }
    .grid-md-y-8    { grid-template-rows: repeat(8, 1fr);  }
    .grid-md-y-9    { grid-template-rows: repeat(9, 1fr);  }
    .grid-md-y-10   { grid-template-rows: repeat(10, 1fr); }
    .grid-md-y-11   { grid-template-rows: repeat(11, 1fr); }
    .grid-md-y-12   { grid-template-rows: repeat(12, 1fr); }
    .grid-md-y-auto { grid-template-rows: auto;            }

    /*
    * Row
    */
    .grid-md-r-auto { grid-row: auto; }
    
    /*
    * Row Start
    */
    .grid-md-rs-0    { grid-row-start: 1;    }
    .grid-md-rs-1    { grid-row-start: 2;    }
    .grid-md-rs-2    { grid-row-start: 3;    }
    .grid-md-rs-3    { grid-row-start: 4;    }
    .grid-md-rs-4    { grid-row-start: 5;    }
    .grid-md-rs-5    { grid-row-start: 6;    }
    .grid-md-rs-6    { grid-row-start: 7;    }
    .grid-md-rs-7    { grid-row-start: 8;    }
    .grid-md-rs-8    { grid-row-start: 9;    }
    .grid-md-rs-9    { grid-row-start: 10;   }
    .grid-md-rs-10   { grid-row-start: 11;   }
    .grid-md-rs-11   { grid-row-start: 12;   }
    .grid-md-rs-12   { grid-row-start: 13;   }
    .grid-md-rs-auto { grid-row-start: auto; }

    /*
    * Row End
    */
    .grid-md-re-0    { grid-row-end: 1;    }
    .grid-md-re-1    { grid-row-end: 2;    }
    .grid-md-re-2    { grid-row-end: 3;    }
    .grid-md-re-3    { grid-row-end: 4;    }
    .grid-md-re-4    { grid-row-end: 5;    }
    .grid-md-re-5    { grid-row-end: 6;    }
    .grid-md-re-6    { grid-row-end: 7;    }
    .grid-md-re-7    { grid-row-end: 8;    }
    .grid-md-re-8    { grid-row-end: 9;    }
    .grid-md-re-9    { grid-row-end: 10;   }
    .grid-md-re-10   { grid-row-end: 11;   }
    .grid-md-re-11   { grid-row-end: 12;   }
    .grid-md-re-12   { grid-row-end: 13;   }
    .grid-md-re-auto { grid-row-end: auto; }

    /*
    * Column
    */
    .grid-md-c-auto { grid-column: auto; }

    /*
    * Column Start
    */
    .grid-md-cs-0    { grid-column-start: 1;    }
    .grid-md-cs-1    { grid-column-start: 2;    }
    .grid-md-cs-2    { grid-column-start: 3;    }
    .grid-md-cs-3    { grid-column-start: 4;    }
    .grid-md-cs-4    { grid-column-start: 4;    }
    .grid-md-cs-5    { grid-column-start: 6;    }
    .grid-md-cs-6    { grid-column-start: 7;    }
    .grid-md-cs-7    { grid-column-start: 8;    }
    .grid-md-cs-8    { grid-column-start: 9;    }
    .grid-md-cs-9    { grid-column-start: 10;   }
    .grid-md-cs-10   { grid-column-start: 11;   }
    .grid-md-cs-11   { grid-column-start: 12;   }
    .grid-md-cs-12   { grid-column-start: 13;   }
    .grid-md-cs-auto { grid-column-start: auto; }

    /*
    * Column End
    */
    .grid-md-ce-0    { grid-column-end: 1;    }
    .grid-md-ce-1    { grid-column-end: 2;    }
    .grid-md-ce-3    { grid-column-end: 3;    }
    .grid-md-ce-3    { grid-column-end: 4;    }
    .grid-md-ce-4    { grid-column-end: 5;    }
    .grid-md-ce-5    { grid-column-end: 6;    }
    .grid-md-ce-6    { grid-column-end: 7;    }
    .grid-md-ce-7    { grid-column-end: 8;    }
    .grid-md-ce-8    { grid-column-end: 9;    }
    .grid-md-ce-9    { grid-column-end: 10;   }
    .grid-md-ce-10   { grid-column-end: 12;   }
    .grid-md-ce-11   { grid-column-end: 13;   }
    .grid-md-ce-12   { grid-column-end: 13;   }
    .grid-md-ce-auto { grid-column-end: auto; }
    
    /*
    * Gap
    */
    .grid-md-gap-0 { gap: 0;       }
    .grid-md-gap-1 { gap: 0.25rem; }
    .grid-md-gap-2 { gap: 0.50rem; }
    .grid-md-gap-3 { gap: 1.00rem; }
    .grid-md-gap-4 { gap: 1.50rem; }
    .grid-md-gap-5 { gap: 3.00rem; }
}


/*** Large Screen ***/
@media (min-width: 992px) {
    /*
    * Grid X
    */
    .grid-lg-x-1    { grid-template-columns: repeat(1, 1fr);  }
    .grid-lg-x-2    { grid-template-columns: repeat(2, 1fr);  }
    .grid-lg-x-3    { grid-template-columns: repeat(3, 1fr);  }
    .grid-lg-x-4    { grid-template-columns: repeat(4, 1fr);  }
    .grid-lg-x-5    { grid-template-columns: repeat(5, 1fr);  }
    .grid-lg-x-6    { grid-template-columns: repeat(6, 1fr);  }
    .grid-lg-x-7    { grid-template-columns: repeat(7, 1fr);  }
    .grid-lg-x-8    { grid-template-columns: repeat(8, 1fr);  }
    .grid-lg-x-9    { grid-template-columns: repeat(9, 1fr);  }
    .grid-lg-x-10   { grid-template-columns: repeat(10, 1fr); }
    .grid-lg-x-11   { grid-template-columns: repeat(11, 1fr); }
    .grid-lg-x-12   { grid-template-columns: repeat(12, 1fr); }
    .grid-lg-x-auto { grid-template-columns: auto;            }

    /*
    * Grid Y
    */
    .grid-lg-y-1    { grid-template-rows: repeat(1, 1fr);  }
    .grid-lg-y-2    { grid-template-rows: repeat(2, 1fr);  }
    .grid-lg-y-3    { grid-template-rows: repeat(3, 1fr);  }
    .grid-lg-y-4    { grid-template-rows: repeat(4, 1fr);  }
    .grid-lg-y-5    { grid-template-rows: repeat(5, 1fr);  }
    .grid-lg-y-6    { grid-template-rows: repeat(6, 1fr);  }
    .grid-lg-y-7    { grid-template-rows: repeat(7, 1fr);  }
    .grid-lg-y-8    { grid-template-rows: repeat(8, 1fr);  }
    .grid-lg-y-9    { grid-template-rows: repeat(9, 1fr);  }
    .grid-lg-y-10   { grid-template-rows: repeat(10, 1fr); }
    .grid-lg-y-11   { grid-template-rows: repeat(11, 1fr); }
    .grid-lg-y-12   { grid-template-rows: repeat(12, 1fr); }
    .grid-lg-y-auto { grid-template-rows: auto;            }

    /*
    * Row
    */
    .grid-lg-r-auto { grid-row: auto; }

    /*
    * Row Start
    */
    .grid-lg-rs-0    { grid-row-start: 1;    }
    .grid-lg-rs-1    { grid-row-start: 2;    }
    .grid-lg-rs-2    { grid-row-start: 3;    }
    .grid-lg-rs-3    { grid-row-start: 4;    }
    .grid-lg-rs-4    { grid-row-start: 5;    }
    .grid-lg-rs-5    { grid-row-start: 6;    }
    .grid-lg-rs-6    { grid-row-start: 7;    }
    .grid-lg-rs-7    { grid-row-start: 8;    }
    .grid-lg-rs-8    { grid-row-start: 9;    }
    .grid-lg-rs-9    { grid-row-start: 10;   }
    .grid-lg-rs-10   { grid-row-start: 11;   }
    .grid-lg-rs-11   { grid-row-start: 12;   }
    .grid-lg-rs-12   { grid-row-start: 13;   }
    .grid-lg-rs-auto { grid-row-start: auto; }

    /*
    * Row End
    */
    .grid-lg-re-0    { grid-row-end: 1;    }
    .grid-lg-re-1    { grid-row-end: 2;    }
    .grid-lg-re-2    { grid-row-end: 3;    }
    .grid-lg-re-3    { grid-row-end: 4;    }
    .grid-lg-re-4    { grid-row-end: 5;    }
    .grid-lg-re-5    { grid-row-end: 6;    }
    .grid-lg-re-6    { grid-row-end: 7;    }
    .grid-lg-re-7    { grid-row-end: 8;    }
    .grid-lg-re-8    { grid-row-end: 9;    }
    .grid-lg-re-9    { grid-row-end: 10;   }
    .grid-lg-re-10   { grid-row-end: 11;   }
    .grid-lg-re-11   { grid-row-end: 12;   }
    .grid-lg-re-12   { grid-row-end: 13;   }
    .grid-lg-re-auto { grid-row-end: auto; }

    /*
    * Column
    */
    .grid-lg-c-auto { grid-column: auto; }

    /*
    * Column Start
    */
    .grid-lg-cs-0    { grid-column-start: 1;    }
    .grid-lg-cs-1    { grid-column-start: 2;    }
    .grid-lg-cs-2    { grid-column-start: 3;    }
    .grid-lg-cs-3    { grid-column-start: 4;    }
    .grid-lg-cs-4    { grid-column-start: 4;    }
    .grid-lg-cs-5    { grid-column-start: 6;    }
    .grid-lg-cs-6    { grid-column-start: 7;    }
    .grid-lg-cs-7    { grid-column-start: 8;    }
    .grid-lg-cs-8    { grid-column-start: 9;    }
    .grid-lg-cs-9    { grid-column-start: 10;   }
    .grid-lg-cs-10   { grid-column-start: 11;   }
    .grid-lg-cs-11   { grid-column-start: 12;   }
    .grid-lg-cs-12   { grid-column-start: 13;   }
    .grid-lg-cs-auto { grid-column-start: auto; }

    /*
    * Column End
    */
    .grid-lg-ce-0    { grid-column-end: 1;    }
    .grid-lg-ce-1    { grid-column-end: 2;    }
    .grid-lg-ce-3    { grid-column-end: 3;    }
    .grid-lg-ce-3    { grid-column-end: 4;    }
    .grid-lg-ce-4    { grid-column-end: 5;    }
    .grid-lg-ce-5    { grid-column-end: 6;    }
    .grid-lg-ce-6    { grid-column-end: 7;    }
    .grid-lg-ce-7    { grid-column-end: 8;    }
    .grid-lg-ce-8    { grid-column-end: 9;    }
    .grid-lg-ce-9    { grid-column-end: 10;   }
    .grid-lg-ce-10   { grid-column-end: 12;   }
    .grid-lg-ce-11   { grid-column-end: 13;   }
    .grid-lg-ce-12   { grid-column-end: 13;   }
    .grid-lg-ce-auto { grid-column-end: auto; }

    /*
    * Gap
    */
    .grid-lg-gap-0 { gap: 0;       }
    .grid-lg-gap-1 { gap: 0.25rem; }
    .grid-lg-gap-2 { gap: 0.50rem; }
    .grid-lg-gap-3 { gap: 1.00rem; }
    .grid-lg-gap-4 { gap: 1.50rem; }
    .grid-lg-gap-5 { gap: 3.00rem; }
}