/*
Description: This defines a grid container; inline or block depending on the given value. It enables a grid context for all its direct children.
versión:  1.0;
*/
:root {
	/* number of columns per grid  */
    --cols2: repeat(2, 1fr);
    --cols3: repeat(3, 1fr);
    --cols4: repeat(4, 1fr);
    --cols5: repeat(5, 1fr);
    --cols6: repeat(6, 1fr);
}
.grid {display: grid;}
/* margin gaps */
.gap10 {grid-gap: 10px;} .gap15 {grid-gap: 15px;}
.gap20 {grid-gap: 20px;} .gap25 {grid-gap: 25px;}
.gap30 {grid-gap: 30px;} .gap35 {grid-gap: 35px;}
.gap40 {grid-gap: 40px;} .gap45 {grid-gap: 45px;}

.gCenter {justify-items: center;}
.gEnd {justify-items: end;}

.cols2 {grid-template-columns: var(--cols2);}
.cols3 {grid-template-columns: var(--cols3);}
.cols4 {grid-template-columns: var(--cols4);}
.cols5 {grid-template-columns: var(--cols5);}
.cols6 {grid-template-columns: var(--cols6);}

@media screen and (max-width: 900px) {
	:root {
        --cols2: repeat(2, 1fr);
        --cols3: repeat(2, 1fr);
        --cols4: repeat(2, 1fr);
        --cols5: repeat(3, 1fr);
        --cols6: repeat(3, 1fr);
	}
}

@media screen and (max-width: 640px) {
	:root {
    --cols2: repeat(1, 1fr);
    --cols3: repeat(1, 1fr);
    --cols4: repeat(1, 1fr);
    --cols5: repeat(1, 1fr);
    --cols6: repeat(1, 1fr);
	}
}