web-component-stencil-test
Version:
Stencil Component Starter
198 lines (193 loc) • 65.3 kB
JavaScript
import { r as registerInstance, h, H as Host, c as createEvent } from './core-979eec24.js';
const COLUMNS = {
XS: 18,
S: 18,
M: 36,
L: 36,
XL: 36,
};
const GridCol = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Number of columns - As it's mobile first, that's the default size.
*/
this.col = 0;
/**
*Number of columns - S
*/
this.colS = 0;
/**
*Number of columns - M
*/
this.colM = 0;
/**
*Number of columns - L
*/
this.colL = 0;
/**
*Number of columns - XL
*/
this.colXL = 0;
/**
* Offset
*/
this.offset = 0;
/**
* Offset - S
*/
this.offsetS = 0;
/**
* Offset - M
*/
this.offsetM = 0;
/**
* Offset - L
*/
this.offsetL = 0;
/**
* Offset - XL
*/
this.offsetXL = 0;
/**
* Offset right
*/
this.offsetRight = 0;
/**
* Offset right - S
*/
this.offsetRightS = 0;
/**
* Offset right - M
*/
this.offsetRightM = 0;
/**
* Offset right - L
*/
this.offsetRightL = 0;
/**
* Offset right - XL
*/
this.offsetRightXL = 0;
/**
* Is centered
*/
this.isCentered = false;
this.getColClassnames = () => {
const col = this.col;
const colS = this.colS ? this.colS : col;
const colM = this.colM ? this.colM : colS;
const colL = this.colL ? this.colL : colM;
const colXL = this.colXL ? this.colXL : colL;
const colClassname = col ? `col-xs-${col}` : '';
const colSClassname = (colS && colS !== col) || (COLUMNS.S !== COLUMNS.XS) ? `col-s-${colS}` : '';
const colMClassname = (colM && colM !== colS) || colM > 0 ? `col-m-${colM}` : '';
const colLClassname = (colL && colL !== colM) || (COLUMNS.L !== COLUMNS.M) ? `col-l-${colL}` : '';
const colXLClassname = (colXL && colXL !== colL) || (COLUMNS.XL !== COLUMNS.L) ? `col-xl-${colXL}` : '';
return `${colClassname} ${colSClassname} ${colMClassname} ${colLClassname} ${colXLClassname}`;
};
this.getOffsetClassnames = () => {
// if no offset at all, no need for classes
if (!this.offset && !this.offsetS && !this.offsetM && !this.offsetL && !this.offsetXL)
return '';
const offsetClassname = this.offset > 0 ? `col-offset-xs-${this.offset}` : '';
const offsetSClassname = (this.offsetS !== this.offset) || (COLUMNS.S !== COLUMNS.XS) ? `col-offset-s-${this.offsetS}` : '';
const offsetMClassname = (this.offsetM !== this.offsetS) || (COLUMNS.M !== COLUMNS.S) ? `col-offset-m-${this.offsetM}` : '';
const offsetLClassname = (this.offsetL !== this.offsetM) || (COLUMNS.L !== COLUMNS.M) ? `col-offset-l-${this.offsetL}` : '';
const offsetXLClassname = (this.offsetXL !== this.offsetL) || (COLUMNS.XL !== COLUMNS.L) ? `col-offset-xl-${this.offsetXL}` : '';
return `${offsetClassname} ${offsetSClassname} ${offsetMClassname} ${offsetLClassname} ${offsetXLClassname}`;
};
this.getOffsetRightClassnames = () => {
// if no offset Right at all, no need for classes
if (!this.offsetRight && !this.offsetRightS && !this.offsetRightM && !this.offsetRightL && !this.offsetRightXL)
return '';
const offsetRightClassname = this.offsetRight > 0 ? `col-offset-right-xs-${this.offsetRight}` : '';
const offsetRightSClassname = (this.offsetRightS !== this.offsetRight) || (COLUMNS.S !== COLUMNS.XS) ? `col-offset-right-s-${this.offsetRightS}` : '';
const offsetRightMClassname = (this.offsetRightM !== this.offsetRightS) || (COLUMNS.M !== COLUMNS.S) ? `col-offset-right-m-${this.offsetRightM}` : '';
const offsetRightLClassname = (this.offsetRightL !== this.offsetRightM) || (COLUMNS.L !== COLUMNS.M) ? `col-offset-right-l-${this.offsetRightL}` : '';
const offsetRightXLClassname = (this.offsetRightXL !== this.offsetRightL) || (COLUMNS.XL !== COLUMNS.L) ? `col-offset-right-xl-${this.offsetRightXL}` : '';
return `${offsetRightClassname} ${offsetRightSClassname} ${offsetRightMClassname} ${offsetRightLClassname} ${offsetRightXLClassname}`;
};
}
render() {
const isCentered = this.isCentered ? `grid-col-center` : '';
return h(Host, { class: `grid-col
${isCentered}
${this.getColClassnames()}
${this.getOffsetClassnames()}
${this.getOffsetRightClassnames()}
` }, h("slot", null));
}
static get style() { return ":global *{vertical-align:baseline;border:0 none;padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}:global a,:global abbr,:global acronym,:global address,:global applet,:global big,:global blockquote,:global body,:global button,:global caption,:global cite,:global code,:global dd,:global del,:global dfn,:global div,:global dl,:global dt,:global em,:global fieldset,:global font,:global form,:global h1,:global h2,:global h3,:global h4,:global h5,:global h6,:global html,:global iframe,:global img,:global ins,:global kbd,:global label,:global legend,:global li,:global object,:global ol,:global p,:global pre,:global q,:global s,:global samp,:global small,:global span,:global strike,:global strong,:global sub,:global sup,:global table,:global tbody,:global td,:global tfoot,:global th,:global thead,:global tr,:global tt,:global ul,:global var{font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;font-weight:inherit;font-style:inherit;vertical-align:inherit;border:0 none;padding:0;margin:0}:global img{width:100%;height:auto;display:block}:global figure{margin:0}:global button{border:none;border-radius:0;background-color:transparent;cursor:pointer}:global [role=button],:global button,:global input[type=button],:global input[type=reset],:global input[type=submit]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}:global button,:global input[type=button],:global input[type=reset],:global input[type=submit]{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-appearance:button;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}:global button::-moz-focus-inner,:global input::-moz-focus-inner{border:0;padding:0}:global strong{font-weight:700}:global li{list-style-type:none}:global a{text-decoration:none;cursor:pointer;line-height:normal}:focus{-webkit-transition-delay:0ms;transition-delay:0ms}:global a,:global em,:global span,:global strong{font-size:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;font-family:inherit}.grid-col{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-preferred-size:100%;flex-basis:100%;width:100%;max-width:100%}.col-xs-1{-ms-flex-preferred-size:5.5555555556%;flex-basis:5.5555555556%;width:5.5555555556%;max-width:5.5555555556%}.col-xs-2{-ms-flex-preferred-size:11.1111111111%;flex-basis:11.1111111111%;width:11.1111111111%;max-width:11.1111111111%}.col-xs-3{-ms-flex-preferred-size:16.6666666667%;flex-basis:16.6666666667%;width:16.6666666667%;max-width:16.6666666667%}.col-xs-4{-ms-flex-preferred-size:22.2222222222%;flex-basis:22.2222222222%;width:22.2222222222%;max-width:22.2222222222%}.col-xs-5{-ms-flex-preferred-size:27.7777777778%;flex-basis:27.7777777778%;width:27.7777777778%;max-width:27.7777777778%}.col-xs-6{-ms-flex-preferred-size:33.3333333333%;flex-basis:33.3333333333%;width:33.3333333333%;max-width:33.3333333333%}.col-xs-7{-ms-flex-preferred-size:38.8888888889%;flex-basis:38.8888888889%;width:38.8888888889%;max-width:38.8888888889%}.col-xs-8{-ms-flex-preferred-size:44.4444444444%;flex-basis:44.4444444444%;width:44.4444444444%;max-width:44.4444444444%}.col-xs-9{-ms-flex-preferred-size:50%;flex-basis:50%;width:50%;max-width:50%}.col-xs-10{-ms-flex-preferred-size:55.5555555556%;flex-basis:55.5555555556%;width:55.5555555556%;max-width:55.5555555556%}.col-xs-11{-ms-flex-preferred-size:61.1111111111%;flex-basis:61.1111111111%;width:61.1111111111%;max-width:61.1111111111%}.col-xs-12{-ms-flex-preferred-size:66.6666666667%;flex-basis:66.6666666667%;width:66.6666666667%;max-width:66.6666666667%}.col-xs-13{-ms-flex-preferred-size:72.2222222222%;flex-basis:72.2222222222%;width:72.2222222222%;max-width:72.2222222222%}.col-xs-14{-ms-flex-preferred-size:77.7777777778%;flex-basis:77.7777777778%;width:77.7777777778%;max-width:77.7777777778%}.col-xs-15{-ms-flex-preferred-size:83.3333333333%;flex-basis:83.3333333333%;width:83.3333333333%;max-width:83.3333333333%}.col-xs-16{-ms-flex-preferred-size:88.8888888889%;flex-basis:88.8888888889%;width:88.8888888889%;max-width:88.8888888889%}.col-xs-17{-ms-flex-preferred-size:94.4444444444%;flex-basis:94.4444444444%;width:94.4444444444%;max-width:94.4444444444%}.col-xs-18{-ms-flex-preferred-size:100%;flex-basis:100%;width:100%;max-width:100%}.col-offset-xs-0{margin-left:0}.col-offset-xs-1{margin-left:5.5555555556%}.col-offset-xs-2{margin-left:11.1111111111%}.col-offset-xs-3{margin-left:16.6666666667%}.col-offset-xs-4{margin-left:22.2222222222%}.col-offset-xs-5{margin-left:27.7777777778%}.col-offset-xs-6{margin-left:33.3333333333%}.col-offset-xs-7{margin-left:38.8888888889%}.col-offset-xs-8{margin-left:44.4444444444%}.col-offset-xs-9{margin-left:50%}.col-offset-xs-10{margin-left:55.5555555556%}.col-offset-xs-11{margin-left:61.1111111111%}.col-offset-xs-12{margin-left:66.6666666667%}.col-offset-xs-13{margin-left:72.2222222222%}.col-offset-xs-14{margin-left:77.7777777778%}.col-offset-xs-15{margin-left:83.3333333333%}.col-offset-xs-16{margin-left:88.8888888889%}.col-offset-xs-17{margin-left:94.4444444444%}.col-offset-xs-18{margin-left:100%}.col-offset-right-XS-1{margin-right:5.5555555556%}.col-offset-right-XS-2{margin-right:11.1111111111%}.col-offset-right-XS-3{margin-right:16.6666666667%}.col-offset-right-XS-4{margin-right:22.2222222222%}.col-offset-right-XS-5{margin-right:27.7777777778%}.col-offset-right-XS-6{margin-right:33.3333333333%}.col-offset-right-XS-7{margin-right:38.8888888889%}.col-offset-right-XS-8{margin-right:44.4444444444%}.col-offset-right-XS-9{margin-right:50%}\@media (min-width:420px){.col-s-1{-ms-flex-preferred-size:5.5555555556%;flex-basis:5.5555555556%;width:5.5555555556%;max-width:5.5555555556%}}\@media (min-width:420px){.col-s-2{-ms-flex-preferred-size:11.1111111111%;flex-basis:11.1111111111%;width:11.1111111111%;max-width:11.1111111111%}}\@media (min-width:420px){.col-s-3{-ms-flex-preferred-size:16.6666666667%;flex-basis:16.6666666667%;width:16.6666666667%;max-width:16.6666666667%}}\@media (min-width:420px){.col-s-4{-ms-flex-preferred-size:22.2222222222%;flex-basis:22.2222222222%;width:22.2222222222%;max-width:22.2222222222%}}\@media (min-width:420px){.col-s-5{-ms-flex-preferred-size:27.7777777778%;flex-basis:27.7777777778%;width:27.7777777778%;max-width:27.7777777778%}}\@media (min-width:420px){.col-s-6{-ms-flex-preferred-size:33.3333333333%;flex-basis:33.3333333333%;width:33.3333333333%;max-width:33.3333333333%}}\@media (min-width:420px){.col-s-7{-ms-flex-preferred-size:38.8888888889%;flex-basis:38.8888888889%;width:38.8888888889%;max-width:38.8888888889%}}\@media (min-width:420px){.col-s-8{-ms-flex-preferred-size:44.4444444444%;flex-basis:44.4444444444%;width:44.4444444444%;max-width:44.4444444444%}}\@media (min-width:420px){.col-s-9{-ms-flex-preferred-size:50%;flex-basis:50%;width:50%;max-width:50%}}\@media (min-width:420px){.col-s-10{-ms-flex-preferred-size:55.5555555556%;flex-basis:55.5555555556%;width:55.5555555556%;max-width:55.5555555556%}}\@media (min-width:420px){.col-s-11{-ms-flex-preferred-size:61.1111111111%;flex-basis:61.1111111111%;width:61.1111111111%;max-width:61.1111111111%}}\@media (min-width:420px){.col-s-12{-ms-flex-preferred-size:66.6666666667%;flex-basis:66.6666666667%;width:66.6666666667%;max-width:66.6666666667%}}\@media (min-width:420px){.col-s-13{-ms-flex-preferred-size:72.2222222222%;flex-basis:72.2222222222%;width:72.2222222222%;max-width:72.2222222222%}}\@media (min-width:420px){.col-s-14{-ms-flex-preferred-size:77.7777777778%;flex-basis:77.7777777778%;width:77.7777777778%;max-width:77.7777777778%}}\@media (min-width:420px){.col-s-15{-ms-flex-preferred-size:83.3333333333%;flex-basis:83.3333333333%;width:83.3333333333%;max-width:83.3333333333%}}\@media (min-width:420px){.col-s-16{-ms-flex-preferred-size:88.8888888889%;flex-basis:88.8888888889%;width:88.8888888889%;max-width:88.8888888889%}}\@media (min-width:420px){.col-s-17{-ms-flex-preferred-size:94.4444444444%;flex-basis:94.4444444444%;width:94.4444444444%;max-width:94.4444444444%}}\@media (min-width:420px){.col-s-18{-ms-flex-preferred-size:100%;flex-basis:100%;width:100%;max-width:100%}}\@media (min-width:420px){.col-offset-s-0{margin-left:0}}\@media (min-width:420px){.col-offset-s-1{margin-left:5.5555555556%}}\@media (min-width:420px){.col-offset-s-2{margin-left:11.1111111111%}}\@media (min-width:420px){.col-offset-s-3{margin-left:16.6666666667%}}\@media (min-width:420px){.col-offset-s-4{margin-left:22.2222222222%}}\@media (min-width:420px){.col-offset-s-5{margin-left:27.7777777778%}}\@media (min-width:420px){.col-offset-s-6{margin-left:33.3333333333%}}\@media (min-width:420px){.col-offset-s-7{margin-left:38.8888888889%}}\@media (min-width:420px){.col-offset-s-8{margin-left:44.4444444444%}}\@media (min-width:420px){.col-offset-s-9{margin-left:50%}}\@media (min-width:420px){.col-offset-s-10{margin-left:55.5555555556%}}\@media (min-width:420px){.col-offset-s-11{margin-left:61.1111111111%}}\@media (min-width:420px){.col-offset-s-12{margin-left:66.6666666667%}}\@media (min-width:420px){.col-offset-s-13{margin-left:72.2222222222%}}\@media (min-width:420px){.col-offset-s-14{margin-left:77.7777777778%}}\@media (min-width:420px){.col-offset-s-15{margin-left:83.3333333333%}}\@media (min-width:420px){.col-offset-s-16{margin-left:88.8888888889%}}\@media (min-width:420px){.col-offset-s-17{margin-left:94.4444444444%}}\@media (min-width:420px){.col-offset-s-18{margin-left:100%}}\@media (min-width:420px){.col-offset-right-S-1{margin-right:5.5555555556%}}\@media (min-width:420px){.col-offset-right-S-2{margin-right:11.1111111111%}}\@media (min-width:420px){.col-offset-right-S-3{margin-right:16.6666666667%}}\@media (min-width:420px){.col-offset-right-S-4{margin-right:22.2222222222%}}\@media (min-width:420px){.col-offset-right-S-5{margin-right:27.7777777778%}}\@media (min-width:420px){.col-offset-right-S-6{margin-right:33.3333333333%}}\@media (min-width:420px){.col-offset-right-S-7{margin-right:38.8888888889%}}\@media (min-width:420px){.col-offset-right-S-8{margin-right:44.4444444444%}}\@media (min-width:420px){.col-offset-right-S-9{margin-right:50%}}\@media (min-width:768px){.col-m-1{-ms-flex-preferred-size:2.7777777778%;flex-basis:2.7777777778%;width:2.7777777778%;max-width:2.7777777778%}}\@media (min-width:768px){.col-m-2{-ms-flex-preferred-size:5.5555555556%;flex-basis:5.5555555556%;width:5.5555555556%;max-width:5.5555555556%}}\@media (min-width:768px){.col-m-3{-ms-flex-preferred-size:8.3333333333%;flex-basis:8.3333333333%;width:8.3333333333%;max-width:8.3333333333%}}\@media (min-width:768px){.col-m-4{-ms-flex-preferred-size:11.1111111111%;flex-basis:11.1111111111%;width:11.1111111111%;max-width:11.1111111111%}}\@media (min-width:768px){.col-m-5{-ms-flex-preferred-size:13.8888888889%;flex-basis:13.8888888889%;width:13.8888888889%;max-width:13.8888888889%}}\@media (min-width:768px){.col-m-6{-ms-flex-preferred-size:16.6666666667%;flex-basis:16.6666666667%;width:16.6666666667%;max-width:16.6666666667%}}\@media (min-width:768px){.col-m-7{-ms-flex-preferred-size:19.4444444444%;flex-basis:19.4444444444%;width:19.4444444444%;max-width:19.4444444444%}}\@media (min-width:768px){.col-m-8{-ms-flex-preferred-size:22.2222222222%;flex-basis:22.2222222222%;width:22.2222222222%;max-width:22.2222222222%}}\@media (min-width:768px){.col-m-9{-ms-flex-preferred-size:25%;flex-basis:25%;width:25%;max-width:25%}}\@media (min-width:768px){.col-m-10{-ms-flex-preferred-size:27.7777777778%;flex-basis:27.7777777778%;width:27.7777777778%;max-width:27.7777777778%}}\@media (min-width:768px){.col-m-11{-ms-flex-preferred-size:30.5555555556%;flex-basis:30.5555555556%;width:30.5555555556%;max-width:30.5555555556%}}\@media (min-width:768px){.col-m-12{-ms-flex-preferred-size:33.3333333333%;flex-basis:33.3333333333%;width:33.3333333333%;max-width:33.3333333333%}}\@media (min-width:768px){.col-m-13{-ms-flex-preferred-size:36.1111111111%;flex-basis:36.1111111111%;width:36.1111111111%;max-width:36.1111111111%}}\@media (min-width:768px){.col-m-14{-ms-flex-preferred-size:38.8888888889%;flex-basis:38.8888888889%;width:38.8888888889%;max-width:38.8888888889%}}\@media (min-width:768px){.col-m-15{-ms-flex-preferred-size:41.6666666667%;flex-basis:41.6666666667%;width:41.6666666667%;max-width:41.6666666667%}}\@media (min-width:768px){.col-m-16{-ms-flex-preferred-size:44.4444444444%;flex-basis:44.4444444444%;width:44.4444444444%;max-width:44.4444444444%}}\@media (min-width:768px){.col-m-17{-ms-flex-preferred-size:47.2222222222%;flex-basis:47.2222222222%;width:47.2222222222%;max-width:47.2222222222%}}\@media (min-width:768px){.col-m-18{-ms-flex-preferred-size:50%;flex-basis:50%;width:50%;max-width:50%}}\@media (min-width:768px){.col-m-19{-ms-flex-preferred-size:52.7777777778%;flex-basis:52.7777777778%;width:52.7777777778%;max-width:52.7777777778%}}\@media (min-width:768px){.col-m-20{-ms-flex-preferred-size:55.5555555556%;flex-basis:55.5555555556%;width:55.5555555556%;max-width:55.5555555556%}}\@media (min-width:768px){.col-m-21{-ms-flex-preferred-size:58.3333333333%;flex-basis:58.3333333333%;width:58.3333333333%;max-width:58.3333333333%}}\@media (min-width:768px){.col-m-22{-ms-flex-preferred-size:61.1111111111%;flex-basis:61.1111111111%;width:61.1111111111%;max-width:61.1111111111%}}\@media (min-width:768px){.col-m-23{-ms-flex-preferred-size:63.8888888889%;flex-basis:63.8888888889%;width:63.8888888889%;max-width:63.8888888889%}}\@media (min-width:768px){.col-m-24{-ms-flex-preferred-size:66.6666666667%;flex-basis:66.6666666667%;width:66.6666666667%;max-width:66.6666666667%}}\@media (min-width:768px){.col-m-25{-ms-flex-preferred-size:69.4444444444%;flex-basis:69.4444444444%;width:69.4444444444%;max-width:69.4444444444%}}\@media (min-width:768px){.col-m-26{-ms-flex-preferred-size:72.2222222222%;flex-basis:72.2222222222%;width:72.2222222222%;max-width:72.2222222222%}}\@media (min-width:768px){.col-m-27{-ms-flex-preferred-size:75%;flex-basis:75%;width:75%;max-width:75%}}\@media (min-width:768px){.col-m-28{-ms-flex-preferred-size:77.7777777778%;flex-basis:77.7777777778%;width:77.7777777778%;max-width:77.7777777778%}}\@media (min-width:768px){.col-m-29{-ms-flex-preferred-size:80.5555555556%;flex-basis:80.5555555556%;width:80.5555555556%;max-width:80.5555555556%}}\@media (min-width:768px){.col-m-30{-ms-flex-preferred-size:83.3333333333%;flex-basis:83.3333333333%;width:83.3333333333%;max-width:83.3333333333%}}\@media (min-width:768px){.col-m-31{-ms-flex-preferred-size:86.1111111111%;flex-basis:86.1111111111%;width:86.1111111111%;max-width:86.1111111111%}}\@media (min-width:768px){.col-m-32{-ms-flex-preferred-size:88.8888888889%;flex-basis:88.8888888889%;width:88.8888888889%;max-width:88.8888888889%}}\@media (min-width:768px){.col-m-33{-ms-flex-preferred-size:91.6666666667%;flex-basis:91.6666666667%;width:91.6666666667%;max-width:91.6666666667%}}\@media (min-width:768px){.col-m-34{-ms-flex-preferred-size:94.4444444444%;flex-basis:94.4444444444%;width:94.4444444444%;max-width:94.4444444444%}}\@media (min-width:768px){.col-m-35{-ms-flex-preferred-size:97.2222222222%;flex-basis:97.2222222222%;width:97.2222222222%;max-width:97.2222222222%}}\@media (min-width:768px){.col-m-36{-ms-flex-preferred-size:100%;flex-basis:100%;width:100%;max-width:100%}}\@media (min-width:768px){.col-offset-m-0{margin-left:0}}\@media (min-width:768px){.col-offset-m-1{margin-left:2.7777777778%}}\@media (min-width:768px){.col-offset-m-2{margin-left:5.5555555556%}}\@media (min-width:768px){.col-offset-m-3{margin-left:8.3333333333%}}\@media (min-width:768px){.col-offset-m-4{margin-left:11.1111111111%}}\@media (min-width:768px){.col-offset-m-5{margin-left:13.8888888889%}}\@media (min-width:768px){.col-offset-m-6{margin-left:16.6666666667%}}\@media (min-width:768px){.col-offset-m-7{margin-left:19.4444444444%}}\@media (min-width:768px){.col-offset-m-8{margin-left:22.2222222222%}}\@media (min-width:768px){.col-offset-m-9{margin-left:25%}}\@media (min-width:768px){.col-offset-m-10{margin-left:27.7777777778%}}\@media (min-width:768px){.col-offset-m-11{margin-left:30.5555555556%}}\@media (min-width:768px){.col-offset-m-12{margin-left:33.3333333333%}}\@media (min-width:768px){.col-offset-m-13{margin-left:36.1111111111%}}\@media (min-width:768px){.col-offset-m-14{margin-left:38.8888888889%}}\@media (min-width:768px){.col-offset-m-15{margin-left:41.6666666667%}}\@media (min-width:768px){.col-offset-m-16{margin-left:44.4444444444%}}\@media (min-width:768px){.col-offset-m-17{margin-left:47.2222222222%}}\@media (min-width:768px){.col-offset-m-18{margin-left:50%}}\@media (min-width:768px){.col-offset-m-19{margin-left:52.7777777778%}}\@media (min-width:768px){.col-offset-m-20{margin-left:55.5555555556%}}\@media (min-width:768px){.col-offset-m-21{margin-left:58.3333333333%}}\@media (min-width:768px){.col-offset-m-22{margin-left:61.1111111111%}}\@media (min-width:768px){.col-offset-m-23{margin-left:63.8888888889%}}\@media (min-width:768px){.col-offset-m-24{margin-left:66.6666666667%}}\@media (min-width:768px){.col-offset-m-25{margin-left:69.4444444444%}}\@media (min-width:768px){.col-offset-m-26{margin-left:72.2222222222%}}\@media (min-width:768px){.col-offset-m-27{margin-left:75%}}\@media (min-width:768px){.col-offset-m-28{margin-left:77.7777777778%}}\@media (min-width:768px){.col-offset-m-29{margin-left:80.5555555556%}}\@media (min-width:768px){.col-offset-m-30{margin-left:83.3333333333%}}\@media (min-width:768px){.col-offset-m-31{margin-left:86.1111111111%}}\@media (min-width:768px){.col-offset-m-32{margin-left:88.8888888889%}}\@media (min-width:768px){.col-offset-m-33{margin-left:91.6666666667%}}\@media (min-width:768px){.col-offset-m-34{margin-left:94.4444444444%}}\@media (min-width:768px){.col-offset-m-35{margin-left:97.2222222222%}}\@media (min-width:768px){.col-offset-m-36{margin-left:100%}}\@media (min-width:768px){.col-offset-right-M-1{margin-right:2.7777777778%}}\@media (min-width:768px){.col-offset-right-M-2{margin-right:5.5555555556%}}\@media (min-width:768px){.col-offset-right-M-3{margin-right:8.3333333333%}}\@media (min-width:768px){.col-offset-right-M-4{margin-right:11.1111111111%}}\@media (min-width:768px){.col-offset-right-M-5{margin-right:13.8888888889%}}\@media (min-width:768px){.col-offset-right-M-6{margin-right:16.6666666667%}}\@media (min-width:768px){.col-offset-right-M-7{margin-right:19.4444444444%}}\@media (min-width:768px){.col-offset-right-M-8{margin-right:22.2222222222%}}\@media (min-width:768px){.col-offset-right-M-9{margin-right:25%}}\@media (min-width:768px){.col-offset-right-M-10{margin-right:27.7777777778%}}\@media (min-width:768px){.col-offset-right-M-11{margin-right:30.5555555556%}}\@media (min-width:768px){.col-offset-right-M-12{margin-right:33.3333333333%}}\@media (min-width:768px){.col-offset-right-M-13{margin-right:36.1111111111%}}\@media (min-width:768px){.col-offset-right-M-14{margin-right:38.8888888889%}}\@media (min-width:768px){.col-offset-right-M-15{margin-right:41.6666666667%}}\@media (min-width:768px){.col-offset-right-M-16{margin-right:44.4444444444%}}\@media (min-width:768px){.col-offset-right-M-17{margin-right:47.2222222222%}}\@media (min-width:768px){.col-offset-right-M-18{margin-right:50%}}\@media (min-width:1024px){.col-l-1{-ms-flex-preferred-size:2.7777777778%;flex-basis:2.7777777778%;width:2.7777777778%;max-width:2.7777777778%}}\@media (min-width:1024px){.col-l-2{-ms-flex-preferred-size:5.5555555556%;flex-basis:5.5555555556%;width:5.5555555556%;max-width:5.5555555556%}}\@media (min-width:1024px){.col-l-3{-ms-flex-preferred-size:8.3333333333%;flex-basis:8.3333333333%;width:8.3333333333%;max-width:8.3333333333%}}\@media (min-width:1024px){.col-l-4{-ms-flex-preferred-size:11.1111111111%;flex-basis:11.1111111111%;width:11.1111111111%;max-width:11.1111111111%}}\@media (min-width:1024px){.col-l-5{-ms-flex-preferred-size:13.8888888889%;flex-basis:13.8888888889%;width:13.8888888889%;max-width:13.8888888889%}}\@media (min-width:1024px){.col-l-6{-ms-flex-preferred-size:16.6666666667%;flex-basis:16.6666666667%;width:16.6666666667%;max-width:16.6666666667%}}\@media (min-width:1024px){.col-l-7{-ms-flex-preferred-size:19.4444444444%;flex-basis:19.4444444444%;width:19.4444444444%;max-width:19.4444444444%}}\@media (min-width:1024px){.col-l-8{-ms-flex-preferred-size:22.2222222222%;flex-basis:22.2222222222%;width:22.2222222222%;max-width:22.2222222222%}}\@media (min-width:1024px){.col-l-9{-ms-flex-preferred-size:25%;flex-basis:25%;width:25%;max-width:25%}}\@media (min-width:1024px){.col-l-10{-ms-flex-preferred-size:27.7777777778%;flex-basis:27.7777777778%;width:27.7777777778%;max-width:27.7777777778%}}\@media (min-width:1024px){.col-l-11{-ms-flex-preferred-size:30.5555555556%;flex-basis:30.5555555556%;width:30.5555555556%;max-width:30.5555555556%}}\@media (min-width:1024px){.col-l-12{-ms-flex-preferred-size:33.3333333333%;flex-basis:33.3333333333%;width:33.3333333333%;max-width:33.3333333333%}}\@media (min-width:1024px){.col-l-13{-ms-flex-preferred-size:36.1111111111%;flex-basis:36.1111111111%;width:36.1111111111%;max-width:36.1111111111%}}\@media (min-width:1024px){.col-l-14{-ms-flex-preferred-size:38.8888888889%;flex-basis:38.8888888889%;width:38.8888888889%;max-width:38.8888888889%}}\@media (min-width:1024px){.col-l-15{-ms-flex-preferred-size:41.6666666667%;flex-basis:41.6666666667%;width:41.6666666667%;max-width:41.6666666667%}}\@media (min-width:1024px){.col-l-16{-ms-flex-preferred-size:44.4444444444%;flex-basis:44.4444444444%;width:44.4444444444%;max-width:44.4444444444%}}\@media (min-width:1024px){.col-l-17{-ms-flex-preferred-size:47.2222222222%;flex-basis:47.2222222222%;width:47.2222222222%;max-width:47.2222222222%}}\@media (min-width:1024px){.col-l-18{-ms-flex-preferred-size:50%;flex-basis:50%;width:50%;max-width:50%}}\@media (min-width:1024px){.col-l-19{-ms-flex-preferred-size:52.7777777778%;flex-basis:52.7777777778%;width:52.7777777778%;max-width:52.7777777778%}}\@media (min-width:1024px){.col-l-20{-ms-flex-preferred-size:55.5555555556%;flex-basis:55.5555555556%;width:55.5555555556%;max-width:55.5555555556%}}\@media (min-width:1024px){.col-l-21{-ms-flex-preferred-size:58.3333333333%;flex-basis:58.3333333333%;width:58.3333333333%;max-width:58.3333333333%}}\@media (min-width:1024px){.col-l-22{-ms-flex-preferred-size:61.1111111111%;flex-basis:61.1111111111%;width:61.1111111111%;max-width:61.1111111111%}}\@media (min-width:1024px){.col-l-23{-ms-flex-preferred-size:63.8888888889%;flex-basis:63.8888888889%;width:63.8888888889%;max-width:63.8888888889%}}\@media (min-width:1024px){.col-l-24{-ms-flex-preferred-size:66.6666666667%;flex-basis:66.6666666667%;width:66.6666666667%;max-width:66.6666666667%}}\@media (min-width:1024px){.col-l-25{-ms-flex-preferred-size:69.4444444444%;flex-basis:69.4444444444%;width:69.4444444444%;max-width:69.4444444444%}}\@media (min-width:1024px){.col-l-26{-ms-flex-preferred-size:72.2222222222%;flex-basis:72.2222222222%;width:72.2222222222%;max-width:72.2222222222%}}\@media (min-width:1024px){.col-l-27{-ms-flex-preferred-size:75%;flex-basis:75%;width:75%;max-width:75%}}\@media (min-width:1024px){.col-l-28{-ms-flex-preferred-size:77.7777777778%;flex-basis:77.7777777778%;width:77.7777777778%;max-width:77.7777777778%}}\@media (min-width:1024px){.col-l-29{-ms-flex-preferred-size:80.5555555556%;flex-basis:80.5555555556%;width:80.5555555556%;max-width:80.5555555556%}}\@media (min-width:1024px){.col-l-30{-ms-flex-preferred-size:83.3333333333%;flex-basis:83.3333333333%;width:83.3333333333%;max-width:83.3333333333%}}\@media (min-width:1024px){.col-l-31{-ms-flex-preferred-size:86.1111111111%;flex-basis:86.1111111111%;width:86.1111111111%;max-width:86.1111111111%}}\@media (min-width:1024px){.col-l-32{-ms-flex-preferred-size:88.8888888889%;flex-basis:88.8888888889%;width:88.8888888889%;max-width:88.8888888889%}}\@media (min-width:1024px){.col-l-33{-ms-flex-preferred-size:91.6666666667%;flex-basis:91.6666666667%;width:91.6666666667%;max-width:91.6666666667%}}\@media (min-width:1024px){.col-l-34{-ms-flex-preferred-size:94.4444444444%;flex-basis:94.4444444444%;width:94.4444444444%;max-width:94.4444444444%}}\@media (min-width:1024px){.col-l-35{-ms-flex-preferred-size:97.2222222222%;flex-basis:97.2222222222%;width:97.2222222222%;max-width:97.2222222222%}}\@media (min-width:1024px){.col-l-36{-ms-flex-preferred-size:100%;flex-basis:100%;width:100%;max-width:100%}}\@media (min-width:1024px){.col-offset-l-0{margin-left:0}}\@media (min-width:1024px){.col-offset-l-1{margin-left:2.7777777778%}}\@media (min-width:1024px){.col-offset-l-2{margin-left:5.5555555556%}}\@media (min-width:1024px){.col-offset-l-3{margin-left:8.3333333333%}}\@media (min-width:1024px){.col-offset-l-4{margin-left:11.1111111111%}}\@media (min-width:1024px){.col-offset-l-5{margin-left:13.8888888889%}}\@media (min-width:1024px){.col-offset-l-6{margin-left:16.6666666667%}}\@media (min-width:1024px){.col-offset-l-7{margin-left:19.4444444444%}}\@media (min-width:1024px){.col-offset-l-8{margin-left:22.2222222222%}}\@media (min-width:1024px){.col-offset-l-9{margin-left:25%}}\@media (min-width:1024px){.col-offset-l-10{margin-left:27.7777777778%}}\@media (min-width:1024px){.col-offset-l-11{margin-left:30.5555555556%}}\@media (min-width:1024px){.col-offset-l-12{margin-left:33.3333333333%}}\@media (min-width:1024px){.col-offset-l-13{margin-left:36.1111111111%}}\@media (min-width:1024px){.col-offset-l-14{margin-left:38.8888888889%}}\@media (min-width:1024px){.col-offset-l-15{margin-left:41.6666666667%}}\@media (min-width:1024px){.col-offset-l-16{margin-left:44.4444444444%}}\@media (min-width:1024px){.col-offset-l-17{margin-left:47.2222222222%}}\@media (min-width:1024px){.col-offset-l-18{margin-left:50%}}\@media (min-width:1024px){.col-offset-l-19{margin-left:52.7777777778%}}\@media (min-width:1024px){.col-offset-l-20{margin-left:55.5555555556%}}\@media (min-width:1024px){.col-offset-l-21{margin-left:58.3333333333%}}\@media (min-width:1024px){.col-offset-l-22{margin-left:61.1111111111%}}\@media (min-width:1024px){.col-offset-l-23{margin-left:63.8888888889%}}\@media (min-width:1024px){.col-offset-l-24{margin-left:66.6666666667%}}\@media (min-width:1024px){.col-offset-l-25{margin-left:69.4444444444%}}\@media (min-width:1024px){.col-offset-l-26{margin-left:72.2222222222%}}\@media (min-width:1024px){.col-offset-l-27{margin-left:75%}}\@media (min-width:1024px){.col-offset-l-28{margin-left:77.7777777778%}}\@media (min-width:1024px){.col-offset-l-29{margin-left:80.5555555556%}}\@media (min-width:1024px){.col-offset-l-30{margin-left:83.3333333333%}}\@media (min-width:1024px){.col-offset-l-31{margin-left:86.1111111111%}}\@media (min-width:1024px){.col-offset-l-32{margin-left:88.8888888889%}}\@media (min-width:1024px){.col-offset-l-33{margin-left:91.6666666667%}}\@media (min-width:1024px){.col-offset-l-34{margin-left:94.4444444444%}}\@media (min-width:1024px){.col-offset-l-35{margin-left:97.2222222222%}}\@media (min-width:1024px){.col-offset-l-36{margin-left:100%}}\@media (min-width:1024px){.col-offset-right-L-1{margin-right:2.7777777778%}}\@media (min-width:1024px){.col-offset-right-L-2{margin-right:5.5555555556%}}\@media (min-width:1024px){.col-offset-right-L-3{margin-right:8.3333333333%}}\@media (min-width:1024px){.col-offset-right-L-4{margin-right:11.1111111111%}}\@media (min-width:1024px){.col-offset-right-L-5{margin-right:13.8888888889%}}\@media (min-width:1024px){.col-offset-right-L-6{margin-right:16.6666666667%}}\@media (min-width:1024px){.col-offset-right-L-7{margin-right:19.4444444444%}}\@media (min-width:1024px){.col-offset-right-L-8{margin-right:22.2222222222%}}\@media (min-width:1024px){.col-offset-right-L-9{margin-right:25%}}\@media (min-width:1024px){.col-offset-right-L-10{margin-right:27.7777777778%}}\@media (min-width:1024px){.col-offset-right-L-11{margin-right:30.5555555556%}}\@media (min-width:1024px){.col-offset-right-L-12{margin-right:33.3333333333%}}\@media (min-width:1024px){.col-offset-right-L-13{margin-right:36.1111111111%}}\@media (min-width:1024px){.col-offset-right-L-14{margin-right:38.8888888889%}}\@media (min-width:1024px){.col-offset-right-L-15{margin-right:41.6666666667%}}\@media (min-width:1024px){.col-offset-right-L-16{margin-right:44.4444444444%}}\@media (min-width:1024px){.col-offset-right-L-17{margin-right:47.2222222222%}}\@media (min-width:1024px){.col-offset-right-L-18{margin-right:50%}}\@media (min-width:1440px){.col-xl-1{-ms-flex-preferred-size:2.7777777778%;flex-basis:2.7777777778%;width:2.7777777778%;max-width:2.7777777778%}}\@media (min-width:1440px){.col-xl-2{-ms-flex-preferred-size:5.5555555556%;flex-basis:5.5555555556%;width:5.5555555556%;max-width:5.5555555556%}}\@media (min-width:1440px){.col-xl-3{-ms-flex-preferred-size:8.3333333333%;flex-basis:8.3333333333%;width:8.3333333333%;max-width:8.3333333333%}}\@media (min-width:1440px){.col-xl-4{-ms-flex-preferred-size:11.1111111111%;flex-basis:11.1111111111%;width:11.1111111111%;max-width:11.1111111111%}}\@media (min-width:1440px){.col-xl-5{-ms-flex-preferred-size:13.8888888889%;flex-basis:13.8888888889%;width:13.8888888889%;max-width:13.8888888889%}}\@media (min-width:1440px){.col-xl-6{-ms-flex-preferred-size:16.6666666667%;flex-basis:16.6666666667%;width:16.6666666667%;max-width:16.6666666667%}}\@media (min-width:1440px){.col-xl-7{-ms-flex-preferred-size:19.4444444444%;flex-basis:19.4444444444%;width:19.4444444444%;max-width:19.4444444444%}}\@media (min-width:1440px){.col-xl-8{-ms-flex-preferred-size:22.2222222222%;flex-basis:22.2222222222%;width:22.2222222222%;max-width:22.2222222222%}}\@media (min-width:1440px){.col-xl-9{-ms-flex-preferred-size:25%;flex-basis:25%;width:25%;max-width:25%}}\@media (min-width:1440px){.col-xl-10{-ms-flex-preferred-size:27.7777777778%;flex-basis:27.7777777778%;width:27.7777777778%;max-width:27.7777777778%}}\@media (min-width:1440px){.col-xl-11{-ms-flex-preferred-size:30.5555555556%;flex-basis:30.5555555556%;width:30.5555555556%;max-width:30.5555555556%}}\@media (min-width:1440px){.col-xl-12{-ms-flex-preferred-size:33.3333333333%;flex-basis:33.3333333333%;width:33.3333333333%;max-width:33.3333333333%}}\@media (min-width:1440px){.col-xl-13{-ms-flex-preferred-size:36.1111111111%;flex-basis:36.1111111111%;width:36.1111111111%;max-width:36.1111111111%}}\@media (min-width:1440px){.col-xl-14{-ms-flex-preferred-size:38.8888888889%;flex-basis:38.8888888889%;width:38.8888888889%;max-width:38.8888888889%}}\@media (min-width:1440px){.col-xl-15{-ms-flex-preferred-size:41.6666666667%;flex-basis:41.6666666667%;width:41.6666666667%;max-width:41.6666666667%}}\@media (min-width:1440px){.col-xl-16{-ms-flex-preferred-size:44.4444444444%;flex-basis:44.4444444444%;width:44.4444444444%;max-width:44.4444444444%}}\@media (min-width:1440px){.col-xl-17{-ms-flex-preferred-size:47.2222222222%;flex-basis:47.2222222222%;width:47.2222222222%;max-width:47.2222222222%}}\@media (min-width:1440px){.col-xl-18{-ms-flex-preferred-size:50%;flex-basis:50%;width:50%;max-width:50%}}\@media (min-width:1440px){.col-xl-19{-ms-flex-preferred-size:52.7777777778%;flex-basis:52.7777777778%;width:52.7777777778%;max-width:52.7777777778%}}\@media (min-width:1440px){.col-xl-20{-ms-flex-preferred-size:55.5555555556%;flex-basis:55.5555555556%;width:55.5555555556%;max-width:55.5555555556%}}\@media (min-width:1440px){.col-xl-21{-ms-flex-preferred-size:58.3333333333%;flex-basis:58.3333333333%;width:58.3333333333%;max-width:58.3333333333%}}\@media (min-width:1440px){.col-xl-22{-ms-flex-preferred-size:61.1111111111%;flex-basis:61.1111111111%;width:61.1111111111%;max-width:61.1111111111%}}\@media (min-width:1440px){.col-xl-23{-ms-flex-preferred-size:63.8888888889%;flex-basis:63.8888888889%;width:63.8888888889%;max-width:63.8888888889%}}\@media (min-width:1440px){.col-xl-24{-ms-flex-preferred-size:66.6666666667%;flex-basis:66.6666666667%;width:66.6666666667%;max-width:66.6666666667%}}\@media (min-width:1440px){.col-xl-25{-ms-flex-preferred-size:69.4444444444%;flex-basis:69.4444444444%;width:69.4444444444%;max-width:69.4444444444%}}\@media (min-width:1440px){.col-xl-26{-ms-flex-preferred-size:72.2222222222%;flex-basis:72.2222222222%;width:72.2222222222%;max-width:72.2222222222%}}\@media (min-width:1440px){.col-xl-27{-ms-flex-preferred-size:75%;flex-basis:75%;width:75%;max-width:75%}}\@media (min-width:1440px){.col-xl-28{-ms-flex-preferred-size:77.7777777778%;flex-basis:77.7777777778%;width:77.7777777778%;max-width:77.7777777778%}}\@media (min-width:1440px){.col-xl-29{-ms-flex-preferred-size:80.5555555556%;flex-basis:80.5555555556%;width:80.5555555556%;max-width:80.5555555556%}}\@media (min-width:1440px){.col-xl-30{-ms-flex-preferred-size:83.3333333333%;flex-basis:83.3333333333%;width:83.3333333333%;max-width:83.3333333333%}}\@media (min-width:1440px){.col-xl-31{-ms-flex-preferred-size:86.1111111111%;flex-basis:86.1111111111%;width:86.1111111111%;max-width:86.1111111111%}}\@media (min-width:1440px){.col-xl-32{-ms-flex-preferred-size:88.8888888889%;flex-basis:88.8888888889%;width:88.8888888889%;max-width:88.8888888889%}}\@media (min-width:1440px){.col-xl-33{-ms-flex-preferred-size:91.6666666667%;flex-basis:91.6666666667%;width:91.6666666667%;max-width:91.6666666667%}}\@media (min-width:1440px){.col-xl-34{-ms-flex-preferred-size:94.4444444444%;flex-basis:94.4444444444%;width:94.4444444444%;max-width:94.4444444444%}}\@media (min-width:1440px){.col-xl-35{-ms-flex-preferred-size:97.2222222222%;flex-basis:97.2222222222%;width:97.2222222222%;max-width:97.2222222222%}}\@media (min-width:1440px){.col-xl-36{-ms-flex-preferred-size:100%;flex-basis:100%;width:100%;max-width:100%}}\@media (min-width:1440px){.col-offset-xl-0{margin-left:0}}\@media (min-width:1440px){.col-offset-xl-1{margin-left:2.7777777778%}}\@media (min-width:1440px){.col-offset-xl-2{margin-left:5.5555555556%}}\@media (min-width:1440px){.col-offset-xl-3{margin-left:8.3333333333%}}\@media (min-width:1440px){.col-offset-xl-4{margin-left:11.1111111111%}}\@media (min-width:1440px){.col-offset-xl-5{margin-left:13.8888888889%}}\@media (min-width:1440px){.col-offset-xl-6{margin-left:16.6666666667%}}\@media (min-width:1440px){.col-offset-xl-7{margin-left:19.4444444444%}}\@media (min-width:1440px){.col-offset-xl-8{margin-left:22.2222222222%}}\@media (min-width:1440px){.col-offset-xl-9{margin-left:25%}}\@media (min-width:1440px){.col-offset-xl-10{margin-left:27.7777777778%}}\@media (min-width:1440px){.col-offset-xl-11{margin-left:30.5555555556%}}\@media (min-width:1440px){.col-offset-xl-12{margin-left:33.3333333333%}}\@media (min-width:1440px){.col-offset-xl-13{margin-left:36.1111111111%}}\@media (min-width:1440px){.col-offset-xl-14{margin-left:38.8888888889%}}\@media (min-width:1440px){.col-offset-xl-15{margin-left:41.6666666667%}}\@media (min-width:1440px){.col-offset-xl-16{margin-left:44.4444444444%}}\@media (min-width:1440px){.col-offset-xl-17{margin-left:47.2222222222%}}\@media (min-width:1440px){.col-offset-xl-18{margin-left:50%}}\@media (min-width:1440px){.col-offset-xl-19{margin-left:52.7777777778%}}\@media (min-width:1440px){.col-offset-xl-20{margin-left:55.5555555556%}}\@media (min-width:1440px){.col-offset-xl-21{margin-left:58.3333333333%}}\@media (min-width:1440px){.col-offset-xl-22{margin-left:61.1111111111%}}\@media (min-width:1440px){.col-offset-xl-23{margin-left:63.8888888889%}}\@media (min-width:1440px){.col-offset-xl-24{margin-left:66.6666666667%}}\@media (min-width:1440px){.col-offset-xl-25{margin-left:69.4444444444%}}\@media (min-width:1440px){.col-offset-xl-26{margin-left:72.2222222222%}}\@media (min-width:1440px){.col-offset-xl-27{margin-left:75%}}\@media (min-width:1440px){.col-offset-xl-28{margin-left:77.7777777778%}}\@media (min-width:1440px){.col-offset-xl-29{margin-left:80.5555555556%}}\@media (min-width:1440px){.col-offset-xl-30{margin-left:83.3333333333%}}\@media (min-width:1440px){.col-offset-xl-31{margin-left:86.1111111111%}}\@media (min-width:1440px){.col-offset-xl-32{margin-left:88.8888888889%}}\@media (min-width:1440px){.col-offset-xl-33{margin-left:91.6666666667%}}\@media (min-width:1440px){.col-offset-xl-34{margin-left:94.4444444444%}}\@media (min-width:1440px){.col-offset-xl-35{margin-left:97.2222222222%}}\@media (min-width:1440px){.col-offset-xl-36{margin-left:100%}}\@media (min-width:1440px){.col-offset-right-XL-1{margin-right:2.7777777778%}}\@media (min-width:1440px){.col-offset-right-XL-2{margin-right:5.5555555556%}}\@media (min-width:1440px){.col-offset-right-XL-3{margin-right:8.3333333333%}}\@media (min-width:1440px){.col-offset-right-XL-4{margin-right:11.1111111111%}}\@media (min-width:1440px){.col-offset-right-XL-5{margin-right:13.8888888889%}}\@media (min-width:1440px){.col-offset-right-XL-6{margin-right:16.6666666667%}}\@media (min-width:1440px){.col-offset-right-XL-7{margin-right:19.4444444444%}}\@media (min-width:1440px){.col-offset-right-XL-8{margin-right:22.2222222222%}}\@media (min-width:1440px){.col-offset-right-XL-9{margin-right:25%}}\@media (min-width:1440px){.col-offset-right-XL-10{margin-right:27.7777777778%}}\@media (min-width:1440px){.col-offset-right-XL-11{margin-right:30.5555555556%}}\@media (min-width:1440px){.col-offset-right-XL-12{margin-right:33.3333333333%}}\@media (min-width:1440px){.col-offset-right-XL-13{margin-right:36.1111111111%}}\@media (min-width:1440px){.col-offset-right-XL-14{margin-right:38.8888888889%}}\@media (min-width:1440px){.col-offset-right-XL-15{margin-right:41.6666666667%}}\@media (min-width:1440px){.col-offset-right-XL-16{margin-right:44.4444444444%}}\@media (min-width:1440px){.col-offset-right-XL-17{margin-right:47.2222222222%}}\@media (min-width:1440px){.col-offset-right-XL-18{margin-right:50%}}.grid-col-center{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}"; }
};
const GridContainer = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
render() {
return h(Host, { class: `grid-container` }, h("slot", null));
}
static get style() { return ":global *{vertical-align:baseline;border:0 none;padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}:global a,:global abbr,:global acronym,:global address,:global applet,:global big,:global blockquote,:global body,:global button,:global caption,:global cite,:global code,:global dd,:global del,:global dfn,:global div,:global dl,:global dt,:global em,:global fieldset,:global font,:global form,:global h1,:global h2,:global h3,:global h4,:global h5,:global h6,:global html,:global iframe,:global img,:global ins,:global kbd,:global label,:global legend,:global li,:global object,:global ol,:global p,:global pre,:global q,:global s,:global samp,:global small,:global span,:global strike,:global strong,:global sub,:global sup,:global table,:global tbody,:global td,:global tfoot,:global th,:global thead,:global tr,:global tt,:global ul,:global var{font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;font-weight:inherit;font-style:inherit;vertical-align:inherit;border:0 none;padding:0;margin:0}:global img{width:100%;height:auto;display:block}:global figure{margin:0}:global button{border:none;border-radius:0;background-color:transparent;cursor:pointer}:global [role=button],:global button,:global input[type=button],:global input[type=reset],:global input[type=submit]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}:global button,:global input[type=button],:global input[type=reset],:global input[type=submit]{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-appearance:button;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}:global button::-moz-focus-inner,:global input::-moz-focus-inner{border:0;padding:0}:global strong{font-weight:700}:global li{list-style-type:none}:global a{text-decoration:none;cursor:pointer;line-height:normal}:focus{-webkit-transition-delay:0ms;transition-delay:0ms}:global a,:global em,:global span,:global strong{font-size:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;font-family:inherit}.grid-container{width:100%;margin:0 auto;display:block}"; }
};
const GridGhost = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.generateCols = () => {
const cols = [...Array(COLUMNS.XL)];
return cols.map(() => h("grid-col", { class: `item`, col: 1 }));
};
}
render() {
return h(Host, { class: `grid-ghost` }, h("grid-container", { class: "full-height" }, h("grid-row", { class: "full-height" }, this.generateCols())));
}
static get style() { return ":global *{vertical-align:baseline;border:0 none;padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}:global a,:global abbr,:global acronym,:global address,:global applet,:global big,:global blockquote,:global body,:global button,:global caption,:global cite,:global code,:global dd,:global del,:global dfn,:global div,:global dl,:global dt,:global em,:global fieldset,:global font,:global form,:global h1,:global h2,:global h3,:global h4,:global h5,:global h6,:global html,:global iframe,:global img,:global ins,:global kbd,:global label,:global legend,:global li,:global object,:global ol,:global p,:global pre,:global q,:global s,:global samp,:global small,:global span,:global strike,:global strong,:global sub,:global sup,:global table,:global tbody,:global td,:global tfoot,:global th,:global thead,:global tr,:global tt,:global ul,:global var{font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;font-weight:inherit;font-style:inherit;vertical-align:inherit;border:0 none;padding:0;margin:0}:global img{width:100%;height:auto;display:block}:global figure{margin:0}:global button{border:none;border-radius:0;background-color:transparent;cursor:pointer}:global [role=button],:global button,:global input[type=button],:global input[type=reset],:global input[type=submit]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}:global button,:global input[type=button],:global input[type=reset],:global input[type=submit]{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-appearance:button;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}:global button::-moz-focus-inner,:global input::-moz-focus-inner{border:0;padding:0}:global strong{font-weight:700}:global li{list-style-type:none}:global a{text-decoration:none;cursor:pointer;line-height:normal}:focus{-webkit-transition-delay:0ms;transition-delay:0ms}:global a,:global em,:global span,:global strong{font-size:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;font-family:inherit}.grid-ghost{width:100%;height:100%;display:block;position:fixed;top:0;left:0;pointer-events:none;z-index:9999}.full-height,.item{height:100%}.item:nth-child(odd){background-color:rgba(255,0,0,.1)}.item:nth-child(n+18){display:none}\@media (min-width:420px){.item:nth-child(n+18){display:block}}"; }
};
const GridRow = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
*Justify content
*/
this.justifyContent = '';
/**
* Align Items
*/
this.alignItems = '';
/**
* Is centered
*/
this.isCentered = false;
/**
* Is centered on the x axis
*/
this.isXCentered = false;
/**
* Is centered on the y axis
*/
this.isYCentered = false;
/**
* Is reversed
*/
this.isReversed = false;
}
validateJustifyContent(newValue) {
const classnames = ['initial', 'start', 'end', 'flex-start', 'flex-end', 'baseline', 'left', 'right', 'center', 'safe', 'stretch', 'space-around', 'space-between', 'space-evenly', 'center-only-mobile'];
const justifyContentIsValidate = classnames.indexOf(newValue) > -1;
if (!justifyContentIsValidate && newValue.length) {
console.info('justify-content: not a valid value');
}
}
validateAlignItems(newValue) {
const classnames = ['initial', 'start', 'end', 'flex-start', 'flex-end', 'baseline', 'left', 'right', 'center', 'safe', 'stretch', 'space-around', 'space-between', 'space-evenly'];
const alignItemsIsValidate = classnames.indexOf(newValue) > -1;
if (!alignItemsIsValidate && newValue.length) {
console.info('align-items: not a valid value');
}
}
render() {
const justifyContent = this.justifyContent ? `jc-${this.justifyContent}` : '';
const alignItems = this.alignItems ? `ai-${this.alignItems}` : '';
const isCentered = this.isCentered ? `grid-row-center` : '';
const isXCentered = this.isXCentered ? `x-center` : '';
const isYCentered = this.isYCentered ? `y-center` : '';
const isReverse