/* -------------------------------- 
CSS COLUMNS
-------------------------------- */
.block-editor-block-types-list__item-title {
    padding: 4px 2px 8px;
    text-align: center;
}

.section--transparent    { background: transparent; overflow: hidden; } 
.section--brand          { background: hsla(var(--brand),1);}
.section--brand-second   { background: hsla(var(--brand-second),1);} 


.row,
[class*="block--"] {
  list-style: none;
  display: flex; 
  flex-wrap: wrap;
  margin:0 auto;
  width:calc( 100% - var(--row-gap));
  max-width:var(--screen-l);
  position: relative; 
}


/*-------------------------------- 
ROWS Y BLOCK ANIDADAS
-------------------------------- */

/*.row + .row,
.row + [class*="block--"],
[class*="block--"] + .row,
[class*="block--"] + [class*="block--"] { margin-top: var(--space-xs); }*/


[class*="col-"] > .row                 { width: calc(100% + var(--space-m)); 
                                         margin:calc(-1 * (var(--space-m) / 2)) calc(-1 * (var(--space-m) / 2)); }
[class*="col-"] > [class*="block--"],
[class*="col-"] > [data-grid],
[data-grid] > div > [data-grid]   { width: calc(100% + var(--space-m)); margin:calc(-1 * (var(--space-m) / 2)); }

.row > .row { width: calc(100% + var(--row-gap)); margin-left: calc(-1 * (var(--space-m) / 2)); }


/*-------------------------------- 
COLUMNS
-------------------------------- */

.col, [class*="col-"]  { margin:calc(var(--space-m) / 2); }
.col { flex: 1; }
 
.col-1  { width: calc( 8.3333% - var(--space-m)) }
.col-2  { width: calc( 16.6667% - var(--space-m)) }
.col-3  { width: calc( 25% - var(--space-m)) }
.col-4  { width: calc( 33.3333% - var(--space-m)) }
.col-5  { width: calc( 41.6667% - var(--space-m)) }
.col-6  { width: calc( 50% - var(--space-m)) }
.col-7  { width: calc( 58.3333% - var(--space-m)) }
.col-8  { width: calc( 66.6667% - var(--space-m)) }
.col-9  { width: calc( 75% - var(--space-m)) }
.col-10 { width: calc( 83.3333% - var(--space-m)) }
.col-11 { width: calc( 91.6667% - var(--space-m)) }
.col-12 { width: calc( 100% - var(--space-m)) } 

/*-------------------------------- 
BLOCKS 
-------------------------------- */

[class*="block--"] > * { margin:calc(var(--space-m) / 2); }

.block--2 > *  { width: calc( 50% - var(--space-m)) }
.block--3 > *  { width: calc( 33.3333% - var(--space-m)) }
.block--4 > *  { width: calc( 25% - var(--space-m)) }
.block--5 > *  { width: calc( 20% - var(--space-m)) }
.block--6 > *  { width: calc( 16.6667% - var(--space-m)); }

[data-grid],
[data-grid-l],
[data-grid-m],
[data-grid-s] {
  list-style: none;
  display: flex; 
  flex-wrap: wrap;
  margin:0 auto;
  width:calc( 100% - var(--row-gap));
  max-width:var(--screen-l);
  position: relative;  
}

[data-grid] > *,
[data-grid-l] > *,
[data-grid-m] > *,
[data-grid-s] > * { margin:calc(var(--space-m) / 2); }

[data-grid="1"] > *  { width: calc( 100% - var(--space-m)) }
[data-grid="2"] > *  { width: calc( 50% - var(--space-m)) }
[data-grid="3"] > *  { width: calc( 33.3333% - var(--space-m)) }
[data-grid="4"] > *  { width: calc( 25% - var(--space-m)) }
[data-grid="5"] > *  { width: calc( 20% - var(--space-m)) }
[data-grid="6"] > *  { width: calc( 16.6667% - var(--space-m)); }

/*-------------------------------- 
NO GUTTERS WITH VARIABLES
-------------------------------- */

/* 
Aplicar esta clase si queremos tener el pequeño margen a derecha e izquierda dentro de la row
[class*="block--"].no--gutters,
.row.no--gutters { padding: 0 calc(var(--space-m) / 2); }
*/

.no--gutters >.col, 
.no--gutters >[class*="col-"],
.no--gutters[class*="block--"],
.no--gutters[data-grid] 
{
 --space-m: 0px!important;
 margin: 0px; 
}



.gutter--s >.col, 
.gutter--s >[class*="col-"],
.gutter--s[class*="block--"],
.gutter--s[data-grid] 

{

 --space-m: var(--space-s);
 
}

.gutter--xs >.col, 
.gutter--xs >[class*="col-"],
.gutter--xs[class*="block--"],
.gutter--xs[data-grid] 

{

 --space-m: 6px;
 
}


 
@media only screen (min-width:1440px) { 

.row, 
[class*="block--"] { width:calc(100% - var(--row-gap)); max-width:var(--grid-plusScreen); } 

} 
 

@media only screen and (max-width:1280px) {

 
}


@media only screen and (max-width:1024px) {

.col-l-1  { width: calc( 8.3333% - var(--space-m)) }
.col-l-2  { width: calc( 16.6667% - var(--space-m)) }
.col-l-3  { width: calc( 25% - var(--space-m)) }
.col-l-4  { width: calc( 33.3333% - var(--space-m)) }
.col-l-5  { width: calc( 41.6667% - var(--space-m)) }
.col-l-6  { width: calc( 50% - var(--space-m)) }
.col-l-7  { width: calc( 58.3333% - var(--space-m)) }
.col-l-8  { width: calc( 66.6667% - var(--space-m)) }
.col-l-9  { width: calc( 75% - var(--space-m)) }
.col-l-10 { width: calc( 83.3333% - var(--space-m)) }
.col-l-11 { width: calc( 91.6667% - var(--space-m)) }
.col-l-12 { width: calc( 100% - var(--space-m)) } 

.block--l-2 > *  { width: calc( 50% - var(--space-m)) }
.block--l-3 > *  { width: calc( 33.3333% - var(--space-m)) }
.block--l-4 > *  { width: calc( 25% - var(--space-m)) }
.block--l-5 > *  { width: calc( 20% - var(--space-m)) }
.block--l-6 > *  { width: calc( 16.6667% - var(--space-m)); }

[data-grid-l="1"] > *  { width: calc( 100% - var(--space-m)) }
[data-grid-l="2"] > *  { width: calc( 50% - var(--space-m)) }
[data-grid-l="3"] > *  { width: calc( 33.3333% - var(--space-m)) }
[data-grid-l="4"] > *  { width: calc( 25% - var(--space-m)) }
[data-grid-l="5"] > *  { width: calc( 20% - var(--space-m)) }
[data-grid-l="6"] > *  { width: calc( 16.6667% - var(--space-m)); }

}

@media only screen and (max-width:820px) {

/*.row--mobile {
  list-style: none;
  display: flex; 
  flex-wrap: wrap;
  margin:0 auto;
  width:calc( 100% - var(--row-gap));
  max-width:var(--screen-l);
  position: relative;  
}*/
 
[class*="col-"] > .row--mobile { width: 100%; }


[class*="col-"] { width: 100%; }
.col            { flex-basis:  100%; } 

.col-m-1  { width: calc(  8.3333% - var(--space-m)); }
.col-m-2  { width: calc( 16.6667% - var(--space-m)); }
.col-m-3  { width: calc(      25% - var(--space-m)); }
.col-m-4  { width: calc( 33.3333% - var(--space-m)); }
.col-m-5  { width: calc( 41.6667% - var(--space-m)); }
.col-m-6  { width: calc(      50% - var(--space-m)); }
.col-m-7  { width: calc( 58.3333% - var(--space-m)); }
.col-m-8  { width: calc( 66.6667% - var(--space-m)); }
.col-m-9  { width: calc(      75% - var(--space-m)); }
.col-m-10 { width: calc( 83.3333% - var(--space-m)); }
.col-m-11 { width: calc( 91.6667% - var(--space-m)); }
.col-m-12 { width: calc(     100% - var(--space-m)); } 

.block--m-2 > *  { width: calc( 50% - var(--space-m)) }
.block--m-3 > *  { width: calc( 33.3333% - var(--space-m)) }
.block--m-4 > *  { width: calc( 25% - var(--space-m)) }
.block--m-5 > *  { width: calc( 20% - var(--space-m)) }
.block--m-6 > *  { width: calc( 16.6667% - var(--space-m)); }

[data-grid-m="1"] > *  { width: calc( 100% - var(--space-m)) }
[data-grid-m="2"] > *  { width: calc( 50% - var(--space-m)) }
[data-grid-m="3"] > *  { width: calc( 33.3333% - var(--space-m)) }
[data-grid-m="4"] > *  { width: calc( 25% - var(--space-m)) }
[data-grid-m="5"] > *  { width: calc( 20% - var(--space-m)) }
[data-grid-m="6"] > *  { width: calc( 16.6667% - var(--space-m)); }

}


@media only screen and (max-width: 512px) { 

 
.col-s-1  { width: calc(  8.3333% - var(--space-m)) }
.col-s-2  { width: calc( 16.6667% - var(--space-m)) }
.col-s-3  { width: calc(      25% - var(--space-m)) }
.col-s-4  { width: calc( 33.3333% - var(--space-m)) }
.col-s-5  { width: calc( 41.6667% - var(--space-m)) }
.col-s-6  { width: calc(      50% - var(--space-m)) }
.col-s-7  { width: calc( 58.3333% - var(--space-m)) }
.col-s-8  { width: calc( 66.6667% - var(--space-m)) }
.col-s-9  { width: calc(      75% - var(--space-m)) }
.col-s-10 { width: calc( 83.3333% - var(--space-m)) }
.col-s-11 { width: calc( 91.6667% - var(--space-m)) }
.col-s-12 { width: calc(     100% - var(--space-m)) } 

.block--s-2 > *  { width: calc( 50% - var(--space-m)) }
.block--s-3 > *  { width: calc( 33.3333% - var(--space-m)) }
.block--s-4 > *  { width: calc( 25% - var(--space-m)) }
.block--s-5 > *  { width: calc( 20% - var(--space-m)) }
.block--s-6 > *  { width: calc( 16.6667% - var(--space-m)); }

[data-grid-s="1"] > *  { width: 100% }
[data-grid-s="2"] > *  { width: calc( 50% - var(--space-m)) }
[data-grid-s="3"] > *  { width: calc( 33.3333% - var(--space-m)) }
[data-grid-s="4"] > *  { width: calc( 25% - var(--space-m)) }
[data-grid-s="5"] > *  { width: calc( 20% - var(--space-m)) }
[data-grid-s="6"] > *  { width: calc( 16.6667% - var(--space-m)); }

[data-grid-s] > * { margin:calc(var(--space-m) / 4) 0; }
}

 
/* IE11 */

@media all and (-ms-high-contrast:none) {

 .center--items .row { margin:0; }

}