@heycar-uikit/core/grid/components/col.css

The React UI library from HeyCar

:root {
  /* heycar mint color */

  /* mica blue color */

  /* sunbeam blue color */

  /* mustang yellow color */

  /* old ferrari red color */

  /* -- fantasy name of "green" color to be defined -- */

  /* -- fantasy name of "whatsapp" color to be defined -- */

  /* -- fantasy name of "red" color to be defined -- */

  /* tarmac grey color */
  --color-tarmac-grey-700: #303030;

  /* brand colors */
}
/* Depricated. Do Not Use */
:root {
  /* Font families */

  /* Font weights */
}
/*
  Heading
*/
/*
  Sub-Heading
*/
/*
  Body
*/
/*
  Caption
*/
/*
  Overline
*/
/*
  Button
*/
/*
  Button Old - DO NOT USE
*/
/* If this is ever changed please update breakpoints.json as well */
/* Mobile */
/* Tablet */
/* Desktop */
/* Default theme (light) */
:root {
  /*
    Colors
  */
  --color-neutral-700: var(--color-tarmac-grey-700);

  /*
    Sizes
  */
}
body {
  color: var(--color-neutral-700);
}
:root {
  --grid-col-width: calc(100% / 12);
  margin: 0 auto;
}
.grid__component_1wxmi {
  max-width: 100%;
  min-height: 1px;
  flex-basis: 0;
  flex-grow: 1;
  box-sizing: border-box;
}
.grid__width-auto_1wxmi {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.grid__width-available_1wxmi {
  flex-basis: auto;
  min-height: auto;
  height: auto;
}
.grid__width-1_1wxmi {
    flex: 0 0 calc(var(--grid-col-width) * 1);
    max-width: calc(var(--grid-col-width) * 1);
  }
.grid__width-2_1wxmi {
    flex: 0 0 calc(var(--grid-col-width) * 2);
    max-width: calc(var(--grid-col-width) * 2);
  }
.grid__width-3_1wxmi {
    flex: 0 0 calc(var(--grid-col-width) * 3);
    max-width: calc(var(--grid-col-width) * 3);
  }
.grid__width-4_1wxmi {
    flex: 0 0 calc(var(--grid-col-width) * 4);
    max-width: calc(var(--grid-col-width) * 4);
  }
.grid__width-5_1wxmi {
    flex: 0 0 calc(var(--grid-col-width) * 5);
    max-width: calc(var(--grid-col-width) * 5);
  }
.grid__width-6_1wxmi {
    flex: 0 0 calc(var(--grid-col-width) * 6);
    max-width: calc(var(--grid-col-width) * 6);
  }
.grid__width-7_1wxmi {
    flex: 0 0 calc(var(--grid-col-width) * 7);
    max-width: calc(var(--grid-col-width) * 7);
  }
.grid__width-8_1wxmi {
    flex: 0 0 calc(var(--grid-col-width) * 8);
    max-width: calc(var(--grid-col-width) * 8);
  }
.grid__width-9_1wxmi {
    flex: 0 0 calc(var(--grid-col-width) * 9);
    max-width: calc(var(--grid-col-width) * 9);
  }
.grid__width-10_1wxmi {
    flex: 0 0 calc(var(--grid-col-width) * 10);
    max-width: calc(var(--grid-col-width) * 10);
  }
.grid__width-11_1wxmi {
    flex: 0 0 calc(var(--grid-col-width) * 11);
    max-width: calc(var(--grid-col-width) * 11);
  }
.grid__width-12_1wxmi {
    flex: 0 0 calc(var(--grid-col-width) * 12);
    max-width: calc(var(--grid-col-width) * 12);
  }
.grid__align-top_1wxmi {
  align-self: flex-start;
}
.grid__align-middle_1wxmi {
  align-self: center;
}
.grid__align-bottom_1wxmi {
  align-self: flex-end;
}
.grid__offset-1_1wxmi {
    margin-left: calc(var(--grid-col-width) * 1);
  }
.grid__offset-2_1wxmi {
    margin-left: calc(var(--grid-col-width) * 2);
  }
.grid__offset-3_1wxmi {
    margin-left: calc(var(--grid-col-width) * 3);
  }
.grid__offset-4_1wxmi {
    margin-left: calc(var(--grid-col-width) * 4);
  }
.grid__offset-5_1wxmi {
    margin-left: calc(var(--grid-col-width) * 5);
  }
.grid__offset-6_1wxmi {
    margin-left: calc(var(--grid-col-width) * 6);
  }
.grid__offset-7_1wxmi {
    margin-left: calc(var(--grid-col-width) * 7);
  }
.grid__offset-8_1wxmi {
    margin-left: calc(var(--grid-col-width) * 8);
  }
.grid__offset-9_1wxmi {
    margin-left: calc(var(--grid-col-width) * 9);
  }
.grid__offset-10_1wxmi {
    margin-left: calc(var(--grid-col-width) * 10);
  }
.grid__offset-11_1wxmi {
    margin-left: calc(var(--grid-col-width) * 11);
  }
.grid__order-first_1wxmi {
  order: -1;
}
.grid__order-last_1wxmi {
  order: 13;
}
.grid__order-1_1wxmi {
    order: 1;
  }
.grid__order-2_1wxmi {
    order: 2;
  }
.grid__order-3_1wxmi {
    order: 3;
  }
.grid__order-4_1wxmi {
    order: 4;
  }
.grid__order-5_1wxmi {
    order: 5;
  }
.grid__order-6_1wxmi {
    order: 6;
  }
.grid__order-7_1wxmi {
    order: 7;
  }
.grid__order-8_1wxmi {
    order: 8;
  }
.grid__order-9_1wxmi {
    order: 9;
  }
.grid__order-10_1wxmi {
    order: 10;
  }
.grid__order-11_1wxmi {
    order: 11;
  }
.grid__order-12_1wxmi {
    order: 12;
  }
@media (max-width: 767px) {
    .grid__width-mobile-auto_1wxmi {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }

    .grid__width-mobile-available_1wxmi {
      flex-basis: auto;
      min-height: auto;
      height: auto;
    }
      .grid__width-mobile-1_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 1);
        max-width: calc(var(--grid-col-width) * 1);
      }
      .grid__width-mobile-2_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 2);
        max-width: calc(var(--grid-col-width) * 2);
      }
      .grid__width-mobile-3_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 3);
        max-width: calc(var(--grid-col-width) * 3);
      }
      .grid__width-mobile-4_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 4);
        max-width: calc(var(--grid-col-width) * 4);
      }
      .grid__width-mobile-5_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 5);
        max-width: calc(var(--grid-col-width) * 5);
      }
      .grid__width-mobile-6_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 6);
        max-width: calc(var(--grid-col-width) * 6);
      }
      .grid__width-mobile-7_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 7);
        max-width: calc(var(--grid-col-width) * 7);
      }
      .grid__width-mobile-8_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 8);
        max-width: calc(var(--grid-col-width) * 8);
      }
      .grid__width-mobile-9_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 9);
        max-width: calc(var(--grid-col-width) * 9);
      }
      .grid__width-mobile-10_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 10);
        max-width: calc(var(--grid-col-width) * 10);
      }
      .grid__width-mobile-11_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 11);
        max-width: calc(var(--grid-col-width) * 11);
      }
      .grid__width-mobile-12_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 12);
        max-width: calc(var(--grid-col-width) * 12);
      }
      .grid__offset-mobile-1_1wxmi {
        margin-left: calc(var(--grid-col-width) * 1);
      }
      .grid__offset-mobile-2_1wxmi {
        margin-left: calc(var(--grid-col-width) * 2);
      }
      .grid__offset-mobile-3_1wxmi {
        margin-left: calc(var(--grid-col-width) * 3);
      }
      .grid__offset-mobile-4_1wxmi {
        margin-left: calc(var(--grid-col-width) * 4);
      }
      .grid__offset-mobile-5_1wxmi {
        margin-left: calc(var(--grid-col-width) * 5);
      }
      .grid__offset-mobile-6_1wxmi {
        margin-left: calc(var(--grid-col-width) * 6);
      }
      .grid__offset-mobile-7_1wxmi {
        margin-left: calc(var(--grid-col-width) * 7);
      }
      .grid__offset-mobile-8_1wxmi {
        margin-left: calc(var(--grid-col-width) * 8);
      }
      .grid__offset-mobile-9_1wxmi {
        margin-left: calc(var(--grid-col-width) * 9);
      }
      .grid__offset-mobile-10_1wxmi {
        margin-left: calc(var(--grid-col-width) * 10);
      }
      .grid__offset-mobile-11_1wxmi {
        margin-left: calc(var(--grid-col-width) * 11);
      }

    .grid__order-mobile-first_1wxmi {
      order: -1;
    }

    .grid__order-mobile-last_1wxmi {
      order: 13;
    }
      .grid__order-mobile-1_1wxmi {
        order: 1;
      }
      .grid__order-mobile-2_1wxmi {
        order: 2;
      }
      .grid__order-mobile-3_1wxmi {
        order: 3;
      }
      .grid__order-mobile-4_1wxmi {
        order: 4;
      }
      .grid__order-mobile-5_1wxmi {
        order: 5;
      }
      .grid__order-mobile-6_1wxmi {
        order: 6;
      }
      .grid__order-mobile-7_1wxmi {
        order: 7;
      }
      .grid__order-mobile-8_1wxmi {
        order: 8;
      }
      .grid__order-mobile-9_1wxmi {
        order: 9;
      }
      .grid__order-mobile-10_1wxmi {
        order: 10;
      }
      .grid__order-mobile-11_1wxmi {
        order: 11;
      }
      .grid__order-mobile-12_1wxmi {
        order: 12;
      }
  }
@media (min-width: 768px) {
    .grid__width-tablet-auto_1wxmi {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }

    .grid__width-tablet-available_1wxmi {
      flex-basis: auto;
      min-height: auto;
      height: auto;
    }
      .grid__width-tablet-1_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 1);
        max-width: calc(var(--grid-col-width) * 1);
      }
      .grid__width-tablet-2_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 2);
        max-width: calc(var(--grid-col-width) * 2);
      }
      .grid__width-tablet-3_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 3);
        max-width: calc(var(--grid-col-width) * 3);
      }
      .grid__width-tablet-4_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 4);
        max-width: calc(var(--grid-col-width) * 4);
      }
      .grid__width-tablet-5_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 5);
        max-width: calc(var(--grid-col-width) * 5);
      }
      .grid__width-tablet-6_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 6);
        max-width: calc(var(--grid-col-width) * 6);
      }
      .grid__width-tablet-7_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 7);
        max-width: calc(var(--grid-col-width) * 7);
      }
      .grid__width-tablet-8_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 8);
        max-width: calc(var(--grid-col-width) * 8);
      }
      .grid__width-tablet-9_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 9);
        max-width: calc(var(--grid-col-width) * 9);
      }
      .grid__width-tablet-10_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 10);
        max-width: calc(var(--grid-col-width) * 10);
      }
      .grid__width-tablet-11_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 11);
        max-width: calc(var(--grid-col-width) * 11);
      }
      .grid__width-tablet-12_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 12);
        max-width: calc(var(--grid-col-width) * 12);
      }
      .grid__offset-tablet-1_1wxmi {
        margin-left: calc(var(--grid-col-width) * 1);
      }
      .grid__offset-tablet-2_1wxmi {
        margin-left: calc(var(--grid-col-width) * 2);
      }
      .grid__offset-tablet-3_1wxmi {
        margin-left: calc(var(--grid-col-width) * 3);
      }
      .grid__offset-tablet-4_1wxmi {
        margin-left: calc(var(--grid-col-width) * 4);
      }
      .grid__offset-tablet-5_1wxmi {
        margin-left: calc(var(--grid-col-width) * 5);
      }
      .grid__offset-tablet-6_1wxmi {
        margin-left: calc(var(--grid-col-width) * 6);
      }
      .grid__offset-tablet-7_1wxmi {
        margin-left: calc(var(--grid-col-width) * 7);
      }
      .grid__offset-tablet-8_1wxmi {
        margin-left: calc(var(--grid-col-width) * 8);
      }
      .grid__offset-tablet-9_1wxmi {
        margin-left: calc(var(--grid-col-width) * 9);
      }
      .grid__offset-tablet-10_1wxmi {
        margin-left: calc(var(--grid-col-width) * 10);
      }
      .grid__offset-tablet-11_1wxmi {
        margin-left: calc(var(--grid-col-width) * 11);
      }

    .grid__order-tablet-first_1wxmi {
      order: -1;
    }

    .grid__order-tablet-last_1wxmi {
      order: 13;
    }
      .grid__order-tablet-1_1wxmi {
        order: 1;
      }
      .grid__order-tablet-2_1wxmi {
        order: 2;
      }
      .grid__order-tablet-3_1wxmi {
        order: 3;
      }
      .grid__order-tablet-4_1wxmi {
        order: 4;
      }
      .grid__order-tablet-5_1wxmi {
        order: 5;
      }
      .grid__order-tablet-6_1wxmi {
        order: 6;
      }
      .grid__order-tablet-7_1wxmi {
        order: 7;
      }
      .grid__order-tablet-8_1wxmi {
        order: 8;
      }
      .grid__order-tablet-9_1wxmi {
        order: 9;
      }
      .grid__order-tablet-10_1wxmi {
        order: 10;
      }
      .grid__order-tablet-11_1wxmi {
        order: 11;
      }
      .grid__order-tablet-12_1wxmi {
        order: 12;
      }
  }
@media (min-width: 768px) {
    .grid__width-tablet-s-auto_1wxmi {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }

    .grid__width-tablet-s-available_1wxmi {
      flex-basis: auto;
      min-height: auto;
      height: auto;
    }
      .grid__width-tablet-s-1_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 1);
        max-width: calc(var(--grid-col-width) * 1);
      }
      .grid__width-tablet-s-2_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 2);
        max-width: calc(var(--grid-col-width) * 2);
      }
      .grid__width-tablet-s-3_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 3);
        max-width: calc(var(--grid-col-width) * 3);
      }
      .grid__width-tablet-s-4_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 4);
        max-width: calc(var(--grid-col-width) * 4);
      }
      .grid__width-tablet-s-5_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 5);
        max-width: calc(var(--grid-col-width) * 5);
      }
      .grid__width-tablet-s-6_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 6);
        max-width: calc(var(--grid-col-width) * 6);
      }
      .grid__width-tablet-s-7_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 7);
        max-width: calc(var(--grid-col-width) * 7);
      }
      .grid__width-tablet-s-8_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 8);
        max-width: calc(var(--grid-col-width) * 8);
      }
      .grid__width-tablet-s-9_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 9);
        max-width: calc(var(--grid-col-width) * 9);
      }
      .grid__width-tablet-s-10_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 10);
        max-width: calc(var(--grid-col-width) * 10);
      }
      .grid__width-tablet-s-11_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 11);
        max-width: calc(var(--grid-col-width) * 11);
      }
      .grid__width-tablet-s-12_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 12);
        max-width: calc(var(--grid-col-width) * 12);
      }
      .grid__offset-tablet-s-1_1wxmi {
        margin-left: calc(var(--grid-col-width) * 1);
      }
      .grid__offset-tablet-s-2_1wxmi {
        margin-left: calc(var(--grid-col-width) * 2);
      }
      .grid__offset-tablet-s-3_1wxmi {
        margin-left: calc(var(--grid-col-width) * 3);
      }
      .grid__offset-tablet-s-4_1wxmi {
        margin-left: calc(var(--grid-col-width) * 4);
      }
      .grid__offset-tablet-s-5_1wxmi {
        margin-left: calc(var(--grid-col-width) * 5);
      }
      .grid__offset-tablet-s-6_1wxmi {
        margin-left: calc(var(--grid-col-width) * 6);
      }
      .grid__offset-tablet-s-7_1wxmi {
        margin-left: calc(var(--grid-col-width) * 7);
      }
      .grid__offset-tablet-s-8_1wxmi {
        margin-left: calc(var(--grid-col-width) * 8);
      }
      .grid__offset-tablet-s-9_1wxmi {
        margin-left: calc(var(--grid-col-width) * 9);
      }
      .grid__offset-tablet-s-10_1wxmi {
        margin-left: calc(var(--grid-col-width) * 10);
      }
      .grid__offset-tablet-s-11_1wxmi {
        margin-left: calc(var(--grid-col-width) * 11);
      }

    .grid__order-tablet-s-first_1wxmi {
      order: -1;
    }

    .grid__order-tablet-s-last_1wxmi {
      order: 13;
    }
      .grid__order-tablet-s-1_1wxmi {
        order: 1;
      }
      .grid__order-tablet-s-2_1wxmi {
        order: 2;
      }
      .grid__order-tablet-s-3_1wxmi {
        order: 3;
      }
      .grid__order-tablet-s-4_1wxmi {
        order: 4;
      }
      .grid__order-tablet-s-5_1wxmi {
        order: 5;
      }
      .grid__order-tablet-s-6_1wxmi {
        order: 6;
      }
      .grid__order-tablet-s-7_1wxmi {
        order: 7;
      }
      .grid__order-tablet-s-8_1wxmi {
        order: 8;
      }
      .grid__order-tablet-s-9_1wxmi {
        order: 9;
      }
      .grid__order-tablet-s-10_1wxmi {
        order: 10;
      }
      .grid__order-tablet-s-11_1wxmi {
        order: 11;
      }
      .grid__order-tablet-s-12_1wxmi {
        order: 12;
      }
  }
@media (min-width: 1024px) {
    .grid__width-tablet-l-auto_1wxmi {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }

    .grid__width-tablet-l-available_1wxmi {
      flex-basis: auto;
      min-height: auto;
      height: auto;
    }
      .grid__width-tablet-l-1_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 1);
        max-width: calc(var(--grid-col-width) * 1);
      }
      .grid__width-tablet-l-2_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 2);
        max-width: calc(var(--grid-col-width) * 2);
      }
      .grid__width-tablet-l-3_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 3);
        max-width: calc(var(--grid-col-width) * 3);
      }
      .grid__width-tablet-l-4_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 4);
        max-width: calc(var(--grid-col-width) * 4);
      }
      .grid__width-tablet-l-5_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 5);
        max-width: calc(var(--grid-col-width) * 5);
      }
      .grid__width-tablet-l-6_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 6);
        max-width: calc(var(--grid-col-width) * 6);
      }
      .grid__width-tablet-l-7_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 7);
        max-width: calc(var(--grid-col-width) * 7);
      }
      .grid__width-tablet-l-8_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 8);
        max-width: calc(var(--grid-col-width) * 8);
      }
      .grid__width-tablet-l-9_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 9);
        max-width: calc(var(--grid-col-width) * 9);
      }
      .grid__width-tablet-l-10_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 10);
        max-width: calc(var(--grid-col-width) * 10);
      }
      .grid__width-tablet-l-11_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 11);
        max-width: calc(var(--grid-col-width) * 11);
      }
      .grid__width-tablet-l-12_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 12);
        max-width: calc(var(--grid-col-width) * 12);
      }
      .grid__offset-tablet-l-1_1wxmi {
        margin-left: calc(var(--grid-col-width) * 1);
      }
      .grid__offset-tablet-l-2_1wxmi {
        margin-left: calc(var(--grid-col-width) * 2);
      }
      .grid__offset-tablet-l-3_1wxmi {
        margin-left: calc(var(--grid-col-width) * 3);
      }
      .grid__offset-tablet-l-4_1wxmi {
        margin-left: calc(var(--grid-col-width) * 4);
      }
      .grid__offset-tablet-l-5_1wxmi {
        margin-left: calc(var(--grid-col-width) * 5);
      }
      .grid__offset-tablet-l-6_1wxmi {
        margin-left: calc(var(--grid-col-width) * 6);
      }
      .grid__offset-tablet-l-7_1wxmi {
        margin-left: calc(var(--grid-col-width) * 7);
      }
      .grid__offset-tablet-l-8_1wxmi {
        margin-left: calc(var(--grid-col-width) * 8);
      }
      .grid__offset-tablet-l-9_1wxmi {
        margin-left: calc(var(--grid-col-width) * 9);
      }
      .grid__offset-tablet-l-10_1wxmi {
        margin-left: calc(var(--grid-col-width) * 10);
      }
      .grid__offset-tablet-l-11_1wxmi {
        margin-left: calc(var(--grid-col-width) * 11);
      }

    .grid__order-tablet-l-first_1wxmi {
      order: -1;
    }

    .grid__order-tablet-l-last_1wxmi {
      order: 13;
    }
      .grid__order-tablet-l-1_1wxmi {
        order: 1;
      }
      .grid__order-tablet-l-2_1wxmi {
        order: 2;
      }
      .grid__order-tablet-l-3_1wxmi {
        order: 3;
      }
      .grid__order-tablet-l-4_1wxmi {
        order: 4;
      }
      .grid__order-tablet-l-5_1wxmi {
        order: 5;
      }
      .grid__order-tablet-l-6_1wxmi {
        order: 6;
      }
      .grid__order-tablet-l-7_1wxmi {
        order: 7;
      }
      .grid__order-tablet-l-8_1wxmi {
        order: 8;
      }
      .grid__order-tablet-l-9_1wxmi {
        order: 9;
      }
      .grid__order-tablet-l-10_1wxmi {
        order: 10;
      }
      .grid__order-tablet-l-11_1wxmi {
        order: 11;
      }
      .grid__order-tablet-l-12_1wxmi {
        order: 12;
      }
  }
@media (min-width: 1280px) {
    .grid__width-desktop-auto_1wxmi {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }

    .grid__width-desktop-available_1wxmi {
      flex-basis: auto;
      min-height: auto;
      height: auto;
    }
      .grid__width-desktop-1_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 1);
        max-width: calc(var(--grid-col-width) * 1);
      }
      .grid__width-desktop-2_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 2);
        max-width: calc(var(--grid-col-width) * 2);
      }
      .grid__width-desktop-3_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 3);
        max-width: calc(var(--grid-col-width) * 3);
      }
      .grid__width-desktop-4_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 4);
        max-width: calc(var(--grid-col-width) * 4);
      }
      .grid__width-desktop-5_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 5);
        max-width: calc(var(--grid-col-width) * 5);
      }
      .grid__width-desktop-6_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 6);
        max-width: calc(var(--grid-col-width) * 6);
      }
      .grid__width-desktop-7_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 7);
        max-width: calc(var(--grid-col-width) * 7);
      }
      .grid__width-desktop-8_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 8);
        max-width: calc(var(--grid-col-width) * 8);
      }
      .grid__width-desktop-9_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 9);
        max-width: calc(var(--grid-col-width) * 9);
      }
      .grid__width-desktop-10_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 10);
        max-width: calc(var(--grid-col-width) * 10);
      }
      .grid__width-desktop-11_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 11);
        max-width: calc(var(--grid-col-width) * 11);
      }
      .grid__width-desktop-12_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 12);
        max-width: calc(var(--grid-col-width) * 12);
      }
      .grid__offset-desktop-1_1wxmi {
        margin-left: calc(var(--grid-col-width) * 1);
      }
      .grid__offset-desktop-2_1wxmi {
        margin-left: calc(var(--grid-col-width) * 2);
      }
      .grid__offset-desktop-3_1wxmi {
        margin-left: calc(var(--grid-col-width) * 3);
      }
      .grid__offset-desktop-4_1wxmi {
        margin-left: calc(var(--grid-col-width) * 4);
      }
      .grid__offset-desktop-5_1wxmi {
        margin-left: calc(var(--grid-col-width) * 5);
      }
      .grid__offset-desktop-6_1wxmi {
        margin-left: calc(var(--grid-col-width) * 6);
      }
      .grid__offset-desktop-7_1wxmi {
        margin-left: calc(var(--grid-col-width) * 7);
      }
      .grid__offset-desktop-8_1wxmi {
        margin-left: calc(var(--grid-col-width) * 8);
      }
      .grid__offset-desktop-9_1wxmi {
        margin-left: calc(var(--grid-col-width) * 9);
      }
      .grid__offset-desktop-10_1wxmi {
        margin-left: calc(var(--grid-col-width) * 10);
      }
      .grid__offset-desktop-11_1wxmi {
        margin-left: calc(var(--grid-col-width) * 11);
      }

    .grid__order-desktop-first_1wxmi {
      order: -1;
    }

    .grid__order-desktop-last_1wxmi {
      order: 13;
    }
      .grid__order-desktop-1_1wxmi {
        order: 1;
      }
      .grid__order-desktop-2_1wxmi {
        order: 2;
      }
      .grid__order-desktop-3_1wxmi {
        order: 3;
      }
      .grid__order-desktop-4_1wxmi {
        order: 4;
      }
      .grid__order-desktop-5_1wxmi {
        order: 5;
      }
      .grid__order-desktop-6_1wxmi {
        order: 6;
      }
      .grid__order-desktop-7_1wxmi {
        order: 7;
      }
      .grid__order-desktop-8_1wxmi {
        order: 8;
      }
      .grid__order-desktop-9_1wxmi {
        order: 9;
      }
      .grid__order-desktop-10_1wxmi {
        order: 10;
      }
      .grid__order-desktop-11_1wxmi {
        order: 11;
      }
      .grid__order-desktop-12_1wxmi {
        order: 12;
      }
  }
@media (min-width: 1280px) {
    .grid__width-desktop-s-auto_1wxmi {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }

    .grid__width-desktop-s-available_1wxmi {
      flex-basis: auto;
      min-height: auto;
      height: auto;
    }
      .grid__width-desktop-s-1_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 1);
        max-width: calc(var(--grid-col-width) * 1);
      }
      .grid__width-desktop-s-2_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 2);
        max-width: calc(var(--grid-col-width) * 2);
      }
      .grid__width-desktop-s-3_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 3);
        max-width: calc(var(--grid-col-width) * 3);
      }
      .grid__width-desktop-s-4_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 4);
        max-width: calc(var(--grid-col-width) * 4);
      }
      .grid__width-desktop-s-5_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 5);
        max-width: calc(var(--grid-col-width) * 5);
      }
      .grid__width-desktop-s-6_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 6);
        max-width: calc(var(--grid-col-width) * 6);
      }
      .grid__width-desktop-s-7_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 7);
        max-width: calc(var(--grid-col-width) * 7);
      }
      .grid__width-desktop-s-8_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 8);
        max-width: calc(var(--grid-col-width) * 8);
      }
      .grid__width-desktop-s-9_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 9);
        max-width: calc(var(--grid-col-width) * 9);
      }
      .grid__width-desktop-s-10_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 10);
        max-width: calc(var(--grid-col-width) * 10);
      }
      .grid__width-desktop-s-11_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 11);
        max-width: calc(var(--grid-col-width) * 11);
      }
      .grid__width-desktop-s-12_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 12);
        max-width: calc(var(--grid-col-width) * 12);
      }
      .grid__offset-desktop-s-1_1wxmi {
        margin-left: calc(var(--grid-col-width) * 1);
      }
      .grid__offset-desktop-s-2_1wxmi {
        margin-left: calc(var(--grid-col-width) * 2);
      }
      .grid__offset-desktop-s-3_1wxmi {
        margin-left: calc(var(--grid-col-width) * 3);
      }
      .grid__offset-desktop-s-4_1wxmi {
        margin-left: calc(var(--grid-col-width) * 4);
      }
      .grid__offset-desktop-s-5_1wxmi {
        margin-left: calc(var(--grid-col-width) * 5);
      }
      .grid__offset-desktop-s-6_1wxmi {
        margin-left: calc(var(--grid-col-width) * 6);
      }
      .grid__offset-desktop-s-7_1wxmi {
        margin-left: calc(var(--grid-col-width) * 7);
      }
      .grid__offset-desktop-s-8_1wxmi {
        margin-left: calc(var(--grid-col-width) * 8);
      }
      .grid__offset-desktop-s-9_1wxmi {
        margin-left: calc(var(--grid-col-width) * 9);
      }
      .grid__offset-desktop-s-10_1wxmi {
        margin-left: calc(var(--grid-col-width) * 10);
      }
      .grid__offset-desktop-s-11_1wxmi {
        margin-left: calc(var(--grid-col-width) * 11);
      }

    .grid__order-desktop-s-first_1wxmi {
      order: -1;
    }

    .grid__order-desktop-s-last_1wxmi {
      order: 13;
    }
      .grid__order-desktop-s-1_1wxmi {
        order: 1;
      }
      .grid__order-desktop-s-2_1wxmi {
        order: 2;
      }
      .grid__order-desktop-s-3_1wxmi {
        order: 3;
      }
      .grid__order-desktop-s-4_1wxmi {
        order: 4;
      }
      .grid__order-desktop-s-5_1wxmi {
        order: 5;
      }
      .grid__order-desktop-s-6_1wxmi {
        order: 6;
      }
      .grid__order-desktop-s-7_1wxmi {
        order: 7;
      }
      .grid__order-desktop-s-8_1wxmi {
        order: 8;
      }
      .grid__order-desktop-s-9_1wxmi {
        order: 9;
      }
      .grid__order-desktop-s-10_1wxmi {
        order: 10;
      }
      .grid__order-desktop-s-11_1wxmi {
        order: 11;
      }
      .grid__order-desktop-s-12_1wxmi {
        order: 12;
      }
  }
@media (min-width: 1366px) {
    .grid__width-desktop-m-auto_1wxmi {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }

    .grid__width-desktop-m-available_1wxmi {
      flex-basis: auto;
      min-height: auto;
      height: auto;
    }
      .grid__width-desktop-m-1_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 1);
        max-width: calc(var(--grid-col-width) * 1);
      }
      .grid__width-desktop-m-2_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 2);
        max-width: calc(var(--grid-col-width) * 2);
      }
      .grid__width-desktop-m-3_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 3);
        max-width: calc(var(--grid-col-width) * 3);
      }
      .grid__width-desktop-m-4_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 4);
        max-width: calc(var(--grid-col-width) * 4);
      }
      .grid__width-desktop-m-5_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 5);
        max-width: calc(var(--grid-col-width) * 5);
      }
      .grid__width-desktop-m-6_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 6);
        max-width: calc(var(--grid-col-width) * 6);
      }
      .grid__width-desktop-m-7_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 7);
        max-width: calc(var(--grid-col-width) * 7);
      }
      .grid__width-desktop-m-8_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 8);
        max-width: calc(var(--grid-col-width) * 8);
      }
      .grid__width-desktop-m-9_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 9);
        max-width: calc(var(--grid-col-width) * 9);
      }
      .grid__width-desktop-m-10_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 10);
        max-width: calc(var(--grid-col-width) * 10);
      }
      .grid__width-desktop-m-11_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 11);
        max-width: calc(var(--grid-col-width) * 11);
      }
      .grid__width-desktop-m-12_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 12);
        max-width: calc(var(--grid-col-width) * 12);
      }
      .grid__offset-desktop-m-1_1wxmi {
        margin-left: calc(var(--grid-col-width) * 1);
      }
      .grid__offset-desktop-m-2_1wxmi {
        margin-left: calc(var(--grid-col-width) * 2);
      }
      .grid__offset-desktop-m-3_1wxmi {
        margin-left: calc(var(--grid-col-width) * 3);
      }
      .grid__offset-desktop-m-4_1wxmi {
        margin-left: calc(var(--grid-col-width) * 4);
      }
      .grid__offset-desktop-m-5_1wxmi {
        margin-left: calc(var(--grid-col-width) * 5);
      }
      .grid__offset-desktop-m-6_1wxmi {
        margin-left: calc(var(--grid-col-width) * 6);
      }
      .grid__offset-desktop-m-7_1wxmi {
        margin-left: calc(var(--grid-col-width) * 7);
      }
      .grid__offset-desktop-m-8_1wxmi {
        margin-left: calc(var(--grid-col-width) * 8);
      }
      .grid__offset-desktop-m-9_1wxmi {
        margin-left: calc(var(--grid-col-width) * 9);
      }
      .grid__offset-desktop-m-10_1wxmi {
        margin-left: calc(var(--grid-col-width) * 10);
      }
      .grid__offset-desktop-m-11_1wxmi {
        margin-left: calc(var(--grid-col-width) * 11);
      }

    .grid__order-desktop-m-first_1wxmi {
      order: -1;
    }

    .grid__order-desktop-m-last_1wxmi {
      order: 13;
    }
      .grid__order-desktop-m-1_1wxmi {
        order: 1;
      }
      .grid__order-desktop-m-2_1wxmi {
        order: 2;
      }
      .grid__order-desktop-m-3_1wxmi {
        order: 3;
      }
      .grid__order-desktop-m-4_1wxmi {
        order: 4;
      }
      .grid__order-desktop-m-5_1wxmi {
        order: 5;
      }
      .grid__order-desktop-m-6_1wxmi {
        order: 6;
      }
      .grid__order-desktop-m-7_1wxmi {
        order: 7;
      }
      .grid__order-desktop-m-8_1wxmi {
        order: 8;
      }
      .grid__order-desktop-m-9_1wxmi {
        order: 9;
      }
      .grid__order-desktop-m-10_1wxmi {
        order: 10;
      }
      .grid__order-desktop-m-11_1wxmi {
        order: 11;
      }
      .grid__order-desktop-m-12_1wxmi {
        order: 12;
      }
  }
@media (min-width: 1440px) {
    .grid__width-desktop-l-auto_1wxmi {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }

    .grid__width-desktop-l-available_1wxmi {
      flex-basis: auto;
      min-height: auto;
      height: auto;
    }
      .grid__width-desktop-l-1_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 1);
        max-width: calc(var(--grid-col-width) * 1);
      }
      .grid__width-desktop-l-2_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 2);
        max-width: calc(var(--grid-col-width) * 2);
      }
      .grid__width-desktop-l-3_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 3);
        max-width: calc(var(--grid-col-width) * 3);
      }
      .grid__width-desktop-l-4_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 4);
        max-width: calc(var(--grid-col-width) * 4);
      }
      .grid__width-desktop-l-5_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 5);
        max-width: calc(var(--grid-col-width) * 5);
      }
      .grid__width-desktop-l-6_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 6);
        max-width: calc(var(--grid-col-width) * 6);
      }
      .grid__width-desktop-l-7_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 7);
        max-width: calc(var(--grid-col-width) * 7);
      }
      .grid__width-desktop-l-8_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 8);
        max-width: calc(var(--grid-col-width) * 8);
      }
      .grid__width-desktop-l-9_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 9);
        max-width: calc(var(--grid-col-width) * 9);
      }
      .grid__width-desktop-l-10_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 10);
        max-width: calc(var(--grid-col-width) * 10);
      }
      .grid__width-desktop-l-11_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 11);
        max-width: calc(var(--grid-col-width) * 11);
      }
      .grid__width-desktop-l-12_1wxmi {
        flex: 0 0 calc(var(--grid-col-width) * 12);
        max-width: calc(var(--grid-col-width) * 12);
      }
      .grid__offset-desktop-l-1_1wxmi {
        margin-left: calc(var(--grid-col-width) * 1);
      }
      .grid__offset-desktop-l-2_1wxmi {
        margin-left: calc(var(--grid-col-width) * 2);
      }
      .grid__offset-desktop-l-3_1wxmi {
        margin-left: calc(var(--grid-col-width) * 3);
      }
      .grid__offset-desktop-l-4_1wxmi {
        margin-left: calc(var(--grid-col-width) * 4);
      }
      .grid__offset-desktop-l-5_1wxmi {
        margin-left: calc(var(--grid-col-width) * 5);
      }
      .grid__offset-desktop-l-6_1wxmi {
        margin-left: calc(var(--grid-col-width) * 6);
      }
      .grid__offset-desktop-l-7_1wxmi {
        margin-left: calc(var(--grid-col-width) * 7);
      }
      .grid__offset-desktop-l-8_1wxmi {
        margin-left: calc(var(--grid-col-width) * 8);
      }
      .grid__offset-desktop-l-9_1wxmi {
        margin-left: calc(var(--grid-col-width) * 9);
      }
      .grid__offset-desktop-l-10_1wxmi {
        margin-left: calc(var(--grid-col-width) * 10);
      }
      .grid__offset-desktop-l-11_1wxmi {
        margin-left: calc(var(--grid-col-width) * 11);
      }

    .grid__order-desktop-l-first_1wxmi {
      order: -1;
    }

    .grid__order-desktop-l-last_1wxmi {
      order: 13;
    }
      .grid__order-desktop-l-1_1wxmi {
        order: 1;
      }
      .grid__order-desktop-l-2_1wxmi {
        order: 2;
      }
      .grid__order-desktop-l-3_1wxmi {
        order: 3;
      }
      .grid__order-desktop-l-4_1wxmi {
        order: 4;
      }
      .grid__order-desktop-l-5_1wxmi {
        order: 5;
      }
      .grid__order-desktop-l-6_1wxmi {
        order: 6;
      }
      .grid__order-desktop-l-7_1wxmi {
        order: 7;
      }
      .grid__order-desktop-l-8_1wxmi {
        order: 8;
      }
      .grid__order-desktop-l-9_1wxmi {
        order: 9;
      }
      .grid__order-desktop-l-10_1wxmi {
        order: 10;
      }
      .grid__order-desktop-l-11_1wxmi {
        order: 11;
      }
      .grid__order-desktop-l-12_1wxmi {
        order: 12;
      }
  }