@heycar-uikit/core/grid/cssm/components/Col.module.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;
}
.component {
  max-width: 100%;
  min-height: 1px;
  flex-basis: 0;
  flex-grow: 1;
  box-sizing: border-box;
}
.width-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.width-available {
  flex-basis: auto;
  min-height: auto;
  height: auto;
}
.width-1 {
    flex: 0 0 calc(var(--grid-col-width) * 1);
    max-width: calc(var(--grid-col-width) * 1);
  }
.width-2 {
    flex: 0 0 calc(var(--grid-col-width) * 2);
    max-width: calc(var(--grid-col-width) * 2);
  }
.width-3 {
    flex: 0 0 calc(var(--grid-col-width) * 3);
    max-width: calc(var(--grid-col-width) * 3);
  }
.width-4 {
    flex: 0 0 calc(var(--grid-col-width) * 4);
    max-width: calc(var(--grid-col-width) * 4);
  }
.width-5 {
    flex: 0 0 calc(var(--grid-col-width) * 5);
    max-width: calc(var(--grid-col-width) * 5);
  }
.width-6 {
    flex: 0 0 calc(var(--grid-col-width) * 6);
    max-width: calc(var(--grid-col-width) * 6);
  }
.width-7 {
    flex: 0 0 calc(var(--grid-col-width) * 7);
    max-width: calc(var(--grid-col-width) * 7);
  }
.width-8 {
    flex: 0 0 calc(var(--grid-col-width) * 8);
    max-width: calc(var(--grid-col-width) * 8);
  }
.width-9 {
    flex: 0 0 calc(var(--grid-col-width) * 9);
    max-width: calc(var(--grid-col-width) * 9);
  }
.width-10 {
    flex: 0 0 calc(var(--grid-col-width) * 10);
    max-width: calc(var(--grid-col-width) * 10);
  }
.width-11 {
    flex: 0 0 calc(var(--grid-col-width) * 11);
    max-width: calc(var(--grid-col-width) * 11);
  }
.width-12 {
    flex: 0 0 calc(var(--grid-col-width) * 12);
    max-width: calc(var(--grid-col-width) * 12);
  }
.align-top {
  align-self: flex-start;
}
.align-middle {
  align-self: center;
}
.align-bottom {
  align-self: flex-end;
}
.offset-1 {
    margin-left: calc(var(--grid-col-width) * 1);
  }
.offset-2 {
    margin-left: calc(var(--grid-col-width) * 2);
  }
.offset-3 {
    margin-left: calc(var(--grid-col-width) * 3);
  }
.offset-4 {
    margin-left: calc(var(--grid-col-width) * 4);
  }
.offset-5 {
    margin-left: calc(var(--grid-col-width) * 5);
  }
.offset-6 {
    margin-left: calc(var(--grid-col-width) * 6);
  }
.offset-7 {
    margin-left: calc(var(--grid-col-width) * 7);
  }
.offset-8 {
    margin-left: calc(var(--grid-col-width) * 8);
  }
.offset-9 {
    margin-left: calc(var(--grid-col-width) * 9);
  }
.offset-10 {
    margin-left: calc(var(--grid-col-width) * 10);
  }
.offset-11 {
    margin-left: calc(var(--grid-col-width) * 11);
  }
.order-first {
  order: -1;
}
.order-last {
  order: 13;
}
.order-1 {
    order: 1;
  }
.order-2 {
    order: 2;
  }
.order-3 {
    order: 3;
  }
.order-4 {
    order: 4;
  }
.order-5 {
    order: 5;
  }
.order-6 {
    order: 6;
  }
.order-7 {
    order: 7;
  }
.order-8 {
    order: 8;
  }
.order-9 {
    order: 9;
  }
.order-10 {
    order: 10;
  }
.order-11 {
    order: 11;
  }
.order-12 {
    order: 12;
  }
@media (max-width: 767px) {
    .width-mobile-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }

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

    .order-mobile-first {
      order: -1;
    }

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

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

    .order-tablet-first {
      order: -1;
    }

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

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

    .order-tablet-s-first {
      order: -1;
    }

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

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

    .order-tablet-l-first {
      order: -1;
    }

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

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

    .order-desktop-first {
      order: -1;
    }

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

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

    .order-desktop-s-first {
      order: -1;
    }

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

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

    .order-desktop-m-first {
      order: -1;
    }

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

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

    .order-desktop-l-first {
      order: -1;
    }

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