/* @group @variables */

[class*="m-grid"] {
--grid-template-columns: repeat(1, 1fr);
--gap: 2.25rem;
}

[style*="--grid: primary"] {
--grid-max-width: 30rem;
/*--grid-margin-right: auto;
--grid-margin-left: auto;*/
}

@container section (min-width: 36em) {

[style*="--grid: segundo"] {
--grid-template-columns: repeat(2, 1fr);
--grid-max-width: 36rem;
--grid-margin-right: auto;
--grid-margin-left: auto;
}

}

@container section (min-width: 48em) {

[style*="--grid: secondary"] {
--grid-template-columns: repeat(2, 1fr);
}

[style*="--grid: tertiary"] {
--grid-template-columns: repeat(3, 1fr);
}

}

@container section (min-width:62em) {

[style*="--grid: tercero"] {
--grid-template-columns: repeat(3, 1fr);
}

}

/* @end @variables */

/* @group @m-grid-header */

[class*="m-grid"] {
display: grid;
align-items: var(--align-items);
grid-template-columns: var(--grid-template-columns);
gap: var(--gap);
width: 100%;
max-width: var(--grid-max-width);
margin-right: var(--grid-margin-right);
margin-left: var(--grid-margin-left);
}

/* @end @m-grid-header */