[data-component="section"], .section {
  padding-top: var(--section--padding);
  padding-bottom: var(--section--padding);
  background-color: var(--_site-theme---background);
  position: relative;
}

[data-component="container"], .container {
    width: 100%;
    max-width: min((100% - var(--container--gutter) * 2), var(--container--max-width));
    margin-left: auto;
    margin-right: auto;
    display: block;

  [data-slot="container"] {
    flex-flow: column;
    align-items: stretch;
    position: static;
  }

  &[data-variant="full"] {
    max-width: none;
  }
}


[data-component="row"], .row-component, .row {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  grid-row-gap: var(--grid--gap-main);
  margin-left: calc(var(--grid--gap-main) / 2 * -1);
  margin-right: calc(var(--grid--gap-main) / 2 * -1);
}

/* [data-row-align^="top"], default behavior */ 
.row-align-start {align-items: flex-start;}
[data-row-align^="center"], .row-align-center {align-items: center;}
[data-row-align^="bottom"], .row-align-end {align-items: flex-end;}
/*[data-row-align$="left"], default behavior */
.row-justify-start {justify-content: flex-start;}
[data-row-align$="right"], .row-justify-end {justify-content: flex-end;}
[data-row-align$="center"], .row-justify-center {justify-content: center;}
[data-row-align$="between"], .row-justify-between {justify-content: space-between;}

@media screen and (max-width: 991px) {
  [data-row-align-md^="top"], .row-md-align-start { align-items: flex-start; }
  [data-row-align-md^="center"], .row-md-align-center { align-items: center; }
  [data-row-align-md^="bottom"], .row-md-align-end { align-items: flex-end; }
  [data-row-align-md$="left"], .row-md-justify-start { justify-content: flex-start; }
  [data-row-align-md$="right"], .row-md-justify-end { justify-content: flex-end; }
  [data-row-align-md$="center"], .row-md-justify-center { justify-content: center; }
  [data-row-align-md$="between"], .row-md-justify-between { justify-content: space-between; }
}

@media screen and (max-width: 767px) {
  [data-row-align-sm^="top"], .row-sm-align-start { align-items: flex-start; }
  [data-row-align-sm^="center"], .row-sm-align-center { align-items: center; }
  [data-row-align-sm^="bottom"], .row-sm-align-end { align-items: flex-end; }
  [data-row-align-sm$="left"], .row-sm-justify-start { justify-content: flex-start; }
  [data-row-align-sm$="right"], .row-sm-justify-end { justify-content: flex-end; }
  [data-row-align-sm$="center"], .row-sm-justify-center { justify-content: center; }
  [data-row-align-sm$="between"], .row-sm-justify-between { justify-content: space-between; }
}

@media screen and (max-width: 479px) {
  [data-row-align-xs^="top"], .row-xs-align-start { align-items: flex-start; }
  [data-row-align-xs^="center"], .row-xs-align-center { align-items: center; }
  [data-row-align-xs^="bottom"], .row-xs-align-end { align-items: flex-end; }
  [data-row-align-xs$="left"], .row-xs-justify-start { justify-content: flex-start; }
  [data-row-align-xs$="right"], .row-xs-justify-end { justify-content: flex-end; }
  [data-row-align-xs$="center"], .row-xs-justify-center { justify-content: center; }
  [data-row-align-xs$="between"], .row-xs-justify-between { justify-content: space-between; }
}

[data-component="column"], .col {
  padding-left: calc(var(--grid--gap-main) / 2);
  padding-right: calc(var(--grid--gap-main) / 2);
  flex-flow: column;
  flex: 1;
  display: flex;
  position: relative;
  
  &.col-lg-contain-left {
    padding-left: max(calc(var(--container--gutter) + (var(--grid--gap-main) / 2)), calc((100vw - var(--container--max-width)) / 2 + (var(--grid--gap-main) / 2)));
  }
  &.col-lg-contain-right {
    padding-right: max(calc(var(--container--gutter) + (var(--grid--gap-main) / 2)), calc((100vw - var(--container--max-width)) / 2 + (var(--grid--gap-main) / 2)));
  }
}

[data-slot="column"], .slot.cc-column {
  align-items: stretch;
  width: 100%;
  height: 100%;

  > [data-component="eyebrow"], > .eyebrow-component {
    align-self: start;
  }
}

  [data-col="-1"], &.col-shrink { flex: 0 auto; max-width: none; }
  [data-col="0"], &.col-fill { flex: 1; max-width: none; }
  [data-col="1"], &.col-1 { flex-basis: calc(min(100%, 100% / 12 * 1)); max-width: calc(min(100%, 100% / 12 * 1)); }
  [data-col="2"], &.col-2 { flex-basis: calc(min(100%, 100% / 12 * 2)); max-width: calc(min(100%, 100% / 12 * 2)); }
  [data-col="3"], &.col-3 { flex-basis: calc(min(100%, 100% / 12 * 3)); max-width: calc(min(100%, 100% / 12 * 3)); }
  [data-col="4"], &.col-4 { flex-basis: calc(min(100%, 100% / 12 * 4)); max-width: calc(min(100%, 100% / 12 * 4)); }
  [data-col="5"], &.col-5 { flex-basis: calc(min(100%, 100% / 12 * 5)); max-width: calc(min(100%, 100% / 12 * 5)); }
  [data-col="6"], &.col-6 { flex-basis: calc(min(100%, 100% / 12 * 6)); max-width: calc(min(100%, 100% / 12 * 6)); }
  [data-col="7"], &.col-7 { flex-basis: calc(min(100%, 100% / 12 * 7)); max-width: calc(min(100%, 100% / 12 * 7)); }
  [data-col="8"], &.col-8 { flex-basis: calc(min(100%, 100% / 12 * 8)); max-width: calc(min(100%, 100% / 12 * 8)); }
  [data-col="9"], &.col-9 { flex-basis: calc(min(100%, 100% / 12 * 9)); max-width: calc(min(100%, 100% / 12 * 9)); }
  [data-col="10"], &.col-10 { flex-basis: calc(min(100%, 100% / 12 * 10)); max-width: calc(min(100%, 100% / 12 * 10)); }
  [data-col="11"], &.col-11 { flex-basis: calc(min(100%, 100% / 12 * 11)); max-width: calc(min(100%, 100% / 12 * 11)); }
  [data-col="12"], &.col-12 { flex-basis: calc(min(100%, 100% / 12 * 12)); max-width: calc(min(100%, 100% / 12 * 12)); }

@media screen and (max-width: 991px) {
  [data-col-md="-1"], .col-md-shrink { flex: 0 auto; max-width: none; }
  [data-col-md="0"], .col-md-fill { flex: 1; max-width: none; }
  [data-col-md="1"], .col-md-1 { flex-basis: calc(min(100%, 100% / 12 * 1)); max-width: calc(min(100%, 100% / 12 * 1)); }
  [data-col-md="2"], .col-md-2 { flex-basis: calc(min(100%, 100% / 12 * 2)); max-width: calc(min(100%, 100% / 12 * 2)); }
  [data-col-md="3"], .col-md-3 { flex-basis: calc(min(100%, 100% / 12 * 3)); max-width: calc(min(100%, 100% / 12 * 3)); }
  [data-col-md="4"], .col-md-4 { flex-basis: calc(min(100%, 100% / 12 * 4)); max-width: calc(min(100%, 100% / 12 * 4)); }
  [data-col-md="5"], .col-md-5 { flex-basis: calc(min(100%, 100% / 12 * 5)); max-width: calc(min(100%, 100% / 12 * 5)); }
  [data-col-md="6"], .col-md-6 { flex-basis: calc(min(100%, 100% / 12 * 6)); max-width: calc(min(100%, 100% / 12 * 6)); }
  [data-col-md="7"], .col-md-7 { flex-basis: calc(min(100%, 100% / 12 * 7)); max-width: calc(min(100%, 100% / 12 * 7)); }
  [data-col-md="8"], .col-md-8 { flex-basis: calc(min(100%, 100% / 12 * 8)); max-width: calc(min(100%, 100% / 12 * 8)); }
  [data-col-md="9"], .col-md-9 { flex-basis: calc(min(100%, 100% / 12 * 9)); max-width: calc(min(100%, 100% / 12 * 9)); }
  [data-col-md="10"], .col-md-10 { flex-basis: calc(min(100%, 100% / 12 * 10)); max-width: calc(min(100%, 100% / 12 * 10)); }
  [data-col-md="11"], .col-md-11 { flex-basis: calc(min(100%, 100% / 12 * 11)); max-width: calc(min(100%, 100% / 12 * 11)); }
  [data-col-md="12"], .col-md-12 { flex-basis: calc(min(100%, 100% / 12 * 12)); max-width: calc(min(100%, 100% / 12 * 12)); }
}

@media screen and (max-width: 767px) {
    /* One column on small by default */
  [data-col], .col { flex-basis: calc(min(100%, 100% / 12 * 12)); max-width: calc(min(100%, 100% / 12 * 12)); }
  [data-col-sm="-1"], .col-sm-shrink { flex: 0 auto; max-width: none; }
  [data-col-sm="0"], .col-sm-fill { flex: 1; max-width: none; }
  [data-col-sm="1"], .col-sm-1 { flex-basis: calc(min(100%, 100% / 12 * 1)); max-width: calc(min(100%, 100% / 12 * 1)); }
  [data-col-sm="2"], .col-sm-2 { flex-basis: calc(min(100%, 100% / 12 * 2)); max-width: calc(min(100%, 100% / 12 * 2)); }
  [data-col-sm="3"], .col-sm-3 { flex-basis: calc(min(100%, 100% / 12 * 3)); max-width: calc(min(100%, 100% / 12 * 3)); }
  [data-col-sm="4"], .col-sm-4 { flex-basis: calc(min(100%, 100% / 12 * 4)); max-width: calc(min(100%, 100% / 12 * 4)); }
  [data-col-sm="5"], .col-sm-5 { flex-basis: calc(min(100%, 100% / 12 * 5)); max-width: calc(min(100%, 100% / 12 * 5)); }
  [data-col-sm="6"], .col-sm-6 { flex-basis: calc(min(100%, 100% / 12 * 6)); max-width: calc(min(100%, 100% / 12 * 6)); }
  [data-col-sm="7"], .col-sm-7 { flex-basis: calc(min(100%, 100% / 12 * 7)); max-width: calc(min(100%, 100% / 12 * 7)); }
  [data-col-sm="8"], .col-sm-8 { flex-basis: calc(min(100%, 100% / 12 * 8)); max-width: calc(min(100%, 100% / 12 * 8)); }
  [data-col-sm="9"], .col-sm-9 { flex-basis: calc(min(100%, 100% / 12 * 9)); max-width: calc(min(100%, 100% / 12 * 9)); }
  [data-col-sm="10"], .col-sm-10 { flex-basis: calc(min(100%, 100% / 12 * 10)); max-width: calc(min(100%, 100% / 12 * 10)); }
  [data-col-sm="11"], .col-sm-11 { flex-basis: calc(min(100%, 100% / 12 * 11)); max-width: calc(min(100%, 100% / 12 * 11)); }
  [data-col-sm="12"], .col-sm-12 { flex-basis: calc(min(100%, 100% / 12 * 12)); max-width: calc(min(100%, 100% / 12 * 12)); }
}

@media screen and (max-width: 479px) {
  [data-col-xs="-1"], .col-xs-shrink { flex: 0 auto; max-width: none; }
  [data-col-xs="0"], .col-xs-fill { flex: 1; max-width: none; }
  [data-col-xs="1"], .col-xs-1 { flex-basis: calc(min(100%, 100% / 12 * 1)); max-width: calc(min(100%, 100% / 12 * 1)); }
  [data-col-xs="2"], .col-xs-2 { flex-basis: calc(min(100%, 100% / 12 * 2)); max-width: calc(min(100%, 100% / 12 * 2)); }
  [data-col-xs="3"], .col-xs-3 { flex-basis: calc(min(100%, 100% / 12 * 3)); max-width: calc(min(100%, 100% / 12 * 3)); }
  [data-col-xs="4"], .col-xs-4 { flex-basis: calc(min(100%, 100% / 12 * 4)); max-width: calc(min(100%, 100% / 12 * 4)); }
  [data-col-xs="5"], .col-xs-5 { flex-basis: calc(min(100%, 100% / 12 * 5)); max-width: calc(min(100%, 100% / 12 * 5)); }
  [data-col-xs="6"], .col-xs-6 { flex-basis: calc(min(100%, 100% / 12 * 6)); max-width: calc(min(100%, 100% / 12 * 6)); }
  [data-col-xs="7"], .col-xs-7 { flex-basis: calc(min(100%, 100% / 12 * 7)); max-width: calc(min(100%, 100% / 12 * 7)); }
  [data-col-xs="8"], .col-xs-8 { flex-basis: calc(min(100%, 100% / 12 * 8)); max-width: calc(min(100%, 100% / 12 * 8)); }
  [data-col-xs="9"], .col-xs-9 { flex-basis: calc(min(100%, 100% / 12 * 9)); max-width: calc(min(100%, 100% / 12 * 9)); }
  [data-col-xs="10"], .col-xs-10 { flex-basis: calc(min(100%, 100% / 12 * 10)); max-width: calc(min(100%, 100% / 12 * 10)); }
  [data-col-xs="11"], .col-xs-11 { flex-basis: calc(min(100%, 100% / 12 * 11)); max-width: calc(min(100%, 100% / 12 * 11)); }
  [data-col-xs="12"], .col-xs-12 { flex-basis: calc(min(100%, 100% / 12 * 12)); max-width: calc(min(100%, 100% / 12 * 12)); }
}