@charset "UTF-8";/* Maersk Text */@font-face {
  font-family: "Maersk Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/onlinequote/assets/MaerskText-Regular-a8390e43.woff2") format("woff2"),
    url("/onlinequote/assets/MaerskText-Regular-3bb12fba.woff") format("woff");
}@font-face {
  font-family: "Maersk Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/onlinequote/assets/MaerskText-Medium-ac8ac56e.woff2") format("woff2"),
    url("/onlinequote/assets/MaerskText-Medium-331ae7c1.woff") format("woff");
}@font-face {
  font-family: "Maersk Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/onlinequote/assets/MaerskText-Bold-6329346e.woff2") format("woff2"),
    url("/onlinequote/assets/MaerskText-Bold-d9cf7726.woff") format("woff");
}@font-face {
  font-family: "Maersk Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/onlinequote/assets/MaerskText-Italic-1bf123c4.woff2") format("woff2"),
    url("/onlinequote/assets/MaerskText-Italic-f7daa09e.woff") format("woff");
}@font-face {
  font-family: "Maersk Text";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/onlinequote/assets/MaerskText-MediumItalic-11098b30.woff2") format("woff2"),
    url("/onlinequote/assets/MaerskText-MediumItalic-58837975.woff") format("woff");
}@font-face {
  font-family: "Maersk Text";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/onlinequote/assets/MaerskText-BoldItalic-f8ea861a.woff2") format("woff2"),
    url("/onlinequote/assets/MaerskText-BoldItalic-cfbce83e.woff") format("woff");
}/* Maersk Headline */@font-face {
  font-family: "Maersk Headline";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/onlinequote/assets/MaerskHeadline-Regular-5884153b.woff2") format("woff2"),
    url("/onlinequote/assets/MaerskHeadline-Regular-b3b90add.woff") format("woff");
}@font-face {
  font-family: "Maersk Headline";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/onlinequote/assets/MaerskHeadline-Bold-7c8903e8.woff2") format("woff2"),
    url("/onlinequote/assets/MaerskHeadline-Bold-6c7e8887.woff") format("woff");
}@font-face {
  font-family: "Maersk Headline";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/onlinequote/assets/MaerskHeadline-Light-954fa60a.woff2") format("woff2"),
    url("/onlinequote/assets/MaerskHeadline-Light-846f5bb1.woff") format("woff");
}/* Utility classes with fallback fonts */.maersk-text {
  font-family: "Maersk Text", "Arial", "-apple-system", "BlinkMacSystemFont",
    "Hiragino Kaku Gothic ProN", "Meiryo", "Segoe UI", "Roboto",
    "Apple SD Gothic Neo", "Malgun Gothic", "PingFang TC", "Microsoft JhengHei",
    "PingFang SC", "Microsoft YaHei", "sans-serif";
}.maersk-headline {
  font-family: "Maersk Headline", "Arial", "-apple-system", "BlinkMacSystemFont",
    "Hiragino Kaku Gothic ProN", "Meiryo", "Segoe UI", "Roboto",
    "Apple SD Gothic Neo", "Malgun Gothic", "PingFang TC", "Microsoft JhengHei",
    "PingFang SC", "Microsoft YaHei", "sans-serif";
}/** 
 * These SASS variables are auto-generated out of their counter-part design-tokens 
 * during build of foundations using scripts/utils/generate-breakpoint-sass-variables.mjs 
 **//** 
These classes are auto-generated out of their counter-part design-tokens 
during build of foundations using scripts/utils/generate-gap-utility-classes.mjs

@description: 
The MDS offers a collection of gap utility classes that can be used to control the spacing between elements in a mds grid or mds flex layout. 
These classes allow you to easily apply consistent spacing throughout your application.

@basicExample:
<div class="mds-container">
  <div class="mds-grid mds-gap-200">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
  <div class="mds-flex mds-gap-200">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</div>
 **/.mds {
  background: var(--mds_foundations_body_background-color);
  color: var(--mds_foundations_body_text-color);
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizelegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /*
  @name: mds
  @category: Typography
  @usage:
  Use mds class to apply typography styles to the content.
  @example:
  <div class="mds">
    <h1 class="mds-headline mds-headline--large">Heading 1</h1>
    <p class="mds-text mds-text--medium">This is a paragraph with medium text.</p>
    <a href="#" class="mds-link">This is a link</a>
  </div>
  */
  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  /* Document
     ========================================================================== */
  /**
   * Render the `main` element consistently in IE.
   */
}.mds main {
  display: block;
}.mds {
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
}.mds h1 {
  font-size: 2em;
  margin: 0.67em 0;
}.mds {
  /* Grouping content
     ========================================================================== */
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
}.mds hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}.mds {
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
}.mds pre {
  font-family: monospace; /* 1 */
  font-size: 1em; /* 2 */
}.mds {
  /* Text-level semantics
     ========================================================================== */
  /**
   * Remove the gray background on active links in IE 10.
   */
}.mds a {
  background-color: transparent;
}.mds {
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
}.mds abbr[title] {
  border-bottom-width: 0; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}.mds {
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
}.mds b,
.mds strong {
  font-weight: bolder;
}.mds {
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
}.mds code,
.mds kbd,
.mds samp {
  font-family: monospace; /* 1 */
  font-size: 1em; /* 2 */
}.mds {
  /**
   * Add the correct font size in all browsers.
   */
}.mds small {
  font-size: 80%;
}.mds {
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
}.mds sub,
.mds sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}.mds sub {
  bottom: -0.25em;
}.mds sup {
  top: -0.5em;
}.mds {
  /* Embedded content
     ========================================================================== */
  /**
   * Remove the border on images inside links in IE 10.
   */
}.mds img {
  border-style: none;
}.mds {
  /* Forms
     ========================================================================== */
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
}.mds button,
.mds input,
.mds optgroup,
.mds select,
.mds textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}.mds {
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
}.mds button,
.mds input {
  /* 1 */
  overflow: visible;
}.mds {
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
}.mds button,
.mds select {
  /* 1 */
  text-transform: none;
}.mds {
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
}.mds button,
.mds [type=button],
.mds [type=reset],
.mds [type=submit] {
  -webkit-appearance: button;
}.mds {
  /**
   * Remove the inner border and padding in Firefox.
   */
}.mds button::-moz-focus-inner,
.mds [type=button]::-moz-focus-inner,
.mds [type=reset]::-moz-focus-inner,
.mds [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}.mds {
  /**
   * Restore the focus styles unset by the previous rule.
   */
}.mds button:-moz-focusring,
.mds [type=button]:-moz-focusring,
.mds [type=reset]:-moz-focusring,
.mds [type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}.mds {
  /**
   * Correct the padding in Firefox.
   */
}.mds fieldset {
  border-width: 0;
  padding: 0;
  margin: 0;
}.mds {
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
}.mds legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}.mds {
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
}.mds progress {
  vertical-align: baseline;
}.mds {
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
}.mds textarea {
  overflow: auto;
}.mds {
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
}.mds [type=checkbox],
.mds [type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}.mds {
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
}.mds [type=number]::-webkit-inner-spin-button,
.mds [type=number]::-webkit-outer-spin-button {
  height: auto;
}.mds {
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
}.mds [type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}.mds {
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
}.mds [type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}.mds {
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
}.mds ::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}.mds {
  /* Interactive
     ========================================================================== */
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
}.mds details {
  display: block;
}.mds {
  /*
   * Add the correct display in all browsers.
   */
}.mds summary {
  display: list-item;
}.mds {
  /* Misc
     ========================================================================== */
  /**
   * Add the correct display in IE 10+.
   */
}.mds template {
  display: none;
}.mds {
  /**
   * Add the correct display in IE 10.
   */
}.mds [hidden] {
  display: none;
}.mds * {
  box-sizing: border-box;
}.mds footer,
.mds main {
  display: block;
}.mds button,
.mds input,
.mds optgroup,
.mds select,
.mds textarea {
  font-family: inherit;
}.mds code {
  word-break: normal;
  overflow-wrap: anywhere;
}.mds [slot=label],
.mds [slot=errormessage],
.mds [slot=hint],
.mds [slot=legend] {
  display: flex;
  align-items: center;
  gap: var(--mds_foundations_slot_gap);
}.mds mc-modal h1,
.mds mc-tab-bar h1,
.mds mc-popover h1,
.mds mc-c-accordion h1 {
  margin: calc(var(--mds_foundations_typography_heading-1_margin-top) / 2) 0 calc(var(--mds_foundations_typography_heading-1_margin-bottom) / 2) 0;
}.mds mc-modal h2,
.mds mc-tab-bar h2,
.mds mc-popover h2,
.mds mc-c-accordion h2 {
  margin: calc(var(--mds_foundations_typography_heading-2_margin-top) / 2) 0 calc(var(--mds_foundations_typography_heading-2_margin-bottom) / 2) 0;
}.mds mc-modal h3,
.mds mc-tab-bar h3,
.mds mc-popover h3,
.mds mc-c-accordion h3 {
  margin: calc(var(--mds_foundations_typography_heading-3_margin-top) / 2) 0 calc(var(--mds_foundations_typography_heading-3_margin-bottom) / 2) 0;
}.mds mc-modal h4,
.mds mc-tab-bar h4,
.mds mc-popover h4,
.mds mc-c-accordion h4 {
  margin: calc(var(--mds_foundations_typography_heading-4_margin-top) / 2) 0 calc(var(--mds_foundations_typography_heading-4_margin-bottom) / 2) 0;
}.mds mc-modal h5,
.mds mc-tab-bar h5,
.mds mc-popover h5,
.mds mc-c-accordion h5 {
  margin: calc(var(--mds_foundations_typography_heading-4_margin-top) / 2) 0 calc(var(--mds_foundations_typography_heading-4_margin-bottom) / 2) 0;
}.mds mc-modal h6,
.mds mc-tab-bar h6,
.mds mc-popover h6,
.mds mc-c-accordion h6 {
  margin: calc(var(--mds_foundations_typography_heading-4_margin-top) / 2) 0 calc(var(--mds_foundations_typography_heading-4_margin-bottom) / 2) 0;
}.mds mc-modal p,
.mds mc-tab-bar p,
.mds mc-popover p,
.mds mc-c-accordion p {
  margin: calc(var(--mds_foundations_typography_paragraph_margin-top) / 2) 0 calc(var(--mds_foundations_typography_paragraph_margin-bottom) / 2) 0;
}.mds mc-modal hr,
.mds mc-tab-bar hr,
.mds mc-popover hr,
.mds mc-c-accordion hr {
  margin: calc(var(----mds_foundations_horizontal-rule_margin-top) / 2) 0 calc(var(--mds_foundations_horizontal-rule_margin-bottom) / 2) 0;
}.mds mc-modal ol,
.mds mc-modal ul,
.mds mc-tab-bar ol,
.mds mc-tab-bar ul,
.mds mc-popover ol,
.mds mc-popover ul,
.mds mc-c-accordion ol,
.mds mc-c-accordion ul {
  margin: calc(var(--mds_foundations_list_margin-top) / 2) 0 calc(var(--mds_foundations_list_margin-bottom) / 2) 0;
}.mds {
  /** 
   * These SASS variables are auto-generated out of their counter-part design-tokens 
   * during build of foundations using scripts/utils/generate-breakpoint-sass-variables.mjs 
   **/
  /*
  @description: 
  A breadcrumb is a secondary navigation component used to show users their location within a website or application hierarchy.
  Breadcrumbs should provide context and an easy way for users to navigate up the site hierarchy. 
  They are not intended to replace primary navigation but to enhance the user’s understanding of where they are within the website or application. 
  Use a breadcrumb for applications with a hierarchy of more than 2 levels.

  @basicExample:
  // Basic breadcrumb with 5 levels
  <nav class="mds-breadcrumb" aria-label="breadcrumb">
    <ol>
      <li><a href="#home">Home</a></li>
      <li><a href="#digital-solutions">Digital Solutions</a></li>
      <li><a href="#data-integrations">Data Integrations</a></li>
      <li><a href="#ocean-booking">Ocean Booking</a></li>
      <li>Current page</li>
    </ol>
  </nav>

  @advancedExample:
  // Advanced breadcrumb with truncation
  <nav class="mds-breadcrumb" aria-label="breadcrumb example 1">
    <ol>
      <li><a href="#home">Home</a></li>
      <li>
        <a href="#data-integrations" title="Data Integrations</a>
      </li>
      <li><a href="#ocean-booking">Ocean Booking</a></li>
      <li class="mds-breadcrumb__long-and-truncated">API (Leverage the power of integrated data)</li>
    </ol>
  </nav>
  */
}.mds .mds-breadcrumb {
  /* 
  @name: mds-breadcrumb
  @category: Navigation
  @usage: 
  Use breadcrumbs to give context and help users navigate.
  All breadcrumbs items except the current page should be clickable links.
  Use concise and descriptive link text for each level in the breadcrumb.
  Avoid using dynamic or changing breadcrumbs, since it can confuse users.
  Use truncation if the breadcrumb has more than 5 levels.
  The breadcrumb should never wrap to the second line.
  Place the breadcrumb consistently on each page across the website or application.
  Don’t use a breadcrumb for simple and flat hierarchies e.g. a 2 level hierarchy.
  @example:
  <nav class="mds-breadcrumb" aria-label="breadcrumb">
    <ol>
      <li><a href="#home">Home</a></li>
      <li><a href="#digital-solutions">Digital Solutions</a></li>
      <li><a href="#data-integrations">Data Integrations</a></li>
      <li><a href="#ocean-booking">Ocean Booking</a></li>
      <li>Current page</li>
    </ol>
  </nav> */
}.mds .mds-breadcrumb ol {
  list-style: none;
  flex-flow: row wrap;
  gap: 0;
  margin: 0;
  padding: 0;
}.mds .mds-breadcrumb ol li {
  display: flex;
  padding: 0;
}.mds .mds-breadcrumb ol a {
  text-decoration: none;
  color: var(--mds_foundations_breadcrumb_item_text-color);
  align-items: center;
}.mds .mds-breadcrumb ol a:hover {
  text-decoration: underline;
}.mds .mds-breadcrumb ol a mc-icon::part(icon) {
  fill: var(--mds_foundations_breadcrumb_item_text-color);
}.mds .mds-breadcrumb ol li::after {
  padding: 0 var(--mds_foundations_breadcrumb_item_padding);
  color: var(--mds_brand_appearance_neutral_weakest_text-color);
  content: "/";
}.mds .mds-breadcrumb ol li:last-child {
  color: var(--mds_foundations_breadcrumb_item_text-color);
}.mds .mds-breadcrumb ol li:last-child::after {
  content: "";
}.mds .mds-breadcrumb ol li:last-child {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-breadcrumb ol li:last-child {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-breadcrumb ol li:last-child {
  font-style: var(--mds_brand_typography_text_small_normal_font-style);
  font-weight: var(--mds_brand_typography_text_small_normal_font-weight);
}.mds .mds-breadcrumb ol .mds-breadcrumb__long-and-truncated {
  /* 
  @name: mds-breadcrumb__long-and-truncated
  @category: Navigation
  @usage: 
  It is recommended to limit the breadcrumb to 3-5 levels. If the website or application has a deeper hierarchy or is too long, then use truncation. Displaying more than 5 levels will make it hard for the user to comprehend the structure and in most cases there also starts to be a problem with space.
  When truncated the breadcrumb only shows the first and the last two levels and the levels in between is replaced by an ellipsis.
  @example:   
  <nav class="mds-breadcrumb" aria-label="breadcrumb example 1">
    <ol>
      <li><a href="#home">Home</a></li>
      <li>
        <a href="#data-integrations" title="Data Integrations</a>
      </li>
      <li><a href="#ocean-booking">Ocean Booking</a></li>
      <li class="mds-breadcrumb__long-and-truncated">API (Leverage the power of integrated data)</li>
    </ol>
  </nav> */
  flex: 0.5;
  display: block;
  max-width: max-content;
  padding-right: var(--mds_foundations_breadcrumb_truncated_item_padding);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}.mds .mds-breadcrumb ol .mds-breadcrumb__long-and-truncated a {
  display: inline;
}.mds .mds-breadcrumb ol .mds-breadcrumb__long-and-truncated::after {
  position: absolute;
  top: 0;
  right: 0;
}.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li {
  display: none;
}.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:first-child,
.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3),
.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2),
.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:last-child {
  display: flex;
}.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3) ~ li.mds-breadcrumb__long-and-truncated,
.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2) ~ li.mds-breadcrumb__long-and-truncated {
  display: block;
}.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3) a {
  display: none;
}.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3)::after {
  content: "...";
  padding: 0 var(--mds_foundations_breadcrumb_collapsed_padding) 0 0;
  color: var(--mds_foundations_breadcrumb_item_text-color);
}.mds .mds-breadcrumb.mds-breadcrumb__collapsed ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2)::before {
  content: "/";
  padding: 0 var(--mds_foundations_breadcrumb_item_padding);
  color: var(--mds_foundations_breadcrumb_separator_text-color);
}.mds .mds-breadcrumb {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-breadcrumb {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-breadcrumb {
  font-style: var(--mds_brand_typography_text_small_normal_font-style);
  font-weight: var(--mds_brand_typography_text_small_normal_font-weight);
}@media only screen and (max-width: 640px) {
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li {
    display: none;
  }
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:first-child,
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3),
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2),
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:last-child {
    display: flex;
  }
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3) ~ li.mds-breadcrumb__long-and-truncated,
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2) ~ li.mds-breadcrumb__long-and-truncated {
    display: block;
  }
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3) a {
    display: none;
  }
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3)::after {
    content: "...";
    padding: 0 var(--mds_foundations_breadcrumb_collapsed_padding) 0 0;
    color: var(--mds_foundations_breadcrumb_item_text-color);
  }
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2)::before {
    content: "/";
    padding: 0 var(--mds_foundations_breadcrumb_item_padding);
    color: var(--mds_foundations_breadcrumb_separator_text-color);
  }
}@container (max-width: 640px) {
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li {
    display: none;
  }
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:first-child,
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3),
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2),
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:last-child {
    display: flex;
  }
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3) ~ li.mds-breadcrumb__long-and-truncated,
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2) ~ li.mds-breadcrumb__long-and-truncated {
    display: block;
  }
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3) a {
    display: none;
  }
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(3)::after {
    content: "...";
    padding: 0 var(--mds_foundations_breadcrumb_collapsed_padding) 0 0;
    color: var(--mds_foundations_breadcrumb_item_text-color);
  }
  .mds .mds-breadcrumb ol:has(> :nth-last-child(4):nth-child(-n+20)) li:nth-last-child(2)::before {
    content: "/";
    padding: 0 var(--mds_foundations_breadcrumb_item_padding);
    color: var(--mds_foundations_breadcrumb_separator_text-color);
  }
}.mds {
  /*
  @description: 
  Tree Navigation used for organizing and navigating hierarchical content with expandable and collapsible navigation items.
  Tree navigation is styled using the mds-tree-nav class. It supports nested lists and can be used with details and summary elements for expandable sections. 
  The styles can be customized using the mds-tree-nav__active class for active links and mds-tree-nav__external class for external links.
  Tree navigation is designed to be accessible, with support for keyboard navigation and screen readers. 
  Tree navigation is often used in mc-side-bar or as part of a larger navigation system, allowing users to easily explore and navigate through complex structures.

  @basicExample:
  <nav class="mds-tree-nav" role="navigation" aria-label="side navigation">
    <ul>
      <li>
        <a href="#">Item 1</a>
      </li>
      <li>
        <a href="#">Item 2</a>
      </li>
    </ul>
  </nav>

  @advancedExample:
  <nav class="mds-tree-nav" role="navigation" aria-label="side navigation">
    <ul>
      <li>
        <details open>
            <summary>Item 1 (level 1)</summary>
            <ul>
              <li>
                <details>
                  <summary>Sub Item 1 (level 2)</summary>
                  <ul>
                    <li>
                      <details>
                        <summary>Item 1.1.1 (level 3)</summary>
                        <ul>
                          <li>
                            <details>
                              <summary>Item 1.1.1.1 (level 4)</summary>
                              <ul>
                                <li>
                                  <a href="#">Item 1.1.1.1.1 (level 5)</a>
                                </li>
                                <li>
                                  <a href="#">Item 1.1.1.1.2</a>
                                </li>
                                <li>
                                  <a href="#">Item 1.1.1.1.3</a>
                                </li>
                              </ul>
                            </details>
                          </li>
                          <li>
                            <a href="#">Item 1.1.1.2</a>
                          </li>
                          <li>
                            <a href="#">Item 1.1.1.3</a>
                          </li>
                        </ul>
                      </details>
                    </li>
                    <li>
                      <a href="#">Item 1.1.2</a>
                    </li>
                    <li>
                      <a href="#">Item 1.1.3</a>
                    </li>
                  </ul>
                </details>
              </li>
              <li>
                <a href="#" class="mds-tree-nav__active" aria-current="page">Sub Item 2</a>
              </li>
              <li>
                <a href="#">Sub Item 3</a>
              </li>
            </ul>
          </details>
      </li>
      <li>
        <a href="#">Item 2</a>
      </li>
      <li class="mds-tree-nav--separator"></li>
      <li>
        <a href="#" class="mds-tree-nav__external">External link</a>
      </li>
    </ul>
  </nav>
  */
}.mds .mds-tree-nav {
  /*
  @name: mds-tree-nav
  @category: Tree Navigation
  @usage:
  Use mds-tree-nav class to style tree navigation elements.
  @example:
  <nav class="mds-tree-nav" role="navigation" aria-label="side navigation">
    <ul>
      <li>
        <a href="#">Item 1</a>
      </li>
      <li>
        <a href="#">Item 2</a>
      </li>
    </ul>
  </nav>
  */
}.mds .mds-tree-nav ul,
.mds .mds-tree-nav ol {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}.mds .mds-tree-nav ul,
.mds .mds-tree-nav ol {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-tree-nav ul,
  .mds .mds-tree-nav ol {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-tree-nav ul,
.mds .mds-tree-nav ol {
  font-style: var(--mds_brand_typography_text_small_normal_font-style);
  font-weight: var(--mds_brand_typography_text_small_normal_font-weight);
}.mds .mds-tree-nav li {
  margin: 0;
  padding: 0;
}.mds .mds-tree-nav li.mds-tree-nav--separator {
  /*
  @name: mds-tree-nav--separator
  @category: Tree Navigation
  @usage:
  Use mds-tree-nav--separator class to create a separator line in tree navigation.
  @example:
  <li class="mds-tree-nav--separator"></li>
  */
  border-top: 1px solid var(--mds_brand_appearance_neutral_weak_border-color);
  margin: 10px 0;
  padding: 0;
}.mds .mds-tree-nav summary,
.mds .mds-tree-nav a {
  position: relative;
  border-radius: var(--mds_brand_border_medium_radius);
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 2px;
  overflow: hidden;
  padding: 6px 36px 6px 16px;
  text-decoration: var(--mds_foundations_link_stand-alone_text-decoration);
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}.mds .mds-tree-nav summary mc-icon,
.mds .mds-tree-nav a mc-icon {
  margin-right: 8px;
}.mds .mds-tree-nav summary mc-icon::part(icon),
.mds .mds-tree-nav a mc-icon::part(icon) {
  fill: var(--mds_brand_appearance_neutral_weak_text-color);
}.mds .mds-tree-nav summary:visited,
.mds .mds-tree-nav a:visited {
  color: var(--mds_brand_appearance_neutral_weak_text-color);
}.mds .mds-tree-nav summary:hover, .mds .mds-tree-nav summary:active,
.mds .mds-tree-nav a:hover,
.mds .mds-tree-nav a:active {
  background-color: var(--mds_brand_appearance_state_neutral_default_hover_background-color);
  color: var(--mds_brand_appearance_neutral_default_text-color);
}.mds .mds-tree-nav summary:hover mc-icon::part(icon), .mds .mds-tree-nav summary:active mc-icon::part(icon),
.mds .mds-tree-nav a:hover mc-icon::part(icon),
.mds .mds-tree-nav a:active mc-icon::part(icon) {
  fill: var(--mds_brand_appearance_neutral_default_text-color);
}.mds .mds-tree-nav summary:hover, .mds .mds-tree-nav summary:active,
.mds .mds-tree-nav a:hover,
.mds .mds-tree-nav a:active {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-tree-nav summary:hover, .mds .mds-tree-nav summary:active,
  .mds .mds-tree-nav a:hover,
  .mds .mds-tree-nav a:active {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-tree-nav summary:hover, .mds .mds-tree-nav summary:active,
.mds .mds-tree-nav a:hover,
.mds .mds-tree-nav a:active {
  font-style: var(--mds_brand_typography_text_small_normal_font-style);
  font-weight: var(--mds_brand_typography_text_small_normal_font-weight);
}.mds .mds-tree-nav summary:hover, .mds .mds-tree-nav summary:active,
.mds .mds-tree-nav a:hover,
.mds .mds-tree-nav a:active {
  color: var(--mds_brand_appearance_neutral_default_text-color);
}.mds .mds-tree-nav summary:focus-visible,
.mds .mds-tree-nav a:focus-visible {
  outline: 0;
  box-shadow: inset var(--mds_brand_appearance_state_focus_default_shadow_offset-x) var(--mds_brand_appearance_state_focus_default_shadow_offset-y) var(--mds_brand_appearance_state_focus_default_shadow_blur-radius) var(--mds_brand_appearance_state_focus_default_shadow_spread-radius) var(--mds_brand_appearance_state_focus_default_shadow_color);
}.mds .mds-tree-nav summary,
.mds .mds-tree-nav a {
  color: var(--mds_brand_appearance_neutral_weak_text-color);
}.mds .mds-tree-nav a.mds-tree-nav__active {
  /*
  @name: mds-tree-nav__active
  @category: Tree Navigation
  @usage:
  Use mds-tree-nav__active class to style currently active item in tree navigation.
  @example:
  <a href="#" class="mds-tree-nav__active" aria-current="page">
    Active Item
  </a>
  */
  color: var(--mds_brand_appearance_neutral_default_text-color);
  background-color: var(--mds_brand_appearance_state_neutral_default_hover_background-color);
}.mds .mds-tree-nav a.mds-tree-nav__active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 16px;
  width: 3px;
  background-color: var(--mds_brand_appearance_static_brand);
}.mds .mds-tree-nav a.mds-tree-nav__active mc-icon::part(icon) {
  fill: var(--mds_brand_appearance_neutral_default_text-color);
}.mds .mds-tree-nav a.mds-tree-nav__active {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-tree-nav a.mds-tree-nav__active {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-tree-nav a.mds-tree-nav__active {
  font-style: var(--mds_brand_typography_text_small_medium_font-style);
  font-weight: var(--mds_brand_typography_text_small_medium_font-weight);
}.mds .mds-tree-nav a.mds-tree-nav__external::after {
  /*
  @name: mds-tree-nav__external
  @category: Tree Navigation
  @usage:
  Use mds-tree-nav__external class to style external links in tree navigation with icon to the right.
  @example:
  <a href="#" class="mds-tree-nav__external">External Link</a>
  */
  margin-left: 16px;
  display: inline;
  height: 20px;
  width: 20px;
  background-color: var(--mds_brand_appearance_neutral_weak_text-color);
  content: "";
  -webkit-mask: url('data:image/svg+xml,<svg part="icon" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M15.293 4H12V3h3.293a1 1 0 0 1 .707.293l.707.707a1 1 0 0 1 .293.707V8h-1V4.707l-6.646 6.647-.708-.708L15.293 4zM3 7a2 2 0 0 1 2-2h4v1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-4h1v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"></path></svg>') no-repeat 50% 50%;
  mask: url('data:image/svg+xml,<svg part="icon" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M15.293 4H12V3h3.293a1 1 0 0 1 .707.293l.707.707a1 1 0 0 1 .293.707V8h-1V4.707l-6.646 6.647-.708-.708L15.293 4zM3 7a2 2 0 0 1 2-2h4v1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-4h1v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"></path></svg>') no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}.mds .mds-tree-nav summary {
  list-style-type: none;
  border-radius: var(--mds_brand_border_large_radius);
}.mds .mds-tree-nav summary::-webkit-details-marker {
  display: none;
}.mds .mds-tree-nav details[open] {
  color: var(--mds_brand_appearance_neutral_default_text-color);
}.mds .mds-tree-nav details > summary::after,
.mds .mds-tree-nav a.mds-tree-nav__external::after {
  position: absolute;
  right: 8px;
}.mds .mds-tree-nav details > summary::after {
  margin-left: 16px;
  height: 20px;
  width: 20px;
  background-color: var(--mds_brand_appearance_neutral_weak_text-color);
  content: "";
  -webkit-mask: url('data:image/svg+xml,<svg part="icon" id="mi-chevron-down" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M8.717 13.643l-5.1-6.071.766-.644L9.483 13h1.034l5.1-6.072.766.644-5.1 6.071a1 1 0 0 1-.766.357H9.483a1 1 0 0 1-.766-.357z"/></svg>') no-repeat 50% 50%;
  mask: url('data:image/svg+xml,<svg part="icon" id="mi-chevron-down" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M8.717 13.643l-5.1-6.071.766-.644L9.483 13h1.034l5.1-6.072.766.644-5.1 6.071a1 1 0 0 1-.766.357H9.483a1 1 0 0 1-.766-.357z"/></svg>') no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}.mds .mds-tree-nav details[open] > summary::after {
  -webkit-mask: url('data:image/svg+xml,<svg part="icon" id="mi-chevron-up" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10.517 7H9.483l-5.1 6.072-.766-.644 5.1-6.071A1 1 0 0 1 9.483 6h1.034a1 1 0 0 1 .766.357l5.1 6.071-.766.644L10.517 7z"/></svg>') no-repeat 50% 50%;
  mask: url('data:image/svg+xml,<svg part="icon" id="mi-chevron-up" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10.517 7H9.483l-5.1 6.072-.766-.644 5.1-6.071A1 1 0 0 1 9.483 6h1.034a1 1 0 0 1 .766.357l5.1 6.071-.766.644L10.517 7z"/></svg>') no-repeat 50% 50%;
}.mds .mds-tree-nav details[open] > summary {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-tree-nav details[open] > summary {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-tree-nav details[open] > summary {
  font-style: var(--mds_brand_typography_text_small_medium_font-style);
  font-weight: var(--mds_brand_typography_text_small_medium_font-weight);
}.mds .mds-tree-nav details > summary:hover::after {
  background-color: var(--mds_brand_appearance_neutral_default_text-color);
}.mds .mds-tree-nav summary:has(mc-badge),
.mds .mds-tree-nav a:has(mc-badge) {
  padding-right: 8px;
}.mds .mds-tree-nav summary:has(mc-badge[position=right]),
.mds .mds-tree-nav a:has(mc-badge[position=right]) {
  justify-content: space-between;
}.mds .mds-tree-nav summary mc-badge[position=right] {
  padding-right: 28px;
}.mds .mds-tree-nav .mds-tree-nav__external mc-badge[position=right] {
  padding-right: 28px;
}.mds .mds-tree-nav li details li a,
.mds .mds-tree-nav li details li summary {
  padding-left: 32px;
}.mds .mds-tree-nav li details li details li a,
.mds .mds-tree-nav li details li details li summary {
  padding-left: 48px;
}.mds .mds-tree-nav li details li details li details li a,
.mds .mds-tree-nav li details li details li details li summary {
  padding-left: 64px;
}.mds .mds-tree-nav li details li details li details li details li a,
.mds .mds-tree-nav li details li details li details li details li summary {
  padding-left: 80px;
}.mds .mds-tree-nav li details li details li details li details li details li a,
.mds .mds-tree-nav li details li details li details li details li details li summary {
  padding-left: 96px;
}.mds {
  /*
  @description: 
  Color system for the Maersk Design System.
  It includes a set of color appearances and variants that can be used for text, background, borders, and links.
  The color system is designed to be flexible, making it suitable for various design needs.
  It includes a set of predefined colors that can be used throughout the UI.

  @basicExample:
  <div class="mds">
    <div class="mds-neutral__text-color">Text with default color</div>
    <div class="mds-neutral__border-color">Box with default border</div>
    <div class="mds-neutral--weak__background-color mds-neutral--weak__on-background-color">Div with weak background and text that has the right contrast ratio for that background</div>
  </div>
  */
}.mds .mds-neutral__text-color {
  /* 
  @name: mds-neutral__text-color
  @category: Colors
  @usage: 
  Use mds-neutral__text-color class to get the neutral color for text.
  @example:
  <div class="mds"><div class="mds-neutral__text-color">text color in neutral appearance</div></div>
  */
}.mds .mds-neutral__text-color {
  color: var(--mds_brand_appearance_neutral_default_text-color);
}.mds .mds-neutral--weakest__text-color {
  /* 
  @name: mds-neutral--weakest__text-color
  @category: Colors
  @usage: 
  Use mds-neutral--weakest__text-color class to get the neutral weakest color for text.
  @example:
  <div class="mds"><div class="mds-neutral--weakest__text-color">text color in neutral weakest appearance</div></div>
  */
}.mds .mds-neutral--weakest__text-color {
  color: var(--mds_brand_appearance_neutral_weakest_text-color);
}.mds .mds-neutral--weak__text-color {
  /* 
  @name: mds-neutral--weak__text-color
  @category: Colors
  @usage: 
  Use mds-neutral--weak__text-color class to get the neutral weak color for text.
  @example:
  <div class="mds"><div class="mds-neutral--weak__text-color">text color in neutral weak appearance</div></div>
  */
}.mds .mds-neutral--weak__text-color {
  color: var(--mds_brand_appearance_neutral_weak_text-color);
}.mds .mds-neutral--strong__text-color {
  /* 
  @name: mds-neutral--strong__text-color
  @category: Colors
  @usage: 
  Use mds-neutral--strong__text-color class to get the neutral strong color for text.
  @example:
  <div class="mds"><div class="mds-neutral--strong__text-color">text color in neutral strong appearance</div></div>
  */
}.mds .mds-neutral--strong__text-color {
  color: var(--mds_brand_appearance_neutral_strong_text-color);
}.mds .mds-neutral--strongest__text-color {
  /* 
  @name: mds-neutral--strongest__text-color
  @category: Colors
  @usage: 
  Use mds-neutral--strongest__text-color class to get the neutral strongest color for text.
  @example:
  <div class="mds"><div class="mds-neutral--strongest__text-color">text color in neutral strongest appearance</div></div>
  */
}.mds .mds-neutral--strongest__text-color {
  color: var(--mds_brand_appearance_neutral_strongest_text-color);
}.mds .mds-neutral--inverse__text-color {
  /* 
  @name: mds-neutral--inverse__text-color
  @category: Colors
  @usage: 
  Use mds-neutral--inverse__text-color class to get the neutral inverse color for text.
  @example:
  <div class="mds"><div class="mds-neutral--inverse__text-color">text color in neutral inverse appearance</div></div>
  */
}.mds .mds-neutral--inverse__text-color {
  color: var(--mds_brand_appearance_neutral_inverse_text-color);
}.mds .mds-neutral--subtle__text-color {
  /* 
  @name: mds-neutral--subtle__text-color
  @category: Colors
  @usage: 
  Use mds-neutral--subtle__text-color class to get the neutral subtle color for text.
  @example:
  <div class="mds"><div class="mds-neutral--subtle__text-color">text color in neutral subtle appearance</div></div>
  */
}.mds .mds-neutral--subtle__text-color {
  color: var(--mds_brand_appearance_neutral_subtle_text-color);
}.mds .mds-neutral--alt__text-color {
  /* 
  @name: mds-neutral--alt__text-color
  @category: Colors
  @usage: 
  Use mds-neutral--alt__text-color class to get the neutral alt color for text.
  @example:
  <div class="mds"><div class="mds-neutral--alt__text-color">text color in neutral alt appearance</div></div>
  */
}.mds .mds-neutral--alt__text-color {
  color: var(--mds_brand_appearance_neutral_alt_text-color);
}.mds .mds-neutral__background-color {
  /* 
  @name: mds-neutral__background-color
  @category: Colors
  @usage: 
  Use mds-neutral__background-color class to get the neutral color for background.
  @example:
  <div class="mds"><div class="mds-neutral__background-color">background color in neutral appearance</div></div>
  */
}.mds .mds-neutral__background-color {
  background-color: var(--mds_brand_appearance_neutral_default_background-color);
}.mds .mds-neutral--weakest__background-color {
  /* 
  @name: mds-neutral--weakest__background-color
  @category: Colors
  @usage: 
  Use mds-neutral--weakest__background-color class to get the neutral weakest color for background.
  @example:
  <div class="mds"><div class="mds-neutral--weakest__background-color">background color in neutral weakest appearance</div></div>
  */
}.mds .mds-neutral--weakest__background-color {
  background-color: var(--mds_brand_appearance_neutral_weakest_background-color);
}.mds .mds-neutral--weak__background-color {
  /* 
  @name: mds-neutral--weak__background-color
  @category: Colors
  @usage: 
  Use mds-neutral--weak__background-color class to get the neutral weak color for background.
  @example:
  <div class="mds"><div class="mds-neutral--weak__background-color">background color in neutral weak appearance</div></div>
  */
}.mds .mds-neutral--weak__background-color {
  background-color: var(--mds_brand_appearance_neutral_weak_background-color);
}.mds .mds-neutral--strong__background-color {
  /* 
  @name: mds-neutral--strong__background-color
  @category: Colors
  @usage: 
  Use mds-neutral--strong__background-color class to get the neutral strong color for background.
  @example:
  <div class="mds"><div class="mds-neutral--strong__background-color">background color in neutral strong appearance</div></div>
  */
}.mds .mds-neutral--strong__background-color {
  background-color: var(--mds_brand_appearance_neutral_strong_background-color);
}.mds .mds-neutral--strongest__background-color {
  /* 
  @name: mds-neutral--strongest__background-color
  @category: Colors
  @usage: 
  Use mds-neutral--strongest__background-color class to get the neutral strongest color for background.
  @example:
  <div class="mds"><div class="mds-neutral--strongest__background-color">background color in neutral strongest appearance</div></div>
  */
}.mds .mds-neutral--strongest__background-color {
  background-color: var(--mds_brand_appearance_neutral_strongest_background-color);
}.mds .mds-neutral--inverse__background-color {
  /* 
  @name: mds-neutral--inverse__background-color
  @category: Colors
  @usage: 
  Use mds-neutral--inverse__background-color class to get the neutral inverse color for background.
  @example:
  <div class="mds"><div class="mds-neutral--inverse__background-color">background color in neutral inverse appearance</div></div>
  */
}.mds .mds-neutral--inverse__background-color {
  background-color: var(--mds_brand_appearance_neutral_inverse_background-color);
}.mds .mds-neutral--subtle__background-color {
  /* 
  @name: mds-neutral--subtle__background-color
  @category: Colors
  @usage: 
  Use mds-neutral--subtle__background-color class to get the neutral subtle color for background.
  @example:
  <div class="mds"><div class="mds-neutral--subtle__background-color">background color in neutral subtle appearance</div></div>
  */
}.mds .mds-neutral--subtle__background-color {
  background-color: var(--mds_brand_appearance_neutral_subtle_background-color);
}.mds .mds-neutral--alt__background-color {
  /* 
  @name: mds-neutral--alt__background-color
  @category: Colors
  @usage: 
  Use mds-neutral--alt__background-color class to get the neutral alt color for background.
  @example:
  <div class="mds"><div class="mds-neutral--alt__background-color">background color in neutral alt appearance</div></div>
  */
}.mds .mds-neutral--alt__background-color {
  background-color: var(--mds_brand_appearance_neutral_alt_background-color);
}.mds .mds-neutral__on-background-color {
  /* 
  @name: mds-neutral__on-background-color
  @category: Colors
  @usage: 
  Use mds-neutral__on-background-color class to get the neutral color for on-background.
  @example:
  <div class="mds"><div class="mds-neutral__on-background-color">on-background color in neutral appearance</div></div>
  */
}.mds .mds-neutral__on-background-color {
  color: var(--mds_brand_appearance_neutral_default_on-background-color);
}.mds .mds-neutral--weakest__on-background-color {
  /* 
  @name: mds-neutral--weakest__on-background-color
  @category: Colors
  @usage: 
  Use mds-neutral--weakest__on-background-color class to get the neutral weakest color for on-background.
  @example:
  <div class="mds"><div class="mds-neutral--weakest__on-background-color">on-background color in neutral weakest appearance</div></div>
  */
}.mds .mds-neutral--weakest__on-background-color {
  color: var(--mds_brand_appearance_neutral_weakest_on-background-color);
}.mds .mds-neutral--weak__on-background-color {
  /* 
  @name: mds-neutral--weak__on-background-color
  @category: Colors
  @usage: 
  Use mds-neutral--weak__on-background-color class to get the neutral weak color for on-background.
  @example:
  <div class="mds"><div class="mds-neutral--weak__on-background-color">on-background color in neutral weak appearance</div></div>
  */
}.mds .mds-neutral--weak__on-background-color {
  color: var(--mds_brand_appearance_neutral_weak_on-background-color);
}.mds .mds-neutral--strong__on-background-color {
  /* 
  @name: mds-neutral--strong__on-background-color
  @category: Colors
  @usage: 
  Use mds-neutral--strong__on-background-color class to get the neutral strong color for on-background.
  @example:
  <div class="mds"><div class="mds-neutral--strong__on-background-color">on-background color in neutral strong appearance</div></div>
  */
}.mds .mds-neutral--strong__on-background-color {
  color: var(--mds_brand_appearance_neutral_strong_on-background-color);
}.mds .mds-neutral--strongest__on-background-color {
  /* 
  @name: mds-neutral--strongest__on-background-color
  @category: Colors
  @usage: 
  Use mds-neutral--strongest__on-background-color class to get the neutral strongest color for on-background.
  @example:
  <div class="mds"><div class="mds-neutral--strongest__on-background-color">on-background color in neutral strongest appearance</div></div>
  */
}.mds .mds-neutral--strongest__on-background-color {
  color: var(--mds_brand_appearance_neutral_strongest_on-background-color);
}.mds .mds-neutral--inverse__on-background-color {
  /* 
  @name: mds-neutral--inverse__on-background-color
  @category: Colors
  @usage: 
  Use mds-neutral--inverse__on-background-color class to get the neutral inverse color for on-background.
  @example:
  <div class="mds"><div class="mds-neutral--inverse__on-background-color">on-background color in neutral inverse appearance</div></div>
  */
}.mds .mds-neutral--inverse__on-background-color {
  color: var(--mds_brand_appearance_neutral_inverse_on-background-color);
}.mds .mds-neutral--subtle__on-background-color {
  /* 
  @name: mds-neutral--subtle__on-background-color
  @category: Colors
  @usage: 
  Use mds-neutral--subtle__on-background-color class to get the neutral subtle color for on-background.
  @example:
  <div class="mds"><div class="mds-neutral--subtle__on-background-color">on-background color in neutral subtle appearance</div></div>
  */
}.mds .mds-neutral--subtle__on-background-color {
  color: var(--mds_brand_appearance_neutral_subtle_on-background-color);
}.mds .mds-neutral--alt__on-background-color {
  /* 
  @name: mds-neutral--alt__on-background-color
  @category: Colors
  @usage: 
  Use mds-neutral--alt__on-background-color class to get the neutral alt color for on-background.
  @example:
  <div class="mds"><div class="mds-neutral--alt__on-background-color">on-background color in neutral alt appearance</div></div>
  */
}.mds .mds-neutral--alt__on-background-color {
  color: var(--mds_brand_appearance_neutral_alt_on-background-color);
}.mds .mds-neutral__border-color {
  /* 
  @name: mds-neutral__border-color
  @category: Colors
  @usage: 
  Use mds-neutral__border-color class to get the neutral color for border.
  @example:
  <div class="mds"><div class="mds-neutral__border-color">border color in neutral appearance</div></div>
  */
}.mds .mds-neutral__border-color {
  border-color: var(--mds_brand_appearance_neutral_default_border-color);
}.mds .mds-neutral--weakest__border-color {
  /* 
  @name: mds-neutral--weakest__border-color
  @category: Colors
  @usage: 
  Use mds-neutral--weakest__border-color class to get the neutral weakest color for border.
  @example:
  <div class="mds"><div class="mds-neutral--weakest__border-color">border color in neutral weakest appearance</div></div>
  */
}.mds .mds-neutral--weakest__border-color {
  border-color: var(--mds_brand_appearance_neutral_weakest_border-color);
}.mds .mds-neutral--weak__border-color {
  /* 
  @name: mds-neutral--weak__border-color
  @category: Colors
  @usage: 
  Use mds-neutral--weak__border-color class to get the neutral weak color for border.
  @example:
  <div class="mds"><div class="mds-neutral--weak__border-color">border color in neutral weak appearance</div></div>
  */
}.mds .mds-neutral--weak__border-color {
  border-color: var(--mds_brand_appearance_neutral_weak_border-color);
}.mds .mds-neutral--strong__border-color {
  /* 
  @name: mds-neutral--strong__border-color
  @category: Colors
  @usage: 
  Use mds-neutral--strong__border-color class to get the neutral strong color for border.
  @example:
  <div class="mds"><div class="mds-neutral--strong__border-color">border color in neutral strong appearance</div></div>
  */
}.mds .mds-neutral--strong__border-color {
  border-color: var(--mds_brand_appearance_neutral_strong_border-color);
}.mds .mds-neutral--strongest__border-color {
  /* 
  @name: mds-neutral--strongest__border-color
  @category: Colors
  @usage: 
  Use mds-neutral--strongest__border-color class to get the neutral strongest color for border.
  @example:
  <div class="mds"><div class="mds-neutral--strongest__border-color">border color in neutral strongest appearance</div></div>
  */
}.mds .mds-neutral--strongest__border-color {
  border-color: var(--mds_brand_appearance_neutral_strongest_border-color);
}.mds .mds-neutral--inverse__border-color {
  /* 
  @name: mds-neutral--inverse__border-color
  @category: Colors
  @usage: 
  Use mds-neutral--inverse__border-color class to get the neutral inverse color for border.
  @example:
  <div class="mds"><div class="mds-neutral--inverse__border-color">border color in neutral inverse appearance</div></div>
  */
}.mds .mds-neutral--inverse__border-color {
  border-color: var(--mds_brand_appearance_neutral_inverse_border-color);
}.mds .mds-neutral--subtle__border-color {
  /* 
  @name: mds-neutral--subtle__border-color
  @category: Colors
  @usage: 
  Use mds-neutral--subtle__border-color class to get the neutral subtle color for border.
  @example:
  <div class="mds"><div class="mds-neutral--subtle__border-color">border color in neutral subtle appearance</div></div>
  */
}.mds .mds-neutral--subtle__border-color {
  border-color: var(--mds_brand_appearance_neutral_subtle_border-color);
}.mds .mds-neutral--alt__border-color {
  /* 
  @name: mds-neutral--alt__border-color
  @category: Colors
  @usage: 
  Use mds-neutral--alt__border-color class to get the neutral alt color for border.
  @example:
  <div class="mds"><div class="mds-neutral--alt__border-color">border color in neutral alt appearance</div></div>
  */
}.mds .mds-neutral--alt__border-color {
  border-color: var(--mds_brand_appearance_neutral_alt_border-color);
}.mds a.mds-neutral__text-color,
.mds a.mds-neutral__text-color:active,
.mds a.mds-neutral__text-color:visited {
  /* 
  @name: mds-neutral__text-color
  @category: Hyperlink
  @usage: 
  Use mds-neutral__text-color class to get hyperlink to have the neutral color.
  @example:
  <a class="mds-neutral__text-color">text color in neutral appearance</a>
  */
}.mds a.mds-neutral__text-color,
.mds a.mds-neutral__text-color:active,
.mds a.mds-neutral__text-color:visited {
  color: var(--mds_brand_appearance_neutral_default_text-color);
}.mds a.mds-neutral--weakest__text-color,
.mds a.mds-neutral--weakest__text-color:active,
.mds a.mds-neutral--weakest__text-color:visited {
  /* 
  @name: mds-neutral--weakest__text-color
  @category: Hyperlink
  @usage: 
  Use mds-neutral--weakest__text-color class to get hyperlink to have the neutral weakest color.
  @example:
  <a class="mds-neutral--weakest__text-color">text color in neutral weakest appearance</a>
  */
}.mds a.mds-neutral--weakest__text-color,
.mds a.mds-neutral--weakest__text-color:active,
.mds a.mds-neutral--weakest__text-color:visited {
  color: var(--mds_brand_appearance_neutral_weakest_text-color);
}.mds a.mds-neutral--weak__text-color,
.mds a.mds-neutral--weak__text-color:active,
.mds a.mds-neutral--weak__text-color:visited {
  /* 
  @name: mds-neutral--weak__text-color
  @category: Hyperlink
  @usage: 
  Use mds-neutral--weak__text-color class to get hyperlink to have the neutral weak color.
  @example:
  <a class="mds-neutral--weak__text-color">text color in neutral weak appearance</a>
  */
}.mds a.mds-neutral--weak__text-color,
.mds a.mds-neutral--weak__text-color:active,
.mds a.mds-neutral--weak__text-color:visited {
  color: var(--mds_brand_appearance_neutral_weak_text-color);
}.mds a.mds-neutral--strong__text-color,
.mds a.mds-neutral--strong__text-color:active,
.mds a.mds-neutral--strong__text-color:visited {
  /* 
  @name: mds-neutral--strong__text-color
  @category: Hyperlink
  @usage: 
  Use mds-neutral--strong__text-color class to get hyperlink to have the neutral strong color.
  @example:
  <a class="mds-neutral--strong__text-color">text color in neutral strong appearance</a>
  */
}.mds a.mds-neutral--strong__text-color,
.mds a.mds-neutral--strong__text-color:active,
.mds a.mds-neutral--strong__text-color:visited {
  color: var(--mds_brand_appearance_neutral_strong_text-color);
}.mds a.mds-neutral--strongest__text-color,
.mds a.mds-neutral--strongest__text-color:active,
.mds a.mds-neutral--strongest__text-color:visited {
  /* 
  @name: mds-neutral--strongest__text-color
  @category: Hyperlink
  @usage: 
  Use mds-neutral--strongest__text-color class to get hyperlink to have the neutral strongest color.
  @example:
  <a class="mds-neutral--strongest__text-color">text color in neutral strongest appearance</a>
  */
}.mds a.mds-neutral--strongest__text-color,
.mds a.mds-neutral--strongest__text-color:active,
.mds a.mds-neutral--strongest__text-color:visited {
  color: var(--mds_brand_appearance_neutral_strongest_text-color);
}.mds a.mds-neutral--inverse__text-color,
.mds a.mds-neutral--inverse__text-color:active,
.mds a.mds-neutral--inverse__text-color:visited {
  /* 
  @name: mds-neutral--inverse__text-color
  @category: Hyperlink
  @usage: 
  Use mds-neutral--inverse__text-color class to get hyperlink to have the neutral inverse color.
  @example:
  <a class="mds-neutral--inverse__text-color">text color in neutral inverse appearance</a>
  */
}.mds a.mds-neutral--inverse__text-color,
.mds a.mds-neutral--inverse__text-color:active,
.mds a.mds-neutral--inverse__text-color:visited {
  color: var(--mds_brand_appearance_neutral_inverse_text-color);
}.mds a.mds-neutral--subtle__text-color,
.mds a.mds-neutral--subtle__text-color:active,
.mds a.mds-neutral--subtle__text-color:visited {
  /* 
  @name: mds-neutral--subtle__text-color
  @category: Hyperlink
  @usage: 
  Use mds-neutral--subtle__text-color class to get hyperlink to have the neutral subtle color.
  @example:
  <a class="mds-neutral--subtle__text-color">text color in neutral subtle appearance</a>
  */
}.mds a.mds-neutral--subtle__text-color,
.mds a.mds-neutral--subtle__text-color:active,
.mds a.mds-neutral--subtle__text-color:visited {
  color: var(--mds_brand_appearance_neutral_subtle_text-color);
}.mds a.mds-neutral--alt__text-color,
.mds a.mds-neutral--alt__text-color:active,
.mds a.mds-neutral--alt__text-color:visited {
  /* 
  @name: mds-neutral--alt__text-color
  @category: Hyperlink
  @usage: 
  Use mds-neutral--alt__text-color class to get hyperlink to have the neutral alt color.
  @example:
  <a class="mds-neutral--alt__text-color">text color in neutral alt appearance</a>
  */
}.mds a.mds-neutral--alt__text-color,
.mds a.mds-neutral--alt__text-color:active,
.mds a.mds-neutral--alt__text-color:visited {
  color: var(--mds_brand_appearance_neutral_alt_text-color);
}.mds .mds-primary__text-color {
  /* 
  @name: mds-primary__text-color
  @category: Colors
  @usage: 
  Use mds-primary__text-color class to get the primary color for text.
  @example:
  <div class="mds"><div class="mds-primary__text-color">text color in primary appearance</div></div>
  */
}.mds .mds-primary__text-color {
  color: var(--mds_brand_appearance_primary_default_text-color);
}.mds .mds-primary--weak__text-color {
  /* 
  @name: mds-primary--weak__text-color
  @category: Colors
  @usage: 
  Use mds-primary--weak__text-color class to get the primary weak color for text.
  @example:
  <div class="mds"><div class="mds-primary--weak__text-color">text color in primary weak appearance</div></div>
  */
}.mds .mds-primary--weak__text-color {
  color: var(--mds_brand_appearance_primary_weak_text-color);
}.mds .mds-primary--subtle__text-color {
  /* 
  @name: mds-primary--subtle__text-color
  @category: Colors
  @usage: 
  Use mds-primary--subtle__text-color class to get the primary subtle color for text.
  @example:
  <div class="mds"><div class="mds-primary--subtle__text-color">text color in primary subtle appearance</div></div>
  */
}.mds .mds-primary--subtle__text-color {
  color: var(--mds_brand_appearance_primary_subtle_text-color);
}.mds .mds-primary__background-color {
  /* 
  @name: mds-primary__background-color
  @category: Colors
  @usage: 
  Use mds-primary__background-color class to get the primary color for background.
  @example:
  <div class="mds"><div class="mds-primary__background-color">background color in primary appearance</div></div>
  */
}.mds .mds-primary__background-color {
  background-color: var(--mds_brand_appearance_primary_default_background-color);
}.mds .mds-primary--weak__background-color {
  /* 
  @name: mds-primary--weak__background-color
  @category: Colors
  @usage: 
  Use mds-primary--weak__background-color class to get the primary weak color for background.
  @example:
  <div class="mds"><div class="mds-primary--weak__background-color">background color in primary weak appearance</div></div>
  */
}.mds .mds-primary--weak__background-color {
  background-color: var(--mds_brand_appearance_primary_weak_background-color);
}.mds .mds-primary--subtle__background-color {
  /* 
  @name: mds-primary--subtle__background-color
  @category: Colors
  @usage: 
  Use mds-primary--subtle__background-color class to get the primary subtle color for background.
  @example:
  <div class="mds"><div class="mds-primary--subtle__background-color">background color in primary subtle appearance</div></div>
  */
}.mds .mds-primary--subtle__background-color {
  background-color: var(--mds_brand_appearance_primary_subtle_background-color);
}.mds .mds-primary__on-background-color {
  /* 
  @name: mds-primary__on-background-color
  @category: Colors
  @usage: 
  Use mds-primary__on-background-color class to get the primary color for on-background.
  @example:
  <div class="mds"><div class="mds-primary__on-background-color">on-background color in primary appearance</div></div>
  */
}.mds .mds-primary__on-background-color {
  color: var(--mds_brand_appearance_primary_default_on-background-color);
}.mds .mds-primary--weak__on-background-color {
  /* 
  @name: mds-primary--weak__on-background-color
  @category: Colors
  @usage: 
  Use mds-primary--weak__on-background-color class to get the primary weak color for on-background.
  @example:
  <div class="mds"><div class="mds-primary--weak__on-background-color">on-background color in primary weak appearance</div></div>
  */
}.mds .mds-primary--weak__on-background-color {
  color: var(--mds_brand_appearance_primary_weak_on-background-color);
}.mds .mds-primary--subtle__on-background-color {
  /* 
  @name: mds-primary--subtle__on-background-color
  @category: Colors
  @usage: 
  Use mds-primary--subtle__on-background-color class to get the primary subtle color for on-background.
  @example:
  <div class="mds"><div class="mds-primary--subtle__on-background-color">on-background color in primary subtle appearance</div></div>
  */
}.mds .mds-primary--subtle__on-background-color {
  color: var(--mds_brand_appearance_primary_subtle_on-background-color);
}.mds .mds-primary__border-color {
  /* 
  @name: mds-primary__border-color
  @category: Colors
  @usage: 
  Use mds-primary__border-color class to get the primary color for border.
  @example:
  <div class="mds"><div class="mds-primary__border-color">border color in primary appearance</div></div>
  */
}.mds .mds-primary__border-color {
  border-color: var(--mds_brand_appearance_primary_default_border-color);
}.mds .mds-primary--weak__border-color {
  /* 
  @name: mds-primary--weak__border-color
  @category: Colors
  @usage: 
  Use mds-primary--weak__border-color class to get the primary weak color for border.
  @example:
  <div class="mds"><div class="mds-primary--weak__border-color">border color in primary weak appearance</div></div>
  */
}.mds .mds-primary--weak__border-color {
  border-color: var(--mds_brand_appearance_primary_weak_border-color);
}.mds .mds-primary--subtle__border-color {
  /* 
  @name: mds-primary--subtle__border-color
  @category: Colors
  @usage: 
  Use mds-primary--subtle__border-color class to get the primary subtle color for border.
  @example:
  <div class="mds"><div class="mds-primary--subtle__border-color">border color in primary subtle appearance</div></div>
  */
}.mds .mds-primary--subtle__border-color {
  border-color: var(--mds_brand_appearance_primary_subtle_border-color);
}.mds a.mds-primary__text-color,
.mds a.mds-primary__text-color:active,
.mds a.mds-primary__text-color:visited {
  /* 
  @name: mds-primary__text-color
  @category: Hyperlink
  @usage: 
  Use mds-primary__text-color class to get hyperlink to have the primary color.
  @example:
  <a class="mds-primary__text-color">text color in primary appearance</a>
  */
}.mds a.mds-primary__text-color,
.mds a.mds-primary__text-color:active,
.mds a.mds-primary__text-color:visited {
  color: var(--mds_brand_appearance_primary_default_text-color);
}.mds a.mds-primary--weak__text-color,
.mds a.mds-primary--weak__text-color:active,
.mds a.mds-primary--weak__text-color:visited {
  /* 
  @name: mds-primary--weak__text-color
  @category: Hyperlink
  @usage: 
  Use mds-primary--weak__text-color class to get hyperlink to have the primary weak color.
  @example:
  <a class="mds-primary--weak__text-color">text color in primary weak appearance</a>
  */
}.mds a.mds-primary--weak__text-color,
.mds a.mds-primary--weak__text-color:active,
.mds a.mds-primary--weak__text-color:visited {
  color: var(--mds_brand_appearance_primary_weak_text-color);
}.mds a.mds-primary--subtle__text-color,
.mds a.mds-primary--subtle__text-color:active,
.mds a.mds-primary--subtle__text-color:visited {
  /* 
  @name: mds-primary--subtle__text-color
  @category: Hyperlink
  @usage: 
  Use mds-primary--subtle__text-color class to get hyperlink to have the primary subtle color.
  @example:
  <a class="mds-primary--subtle__text-color">text color in primary subtle appearance</a>
  */
}.mds a.mds-primary--subtle__text-color,
.mds a.mds-primary--subtle__text-color:active,
.mds a.mds-primary--subtle__text-color:visited {
  color: var(--mds_brand_appearance_primary_subtle_text-color);
}.mds .mds-secondary__text-color {
  /* 
  @name: mds-secondary__text-color
  @category: Colors
  @usage: 
  Use mds-secondary__text-color class to get the secondary color for text.
  @example:
  <div class="mds"><div class="mds-secondary__text-color">text color in secondary appearance</div></div>
  */
}.mds .mds-secondary__text-color {
  color: var(--mds_brand_appearance_secondary_default_text-color);
}.mds .mds-secondary--weak__text-color {
  /* 
  @name: mds-secondary--weak__text-color
  @category: Colors
  @usage: 
  Use mds-secondary--weak__text-color class to get the secondary weak color for text.
  @example:
  <div class="mds"><div class="mds-secondary--weak__text-color">text color in secondary weak appearance</div></div>
  */
}.mds .mds-secondary--weak__text-color {
  color: var(--mds_brand_appearance_secondary_weak_text-color);
}.mds .mds-secondary--subtle__text-color {
  /* 
  @name: mds-secondary--subtle__text-color
  @category: Colors
  @usage: 
  Use mds-secondary--subtle__text-color class to get the secondary subtle color for text.
  @example:
  <div class="mds"><div class="mds-secondary--subtle__text-color">text color in secondary subtle appearance</div></div>
  */
}.mds .mds-secondary--subtle__text-color {
  color: var(--mds_brand_appearance_secondary_subtle_text-color);
}.mds .mds-secondary__background-color {
  /* 
  @name: mds-secondary__background-color
  @category: Colors
  @usage: 
  Use mds-secondary__background-color class to get the secondary color for background.
  @example:
  <div class="mds"><div class="mds-secondary__background-color">background color in secondary appearance</div></div>
  */
}.mds .mds-secondary__background-color {
  background-color: var(--mds_brand_appearance_secondary_default_background-color);
}.mds .mds-secondary--weak__background-color {
  /* 
  @name: mds-secondary--weak__background-color
  @category: Colors
  @usage: 
  Use mds-secondary--weak__background-color class to get the secondary weak color for background.
  @example:
  <div class="mds"><div class="mds-secondary--weak__background-color">background color in secondary weak appearance</div></div>
  */
}.mds .mds-secondary--weak__background-color {
  background-color: var(--mds_brand_appearance_secondary_weak_background-color);
}.mds .mds-secondary--subtle__background-color {
  /* 
  @name: mds-secondary--subtle__background-color
  @category: Colors
  @usage: 
  Use mds-secondary--subtle__background-color class to get the secondary subtle color for background.
  @example:
  <div class="mds"><div class="mds-secondary--subtle__background-color">background color in secondary subtle appearance</div></div>
  */
}.mds .mds-secondary--subtle__background-color {
  background-color: var(--mds_brand_appearance_secondary_subtle_background-color);
}.mds .mds-secondary__on-background-color {
  /* 
  @name: mds-secondary__on-background-color
  @category: Colors
  @usage: 
  Use mds-secondary__on-background-color class to get the secondary color for on-background.
  @example:
  <div class="mds"><div class="mds-secondary__on-background-color">on-background color in secondary appearance</div></div>
  */
}.mds .mds-secondary__on-background-color {
  color: var(--mds_brand_appearance_secondary_default_on-background-color);
}.mds .mds-secondary--weak__on-background-color {
  /* 
  @name: mds-secondary--weak__on-background-color
  @category: Colors
  @usage: 
  Use mds-secondary--weak__on-background-color class to get the secondary weak color for on-background.
  @example:
  <div class="mds"><div class="mds-secondary--weak__on-background-color">on-background color in secondary weak appearance</div></div>
  */
}.mds .mds-secondary--weak__on-background-color {
  color: var(--mds_brand_appearance_secondary_weak_on-background-color);
}.mds .mds-secondary--subtle__on-background-color {
  /* 
  @name: mds-secondary--subtle__on-background-color
  @category: Colors
  @usage: 
  Use mds-secondary--subtle__on-background-color class to get the secondary subtle color for on-background.
  @example:
  <div class="mds"><div class="mds-secondary--subtle__on-background-color">on-background color in secondary subtle appearance</div></div>
  */
}.mds .mds-secondary--subtle__on-background-color {
  color: var(--mds_brand_appearance_secondary_subtle_on-background-color);
}.mds .mds-secondary__border-color {
  /* 
  @name: mds-secondary__border-color
  @category: Colors
  @usage: 
  Use mds-secondary__border-color class to get the secondary color for border.
  @example:
  <div class="mds"><div class="mds-secondary__border-color">border color in secondary appearance</div></div>
  */
}.mds .mds-secondary__border-color {
  border-color: var(--mds_brand_appearance_secondary_default_border-color);
}.mds .mds-secondary--weak__border-color {
  /* 
  @name: mds-secondary--weak__border-color
  @category: Colors
  @usage: 
  Use mds-secondary--weak__border-color class to get the secondary weak color for border.
  @example:
  <div class="mds"><div class="mds-secondary--weak__border-color">border color in secondary weak appearance</div></div>
  */
}.mds .mds-secondary--weak__border-color {
  border-color: var(--mds_brand_appearance_secondary_weak_border-color);
}.mds .mds-secondary--subtle__border-color {
  /* 
  @name: mds-secondary--subtle__border-color
  @category: Colors
  @usage: 
  Use mds-secondary--subtle__border-color class to get the secondary subtle color for border.
  @example:
  <div class="mds"><div class="mds-secondary--subtle__border-color">border color in secondary subtle appearance</div></div>
  */
}.mds .mds-secondary--subtle__border-color {
  border-color: var(--mds_brand_appearance_secondary_subtle_border-color);
}.mds a.mds-secondary__text-color,
.mds a.mds-secondary__text-color:active,
.mds a.mds-secondary__text-color:visited {
  /* 
  @name: mds-secondary__text-color
  @category: Hyperlink
  @usage: 
  Use mds-secondary__text-color class to get hyperlink to have the secondary color.
  @example:
  <a class="mds-secondary__text-color">text color in secondary appearance</a>
  */
}.mds a.mds-secondary__text-color,
.mds a.mds-secondary__text-color:active,
.mds a.mds-secondary__text-color:visited {
  color: var(--mds_brand_appearance_secondary_default_text-color);
}.mds a.mds-secondary--weak__text-color,
.mds a.mds-secondary--weak__text-color:active,
.mds a.mds-secondary--weak__text-color:visited {
  /* 
  @name: mds-secondary--weak__text-color
  @category: Hyperlink
  @usage: 
  Use mds-secondary--weak__text-color class to get hyperlink to have the secondary weak color.
  @example:
  <a class="mds-secondary--weak__text-color">text color in secondary weak appearance</a>
  */
}.mds a.mds-secondary--weak__text-color,
.mds a.mds-secondary--weak__text-color:active,
.mds a.mds-secondary--weak__text-color:visited {
  color: var(--mds_brand_appearance_secondary_weak_text-color);
}.mds a.mds-secondary--subtle__text-color,
.mds a.mds-secondary--subtle__text-color:active,
.mds a.mds-secondary--subtle__text-color:visited {
  /* 
  @name: mds-secondary--subtle__text-color
  @category: Hyperlink
  @usage: 
  Use mds-secondary--subtle__text-color class to get hyperlink to have the secondary subtle color.
  @example:
  <a class="mds-secondary--subtle__text-color">text color in secondary subtle appearance</a>
  */
}.mds a.mds-secondary--subtle__text-color,
.mds a.mds-secondary--subtle__text-color:active,
.mds a.mds-secondary--subtle__text-color:visited {
  color: var(--mds_brand_appearance_secondary_subtle_text-color);
}.mds .mds-info__text-color {
  /* 
  @name: mds-info__text-color
  @category: Colors
  @usage: 
  Use mds-info__text-color class to get the info color for text.
  @example:
  <div class="mds"><div class="mds-info__text-color">text color in info appearance</div></div>
  */
}.mds .mds-info__text-color {
  color: var(--mds_brand_appearance_info_default_text-color);
}.mds .mds-info--weak__text-color {
  /* 
  @name: mds-info--weak__text-color
  @category: Colors
  @usage: 
  Use mds-info--weak__text-color class to get the info weak color for text.
  @example:
  <div class="mds"><div class="mds-info--weak__text-color">text color in info weak appearance</div></div>
  */
}.mds .mds-info--weak__text-color {
  color: var(--mds_brand_appearance_info_weak_text-color);
}.mds .mds-info--subtle__text-color {
  /* 
  @name: mds-info--subtle__text-color
  @category: Colors
  @usage: 
  Use mds-info--subtle__text-color class to get the info subtle color for text.
  @example:
  <div class="mds"><div class="mds-info--subtle__text-color">text color in info subtle appearance</div></div>
  */
}.mds .mds-info--subtle__text-color {
  color: var(--mds_brand_appearance_info_subtle_text-color);
}.mds .mds-info__background-color {
  /* 
  @name: mds-info__background-color
  @category: Colors
  @usage: 
  Use mds-info__background-color class to get the info color for background.
  @example:
  <div class="mds"><div class="mds-info__background-color">background color in info appearance</div></div>
  */
}.mds .mds-info__background-color {
  background-color: var(--mds_brand_appearance_info_default_background-color);
}.mds .mds-info--weak__background-color {
  /* 
  @name: mds-info--weak__background-color
  @category: Colors
  @usage: 
  Use mds-info--weak__background-color class to get the info weak color for background.
  @example:
  <div class="mds"><div class="mds-info--weak__background-color">background color in info weak appearance</div></div>
  */
}.mds .mds-info--weak__background-color {
  background-color: var(--mds_brand_appearance_info_weak_background-color);
}.mds .mds-info--subtle__background-color {
  /* 
  @name: mds-info--subtle__background-color
  @category: Colors
  @usage: 
  Use mds-info--subtle__background-color class to get the info subtle color for background.
  @example:
  <div class="mds"><div class="mds-info--subtle__background-color">background color in info subtle appearance</div></div>
  */
}.mds .mds-info--subtle__background-color {
  background-color: var(--mds_brand_appearance_info_subtle_background-color);
}.mds .mds-info__on-background-color {
  /* 
  @name: mds-info__on-background-color
  @category: Colors
  @usage: 
  Use mds-info__on-background-color class to get the info color for on-background.
  @example:
  <div class="mds"><div class="mds-info__on-background-color">on-background color in info appearance</div></div>
  */
}.mds .mds-info__on-background-color {
  color: var(--mds_brand_appearance_info_default_on-background-color);
}.mds .mds-info--weak__on-background-color {
  /* 
  @name: mds-info--weak__on-background-color
  @category: Colors
  @usage: 
  Use mds-info--weak__on-background-color class to get the info weak color for on-background.
  @example:
  <div class="mds"><div class="mds-info--weak__on-background-color">on-background color in info weak appearance</div></div>
  */
}.mds .mds-info--weak__on-background-color {
  color: var(--mds_brand_appearance_info_weak_on-background-color);
}.mds .mds-info--subtle__on-background-color {
  /* 
  @name: mds-info--subtle__on-background-color
  @category: Colors
  @usage: 
  Use mds-info--subtle__on-background-color class to get the info subtle color for on-background.
  @example:
  <div class="mds"><div class="mds-info--subtle__on-background-color">on-background color in info subtle appearance</div></div>
  */
}.mds .mds-info--subtle__on-background-color {
  color: var(--mds_brand_appearance_info_subtle_on-background-color);
}.mds .mds-info__border-color {
  /* 
  @name: mds-info__border-color
  @category: Colors
  @usage: 
  Use mds-info__border-color class to get the info color for border.
  @example:
  <div class="mds"><div class="mds-info__border-color">border color in info appearance</div></div>
  */
}.mds .mds-info__border-color {
  border-color: var(--mds_brand_appearance_info_default_border-color);
}.mds .mds-info--weak__border-color {
  /* 
  @name: mds-info--weak__border-color
  @category: Colors
  @usage: 
  Use mds-info--weak__border-color class to get the info weak color for border.
  @example:
  <div class="mds"><div class="mds-info--weak__border-color">border color in info weak appearance</div></div>
  */
}.mds .mds-info--weak__border-color {
  border-color: var(--mds_brand_appearance_info_weak_border-color);
}.mds .mds-info--subtle__border-color {
  /* 
  @name: mds-info--subtle__border-color
  @category: Colors
  @usage: 
  Use mds-info--subtle__border-color class to get the info subtle color for border.
  @example:
  <div class="mds"><div class="mds-info--subtle__border-color">border color in info subtle appearance</div></div>
  */
}.mds .mds-info--subtle__border-color {
  border-color: var(--mds_brand_appearance_info_subtle_border-color);
}.mds a.mds-info__text-color,
.mds a.mds-info__text-color:active,
.mds a.mds-info__text-color:visited {
  /* 
  @name: mds-info__text-color
  @category: Hyperlink
  @usage: 
  Use mds-info__text-color class to get hyperlink to have the info color.
  @example:
  <a class="mds-info__text-color">text color in info appearance</a>
  */
}.mds a.mds-info__text-color,
.mds a.mds-info__text-color:active,
.mds a.mds-info__text-color:visited {
  color: var(--mds_brand_appearance_info_default_text-color);
}.mds a.mds-info--weak__text-color,
.mds a.mds-info--weak__text-color:active,
.mds a.mds-info--weak__text-color:visited {
  /* 
  @name: mds-info--weak__text-color
  @category: Hyperlink
  @usage: 
  Use mds-info--weak__text-color class to get hyperlink to have the info weak color.
  @example:
  <a class="mds-info--weak__text-color">text color in info weak appearance</a>
  */
}.mds a.mds-info--weak__text-color,
.mds a.mds-info--weak__text-color:active,
.mds a.mds-info--weak__text-color:visited {
  color: var(--mds_brand_appearance_info_weak_text-color);
}.mds a.mds-info--subtle__text-color,
.mds a.mds-info--subtle__text-color:active,
.mds a.mds-info--subtle__text-color:visited {
  /* 
  @name: mds-info--subtle__text-color
  @category: Hyperlink
  @usage: 
  Use mds-info--subtle__text-color class to get hyperlink to have the info subtle color.
  @example:
  <a class="mds-info--subtle__text-color">text color in info subtle appearance</a>
  */
}.mds a.mds-info--subtle__text-color,
.mds a.mds-info--subtle__text-color:active,
.mds a.mds-info--subtle__text-color:visited {
  color: var(--mds_brand_appearance_info_subtle_text-color);
}.mds .mds-error__text-color {
  /* 
  @name: mds-error__text-color
  @category: Colors
  @usage: 
  Use mds-error__text-color class to get the error color for text.
  @example:
  <div class="mds"><div class="mds-error__text-color">text color in error appearance</div></div>
  */
}.mds .mds-error__text-color {
  color: var(--mds_brand_appearance_error_default_text-color);
}.mds .mds-error--weak__text-color {
  /* 
  @name: mds-error--weak__text-color
  @category: Colors
  @usage: 
  Use mds-error--weak__text-color class to get the error weak color for text.
  @example:
  <div class="mds"><div class="mds-error--weak__text-color">text color in error weak appearance</div></div>
  */
}.mds .mds-error--weak__text-color {
  color: var(--mds_brand_appearance_error_weak_text-color);
}.mds .mds-error--subtle__text-color {
  /* 
  @name: mds-error--subtle__text-color
  @category: Colors
  @usage: 
  Use mds-error--subtle__text-color class to get the error subtle color for text.
  @example:
  <div class="mds"><div class="mds-error--subtle__text-color">text color in error subtle appearance</div></div>
  */
}.mds .mds-error--subtle__text-color {
  color: var(--mds_brand_appearance_error_subtle_text-color);
}.mds .mds-error__background-color {
  /* 
  @name: mds-error__background-color
  @category: Colors
  @usage: 
  Use mds-error__background-color class to get the error color for background.
  @example:
  <div class="mds"><div class="mds-error__background-color">background color in error appearance</div></div>
  */
}.mds .mds-error__background-color {
  background-color: var(--mds_brand_appearance_error_default_background-color);
}.mds .mds-error--weak__background-color {
  /* 
  @name: mds-error--weak__background-color
  @category: Colors
  @usage: 
  Use mds-error--weak__background-color class to get the error weak color for background.
  @example:
  <div class="mds"><div class="mds-error--weak__background-color">background color in error weak appearance</div></div>
  */
}.mds .mds-error--weak__background-color {
  background-color: var(--mds_brand_appearance_error_weak_background-color);
}.mds .mds-error--subtle__background-color {
  /* 
  @name: mds-error--subtle__background-color
  @category: Colors
  @usage: 
  Use mds-error--subtle__background-color class to get the error subtle color for background.
  @example:
  <div class="mds"><div class="mds-error--subtle__background-color">background color in error subtle appearance</div></div>
  */
}.mds .mds-error--subtle__background-color {
  background-color: var(--mds_brand_appearance_error_subtle_background-color);
}.mds .mds-error__on-background-color {
  /* 
  @name: mds-error__on-background-color
  @category: Colors
  @usage: 
  Use mds-error__on-background-color class to get the error color for on-background.
  @example:
  <div class="mds"><div class="mds-error__on-background-color">on-background color in error appearance</div></div>
  */
}.mds .mds-error__on-background-color {
  color: var(--mds_brand_appearance_error_default_on-background-color);
}.mds .mds-error--weak__on-background-color {
  /* 
  @name: mds-error--weak__on-background-color
  @category: Colors
  @usage: 
  Use mds-error--weak__on-background-color class to get the error weak color for on-background.
  @example:
  <div class="mds"><div class="mds-error--weak__on-background-color">on-background color in error weak appearance</div></div>
  */
}.mds .mds-error--weak__on-background-color {
  color: var(--mds_brand_appearance_error_weak_on-background-color);
}.mds .mds-error--subtle__on-background-color {
  /* 
  @name: mds-error--subtle__on-background-color
  @category: Colors
  @usage: 
  Use mds-error--subtle__on-background-color class to get the error subtle color for on-background.
  @example:
  <div class="mds"><div class="mds-error--subtle__on-background-color">on-background color in error subtle appearance</div></div>
  */
}.mds .mds-error--subtle__on-background-color {
  color: var(--mds_brand_appearance_error_subtle_on-background-color);
}.mds .mds-error__border-color {
  /* 
  @name: mds-error__border-color
  @category: Colors
  @usage: 
  Use mds-error__border-color class to get the error color for border.
  @example:
  <div class="mds"><div class="mds-error__border-color">border color in error appearance</div></div>
  */
}.mds .mds-error__border-color {
  border-color: var(--mds_brand_appearance_error_default_border-color);
}.mds .mds-error--weak__border-color {
  /* 
  @name: mds-error--weak__border-color
  @category: Colors
  @usage: 
  Use mds-error--weak__border-color class to get the error weak color for border.
  @example:
  <div class="mds"><div class="mds-error--weak__border-color">border color in error weak appearance</div></div>
  */
}.mds .mds-error--weak__border-color {
  border-color: var(--mds_brand_appearance_error_weak_border-color);
}.mds .mds-error--subtle__border-color {
  /* 
  @name: mds-error--subtle__border-color
  @category: Colors
  @usage: 
  Use mds-error--subtle__border-color class to get the error subtle color for border.
  @example:
  <div class="mds"><div class="mds-error--subtle__border-color">border color in error subtle appearance</div></div>
  */
}.mds .mds-error--subtle__border-color {
  border-color: var(--mds_brand_appearance_error_subtle_border-color);
}.mds a.mds-error__text-color,
.mds a.mds-error__text-color:active,
.mds a.mds-error__text-color:visited {
  /* 
  @name: mds-error__text-color
  @category: Hyperlink
  @usage: 
  Use mds-error__text-color class to get hyperlink to have the error color.
  @example:
  <a class="mds-error__text-color">text color in error appearance</a>
  */
}.mds a.mds-error__text-color,
.mds a.mds-error__text-color:active,
.mds a.mds-error__text-color:visited {
  color: var(--mds_brand_appearance_error_default_text-color);
}.mds a.mds-error--weak__text-color,
.mds a.mds-error--weak__text-color:active,
.mds a.mds-error--weak__text-color:visited {
  /* 
  @name: mds-error--weak__text-color
  @category: Hyperlink
  @usage: 
  Use mds-error--weak__text-color class to get hyperlink to have the error weak color.
  @example:
  <a class="mds-error--weak__text-color">text color in error weak appearance</a>
  */
}.mds a.mds-error--weak__text-color,
.mds a.mds-error--weak__text-color:active,
.mds a.mds-error--weak__text-color:visited {
  color: var(--mds_brand_appearance_error_weak_text-color);
}.mds a.mds-error--subtle__text-color,
.mds a.mds-error--subtle__text-color:active,
.mds a.mds-error--subtle__text-color:visited {
  /* 
  @name: mds-error--subtle__text-color
  @category: Hyperlink
  @usage: 
  Use mds-error--subtle__text-color class to get hyperlink to have the error subtle color.
  @example:
  <a class="mds-error--subtle__text-color">text color in error subtle appearance</a>
  */
}.mds a.mds-error--subtle__text-color,
.mds a.mds-error--subtle__text-color:active,
.mds a.mds-error--subtle__text-color:visited {
  color: var(--mds_brand_appearance_error_subtle_text-color);
}.mds .mds-warning__text-color {
  /* 
  @name: mds-warning__text-color
  @category: Colors
  @usage: 
  Use mds-warning__text-color class to get the warning color for text.
  @example:
  <div class="mds"><div class="mds-warning__text-color">text color in warning appearance</div></div>
  */
}.mds .mds-warning__text-color {
  color: var(--mds_brand_appearance_warning_default_text-color);
}.mds .mds-warning--weak__text-color {
  /* 
  @name: mds-warning--weak__text-color
  @category: Colors
  @usage: 
  Use mds-warning--weak__text-color class to get the warning weak color for text.
  @example:
  <div class="mds"><div class="mds-warning--weak__text-color">text color in warning weak appearance</div></div>
  */
}.mds .mds-warning--weak__text-color {
  color: var(--mds_brand_appearance_warning_weak_text-color);
}.mds .mds-warning--subtle__text-color {
  /* 
  @name: mds-warning--subtle__text-color
  @category: Colors
  @usage: 
  Use mds-warning--subtle__text-color class to get the warning subtle color for text.
  @example:
  <div class="mds"><div class="mds-warning--subtle__text-color">text color in warning subtle appearance</div></div>
  */
}.mds .mds-warning--subtle__text-color {
  color: var(--mds_brand_appearance_warning_subtle_text-color);
}.mds .mds-warning__background-color {
  /* 
  @name: mds-warning__background-color
  @category: Colors
  @usage: 
  Use mds-warning__background-color class to get the warning color for background.
  @example:
  <div class="mds"><div class="mds-warning__background-color">background color in warning appearance</div></div>
  */
}.mds .mds-warning__background-color {
  background-color: var(--mds_brand_appearance_warning_default_background-color);
}.mds .mds-warning--weak__background-color {
  /* 
  @name: mds-warning--weak__background-color
  @category: Colors
  @usage: 
  Use mds-warning--weak__background-color class to get the warning weak color for background.
  @example:
  <div class="mds"><div class="mds-warning--weak__background-color">background color in warning weak appearance</div></div>
  */
}.mds .mds-warning--weak__background-color {
  background-color: var(--mds_brand_appearance_warning_weak_background-color);
}.mds .mds-warning--subtle__background-color {
  /* 
  @name: mds-warning--subtle__background-color
  @category: Colors
  @usage: 
  Use mds-warning--subtle__background-color class to get the warning subtle color for background.
  @example:
  <div class="mds"><div class="mds-warning--subtle__background-color">background color in warning subtle appearance</div></div>
  */
}.mds .mds-warning--subtle__background-color {
  background-color: var(--mds_brand_appearance_warning_subtle_background-color);
}.mds .mds-warning__on-background-color {
  /* 
  @name: mds-warning__on-background-color
  @category: Colors
  @usage: 
  Use mds-warning__on-background-color class to get the warning color for on-background.
  @example:
  <div class="mds"><div class="mds-warning__on-background-color">on-background color in warning appearance</div></div>
  */
}.mds .mds-warning__on-background-color {
  color: var(--mds_brand_appearance_warning_default_on-background-color);
}.mds .mds-warning--weak__on-background-color {
  /* 
  @name: mds-warning--weak__on-background-color
  @category: Colors
  @usage: 
  Use mds-warning--weak__on-background-color class to get the warning weak color for on-background.
  @example:
  <div class="mds"><div class="mds-warning--weak__on-background-color">on-background color in warning weak appearance</div></div>
  */
}.mds .mds-warning--weak__on-background-color {
  color: var(--mds_brand_appearance_warning_weak_on-background-color);
}.mds .mds-warning--subtle__on-background-color {
  /* 
  @name: mds-warning--subtle__on-background-color
  @category: Colors
  @usage: 
  Use mds-warning--subtle__on-background-color class to get the warning subtle color for on-background.
  @example:
  <div class="mds"><div class="mds-warning--subtle__on-background-color">on-background color in warning subtle appearance</div></div>
  */
}.mds .mds-warning--subtle__on-background-color {
  color: var(--mds_brand_appearance_warning_subtle_on-background-color);
}.mds .mds-warning__border-color {
  /* 
  @name: mds-warning__border-color
  @category: Colors
  @usage: 
  Use mds-warning__border-color class to get the warning color for border.
  @example:
  <div class="mds"><div class="mds-warning__border-color">border color in warning appearance</div></div>
  */
}.mds .mds-warning__border-color {
  border-color: var(--mds_brand_appearance_warning_default_border-color);
}.mds .mds-warning--weak__border-color {
  /* 
  @name: mds-warning--weak__border-color
  @category: Colors
  @usage: 
  Use mds-warning--weak__border-color class to get the warning weak color for border.
  @example:
  <div class="mds"><div class="mds-warning--weak__border-color">border color in warning weak appearance</div></div>
  */
}.mds .mds-warning--weak__border-color {
  border-color: var(--mds_brand_appearance_warning_weak_border-color);
}.mds .mds-warning--subtle__border-color {
  /* 
  @name: mds-warning--subtle__border-color
  @category: Colors
  @usage: 
  Use mds-warning--subtle__border-color class to get the warning subtle color for border.
  @example:
  <div class="mds"><div class="mds-warning--subtle__border-color">border color in warning subtle appearance</div></div>
  */
}.mds .mds-warning--subtle__border-color {
  border-color: var(--mds_brand_appearance_warning_subtle_border-color);
}.mds a.mds-warning__text-color,
.mds a.mds-warning__text-color:active,
.mds a.mds-warning__text-color:visited {
  /* 
  @name: mds-warning__text-color
  @category: Hyperlink
  @usage: 
  Use mds-warning__text-color class to get hyperlink to have the warning color.
  @example:
  <a class="mds-warning__text-color">text color in warning appearance</a>
  */
}.mds a.mds-warning__text-color,
.mds a.mds-warning__text-color:active,
.mds a.mds-warning__text-color:visited {
  color: var(--mds_brand_appearance_warning_default_text-color);
}.mds a.mds-warning--weak__text-color,
.mds a.mds-warning--weak__text-color:active,
.mds a.mds-warning--weak__text-color:visited {
  /* 
  @name: mds-warning--weak__text-color
  @category: Hyperlink
  @usage: 
  Use mds-warning--weak__text-color class to get hyperlink to have the warning weak color.
  @example:
  <a class="mds-warning--weak__text-color">text color in warning weak appearance</a>
  */
}.mds a.mds-warning--weak__text-color,
.mds a.mds-warning--weak__text-color:active,
.mds a.mds-warning--weak__text-color:visited {
  color: var(--mds_brand_appearance_warning_weak_text-color);
}.mds a.mds-warning--subtle__text-color,
.mds a.mds-warning--subtle__text-color:active,
.mds a.mds-warning--subtle__text-color:visited {
  /* 
  @name: mds-warning--subtle__text-color
  @category: Hyperlink
  @usage: 
  Use mds-warning--subtle__text-color class to get hyperlink to have the warning subtle color.
  @example:
  <a class="mds-warning--subtle__text-color">text color in warning subtle appearance</a>
  */
}.mds a.mds-warning--subtle__text-color,
.mds a.mds-warning--subtle__text-color:active,
.mds a.mds-warning--subtle__text-color:visited {
  color: var(--mds_brand_appearance_warning_subtle_text-color);
}.mds .mds-success__text-color {
  /* 
  @name: mds-success__text-color
  @category: Colors
  @usage: 
  Use mds-success__text-color class to get the success color for text.
  @example:
  <div class="mds"><div class="mds-success__text-color">text color in success appearance</div></div>
  */
}.mds .mds-success__text-color {
  color: var(--mds_brand_appearance_success_default_text-color);
}.mds .mds-success--weak__text-color {
  /* 
  @name: mds-success--weak__text-color
  @category: Colors
  @usage: 
  Use mds-success--weak__text-color class to get the success weak color for text.
  @example:
  <div class="mds"><div class="mds-success--weak__text-color">text color in success weak appearance</div></div>
  */
}.mds .mds-success--weak__text-color {
  color: var(--mds_brand_appearance_success_weak_text-color);
}.mds .mds-success--subtle__text-color {
  /* 
  @name: mds-success--subtle__text-color
  @category: Colors
  @usage: 
  Use mds-success--subtle__text-color class to get the success subtle color for text.
  @example:
  <div class="mds"><div class="mds-success--subtle__text-color">text color in success subtle appearance</div></div>
  */
}.mds .mds-success--subtle__text-color {
  color: var(--mds_brand_appearance_success_subtle_text-color);
}.mds .mds-success__background-color {
  /* 
  @name: mds-success__background-color
  @category: Colors
  @usage: 
  Use mds-success__background-color class to get the success color for background.
  @example:
  <div class="mds"><div class="mds-success__background-color">background color in success appearance</div></div>
  */
}.mds .mds-success__background-color {
  background-color: var(--mds_brand_appearance_success_default_background-color);
}.mds .mds-success--weak__background-color {
  /* 
  @name: mds-success--weak__background-color
  @category: Colors
  @usage: 
  Use mds-success--weak__background-color class to get the success weak color for background.
  @example:
  <div class="mds"><div class="mds-success--weak__background-color">background color in success weak appearance</div></div>
  */
}.mds .mds-success--weak__background-color {
  background-color: var(--mds_brand_appearance_success_weak_background-color);
}.mds .mds-success--subtle__background-color {
  /* 
  @name: mds-success--subtle__background-color
  @category: Colors
  @usage: 
  Use mds-success--subtle__background-color class to get the success subtle color for background.
  @example:
  <div class="mds"><div class="mds-success--subtle__background-color">background color in success subtle appearance</div></div>
  */
}.mds .mds-success--subtle__background-color {
  background-color: var(--mds_brand_appearance_success_subtle_background-color);
}.mds .mds-success__on-background-color {
  /* 
  @name: mds-success__on-background-color
  @category: Colors
  @usage: 
  Use mds-success__on-background-color class to get the success color for on-background.
  @example:
  <div class="mds"><div class="mds-success__on-background-color">on-background color in success appearance</div></div>
  */
}.mds .mds-success__on-background-color {
  color: var(--mds_brand_appearance_success_default_on-background-color);
}.mds .mds-success--weak__on-background-color {
  /* 
  @name: mds-success--weak__on-background-color
  @category: Colors
  @usage: 
  Use mds-success--weak__on-background-color class to get the success weak color for on-background.
  @example:
  <div class="mds"><div class="mds-success--weak__on-background-color">on-background color in success weak appearance</div></div>
  */
}.mds .mds-success--weak__on-background-color {
  color: var(--mds_brand_appearance_success_weak_on-background-color);
}.mds .mds-success--subtle__on-background-color {
  /* 
  @name: mds-success--subtle__on-background-color
  @category: Colors
  @usage: 
  Use mds-success--subtle__on-background-color class to get the success subtle color for on-background.
  @example:
  <div class="mds"><div class="mds-success--subtle__on-background-color">on-background color in success subtle appearance</div></div>
  */
}.mds .mds-success--subtle__on-background-color {
  color: var(--mds_brand_appearance_success_subtle_on-background-color);
}.mds .mds-success__border-color {
  /* 
  @name: mds-success__border-color
  @category: Colors
  @usage: 
  Use mds-success__border-color class to get the success color for border.
  @example:
  <div class="mds"><div class="mds-success__border-color">border color in success appearance</div></div>
  */
}.mds .mds-success__border-color {
  border-color: var(--mds_brand_appearance_success_default_border-color);
}.mds .mds-success--weak__border-color {
  /* 
  @name: mds-success--weak__border-color
  @category: Colors
  @usage: 
  Use mds-success--weak__border-color class to get the success weak color for border.
  @example:
  <div class="mds"><div class="mds-success--weak__border-color">border color in success weak appearance</div></div>
  */
}.mds .mds-success--weak__border-color {
  border-color: var(--mds_brand_appearance_success_weak_border-color);
}.mds .mds-success--subtle__border-color {
  /* 
  @name: mds-success--subtle__border-color
  @category: Colors
  @usage: 
  Use mds-success--subtle__border-color class to get the success subtle color for border.
  @example:
  <div class="mds"><div class="mds-success--subtle__border-color">border color in success subtle appearance</div></div>
  */
}.mds .mds-success--subtle__border-color {
  border-color: var(--mds_brand_appearance_success_subtle_border-color);
}.mds a.mds-success__text-color,
.mds a.mds-success__text-color:active,
.mds a.mds-success__text-color:visited {
  /* 
  @name: mds-success__text-color
  @category: Hyperlink
  @usage: 
  Use mds-success__text-color class to get hyperlink to have the success color.
  @example:
  <a class="mds-success__text-color">text color in success appearance</a>
  */
}.mds a.mds-success__text-color,
.mds a.mds-success__text-color:active,
.mds a.mds-success__text-color:visited {
  color: var(--mds_brand_appearance_success_default_text-color);
}.mds a.mds-success--weak__text-color,
.mds a.mds-success--weak__text-color:active,
.mds a.mds-success--weak__text-color:visited {
  /* 
  @name: mds-success--weak__text-color
  @category: Hyperlink
  @usage: 
  Use mds-success--weak__text-color class to get hyperlink to have the success weak color.
  @example:
  <a class="mds-success--weak__text-color">text color in success weak appearance</a>
  */
}.mds a.mds-success--weak__text-color,
.mds a.mds-success--weak__text-color:active,
.mds a.mds-success--weak__text-color:visited {
  color: var(--mds_brand_appearance_success_weak_text-color);
}.mds a.mds-success--subtle__text-color,
.mds a.mds-success--subtle__text-color:active,
.mds a.mds-success--subtle__text-color:visited {
  /* 
  @name: mds-success--subtle__text-color
  @category: Hyperlink
  @usage: 
  Use mds-success--subtle__text-color class to get hyperlink to have the success subtle color.
  @example:
  <a class="mds-success--subtle__text-color">text color in success subtle appearance</a>
  */
}.mds a.mds-success--subtle__text-color,
.mds a.mds-success--subtle__text-color:active,
.mds a.mds-success--subtle__text-color:visited {
  color: var(--mds_brand_appearance_success_subtle_text-color);
}.mds {
  /** 
   * These SASS variables are auto-generated out of their counter-part design-tokens 
   * during build of foundations using scripts/utils/generate-breakpoint-sass-variables.mjs 
   **/
  /*
  @description: 
  The building blocks for creating responsive layouts. Layout is divided into three distinct regions: Top Bar, Side Bar, and Page.
  It provides a flexible grid system that allows for easy arrangement of content in rows and columns, making it suitable for various screen sizes and orientations.
  It includes a set of utility classes for common layout patterns, such as centering content, full-width layouts, and responsive design.
  The layout is designed to be modular and reusable, allowing developers to create complex layouts with minimal effort.
  It also includes a set of responsive design utilities that adapt the layout based on the viewport size, ensuring a consistent user experience across devices.

  @basicExample:
  // Basic layout with a top bar, side bar, and main content area
  <body class="mds">
    <a href="#main-content" class="mds-skip-to">Skip to content</a>
    <a href="#footer" class="mds-skip-to">Skip to footer</a>
    <div class="mds-layout">
      <mc-top-bar product="Maersk Design System" productshort="MDS"></mc-top-bar>
      <mc-side-bar>
        <nav class="mds-tree-nav" role="navigation" aria-label="side navigation">
          <ul>
            <li>
              <a href="#">Item 1</a>
            </li>
            <li>
              <a href="#">Item 2</a>
            </li>
          </ul>
        </nav>
      </mc-side-bar>
      <main id="main-content" class="mds-page mds-container">
        <div class="mds-grid">
          <div class="cell">1</div>
          <div class="cell">2</div>
          <div class="cell">3</div>
          <div class="cell">4</div>
          <div class="cell">5</div>
          <div class="cell">6</div>
          <div class="cell">7</div>
          <div class="cell">8</div>
          <div class="cell">9</div>
          <div class="cell">10</div>
          <div class="cell">11</div>
          <div class="cell">12</div>
        </div>
        <footer id="footer">Footer</footer>
      </main>
    </div>
  </body>

  @advancedExample:
  // Advanced layout with top bar, side bar, sticky footer, and main content area in full-width content
  <body class="mds">
    <a href="#main-content" class="mds-skip-to">Skip to content</a>
    <a href="#footer" class="mds-skip-to">Skip to footer</a>
    <div class="mds-layout">
      <mc-top-bar product="Maersk Design System" productshort="MDS"></mc-top-bar>
      <mc-side-bar>
        <nav class="mds-tree-nav" role="navigation" aria-label="side navigation">
          <ul>
            <li>
              <a href="#">Item 1</a>
            </li>
            <li>
              <a href="#">Item 2</a>
            </li>
          </ul>
        </nav>
      </mc-side-bar>
      <main id="main-content" class="mds-page">
        <div class="mds-grid mds-full-width">
          <div class="cell">1</div>
          <div class="cell">2</div>
          <div class="cell">3</div>
          <div class="cell">4</div>
          <div class="cell">5</div>
          <div class="cell">6</div>
          <div class="cell">7</div>
          <div class="cell">8</div>
          <div class="cell">9</div>
          <div class="cell">10</div>
          <div class="cell">11</div>
          <div class="cell">12</div>
        </div>
      </main>
      <footer id="footer" class="mds-footer">Footer</footer>
    </div>
  </body>
  */
}.mds .mds-layout {
  /*  
  @name: mds-layout
  @category: Layout
  @usage: 
  Use mds-layout class to create a layout with a top bar, side bar, and main content area.
  @example:
  <body class="mds">
    <div class="mds-layout">...</div>
  </body>
  */
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: grid;
  transition: none;
}.mds .mds-layout mc-top-bar {
  /* 
  @name: mc-top-bar
  @category: Layout
  @usage: 
  Use mc-top-bar component to create a top bar in the layout.
  @example:
  <body class="mds">
    <div class="mds-layout">
      <mc-top-bar></mc-top-bar>
    </div>
  </body>
  */
  grid-area: top-bar;
  height: 64px;
  width: 100%;
  background-color: var(--mds_brand_appearance_neutral_default_background-color);
  border-bottom: 1px solid var(--mds_brand_appearance_neutral_weak_border-color);
}@media only screen and (max-width: 1024px) {
  .mds .mds-layout mc-top-bar {
    padding: 0 16px 0 52px;
  }
}@media only screen and (min-width: 1025px) {
  .mds .mds-layout mc-top-bar {
    padding: 0 24px 0 60px;
  }
}.mds .mds-layout mc-side-bar {
  /* 
  @name: mc-side-bar
  @category: Layout
  @usage: 
  Use mc-side-bar component to create a side bar in the layout.
  @example:
  <body class="mds">
    <div class="mds-layout">
      <mc-side-bar></mc-side-bar>
    </div>
  </body>
  */
  grid-area: side-bar;
}.mds .mds-layout mc-side-bar:not([open]) .mds-tree-nav {
  opacity: 0;
}@media only screen and (max-width: 1024px) {
  .mds .mds-layout mc-side-bar {
    height: 64px;
    left: 0;
    position: fixed;
    top: 0;
    width: 52px;
  }
}@media only screen and (min-width: 1025px) {
  .mds .mds-layout mc-side-bar {
    width: 100%;
    position: relative;
  }
}@media only screen and (min-width: 1025px) {
  .mds .mds-layout:has(mc-side-bar:not([open])) {
    grid-template-columns: 0 1fr;
  }
}.mds .mds-layout .mds-page {
  /* 
  @name: mds-page
  @category: Layout
  @usage: 
  Use mds-page class to create a page area in the layout that contains 
  - 12 columns grid system in 'md' breakpoint (for 1025px + viewport).
  - 6 columns grid system in 'sm' breakpoint (for 641px - 1024px viewport).
  - 2 columns grid system in 'xs' breakpoint (for 0px - 640px viewport).
  @example:
  <body class="mds">
    <div class="mds-layout">
      <main class="mds-page">
        <div class="mds-grid">...</div>
      </main>
    </div>
  </body>
  */
  grid-area: page;
  overflow-y: auto;
  height: auto;
}.mds .mds-layout .mds-page > .mds-grid {
  padding-left: 24px;
  padding-right: 24px;
}@media only screen and (max-width: 1024px) {
  .mds .mds-layout .mds-page > .mds-grid {
    margin: 24px 0;
  }
}@media only screen and (min-width: 1025px) {
  .mds .mds-layout .mds-page > .mds-grid {
    margin: 24px auto;
    max-width: 1080px;
  }
}.mds .mds-layout .mds-page .mds-grid.mds-full-width {
  max-width: none;
}@media only screen and (min-width: 1025px) {
  .mds .mds-layout .mds-page .mds-grid.mds-full-width {
    margin: 24px 0;
    max-width: none;
  }
}.mds .mds-layout .mds-footer {
  /* 
  @name: mds-footer
  @category: Layout
  @usage: 
  Use mds-footer class to create a footer in the layout.
  @example:
  <body class="mds">
    <div class="mds-layout">
      <footer class="mds-footer">Footer</footer>
    </div>
  </body>
  */
  grid-area: footer;
}.mds .mds-layout.mds-layout-no-side-bar {
  /* 
  @name: mds-layout-no-side-bar
  @category: Layout
  @usage: 
  Use mds-layout-no-side-bar class to create a layout without a side bar.
  @example:
  <body class="mds">
    <div class="mds-layout mds-layout-no-side-bar">...</div>
  </body>
  */
  grid-template-columns: 0 1fr;
}@media only screen and (max-width: 640px) {
  .mds .mds-layout.mds-layout-no-side-bar mc-top-bar {
    padding-left: 16px;
  }
}@media only screen and (min-width: 641px) {
  .mds .mds-layout.mds-layout-no-side-bar mc-top-bar {
    padding-left: 24px;
  }
}@media only screen and (max-width: 1024px) {
  .mds .mds-layout {
    grid-template-areas: "top-bar top-bar" "page page" "footer footer";
    grid-template-rows: 64px 1fr auto;
    grid-template-columns: 1fr;
  }
}@media only screen and (min-width: 1025px) {
  .mds .mds-layout {
    grid-template-areas: "top-bar top-bar" "side-bar page" "side-bar footer";
    grid-template-rows: 64px 1fr auto;
    grid-template-columns: 300px 1fr;
  }
  .mds .mds-layout:has(mc-side-bar:hover), .mds .mds-layout:has(mc-side-bar:focus-within) {
    will-change: grid-template-columns;
    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}.mds .mds-page-centered {
  /* 
  @name: mds-page-centered
  @category: Layout
  @usage: 
  Use mds-page-centered class to create a centered page area in the layout.
  @example:
  <body class="mds">
    <div class="mds-layout">
      <main class="mds-page-centered">
        <div class="mds-grid">...</div>
      </main>
    </div>
  </body>
  */
  padding-left: 24px;
  padding-right: 24px;
}@media only screen and (max-width: 1024px) {
  .mds .mds-page-centered {
    margin: 24px 0;
  }
}@media only screen and (min-width: 1025px) {
  .mds .mds-page-centered {
    margin: 24px auto;
    max-width: 1080px;
  }
}.mds .mds-page-full-width {
  /* 
  @name: mds-page-full-width
  @category: Layout
  @usage: 
  Use mds-page-full-width class to create a full-width page area in the layout.
  @example:
  <body class="mds">
    <div class="mds-layout">
      <main class="mds-page-full-width">
        <div class="mds-grid">...</div>
      </main>
    </div>
  </body>
  */
  max-width: none;
}@media only screen and (min-width: 1025px) {
  .mds .mds-page-full-width {
    margin: 24px 0;
    max-width: none;
  }
}.mds .mds-skip-to {
  /* 
  @name: mds-skip-to
  @category: Accessibility
  @usage: 
  Use mds-skip-to class to create a skip link that allows users to skip directly to the main content or footer of the page.
  @example:
  <body class="mds">
    <a href="#main-content" class="mds-skip-to">Skip to content</a>
    <a href="#footer" class="mds-skip-to">Skip to footer</a>
    <div class="mds-layout">
      <main id="main-content" class="mds-page mds-container">...</main>
      <footer id="footer" class="mds-footer">Footer</footer>
    </div>
  </body>
  */
  opacity: 0;
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  line-height: 86px;
  height: 86px;
  background-color: #f7f7f7;
  color: #0073ab;
  justify-content: center;
  outline: none;
}.mds .mds-skip-to:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
  box-shadow: none;
}.mds {
  /** 
   * These SASS variables are auto-generated out of their counter-part design-tokens 
   * during build of foundations using scripts/utils/generate-breakpoint-sass-variables.mjs 
   **/
  /*
  @description: 
  Base grid system utilities for layouts. 
  The grid system provides a flexible layout structure, allowing for consistent alignment and spacing of elements and is independent of container or viewport size. 
  It includes utilities for defining rows, columns, and spans, enabling developers to create complex layouts with ease.
  For responsive layouts, use the container-based grid system in _container-grid.css or viewport-based grid system in _viewport-grid.css.

  @basicExample:
  // Basic grid layout with: 12 columns grid system in all breakpoints. If you need a grid that depends on the screen size, use container grid.
  <main class="mds-container">
    <div class="mds-grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </main>

  @advancedExample:
  <div class="mds-container">
    <div class="mds-grid ">
      <div class="mds-grid-col-1">Cell 1 (always at the beginning)</div>
      <div class="mds-grid-col-1-reverse">Cell 2 (always at the end)</div>
    </div>
    <div class="mds-grid ">
      <div class="mds-grid-col-1 mds-grid-col-span-to-end mds-grid-row-1">Cell 1 (first row, spans over 12 columns)</div>
      <div>Cell 2 (second row, cell don't span)</div>
      <div class="mds-grid-col-1 mds-grid-col-span-to-end mds-grid-row-3">Cell 3 (third row, spans over 12 columns)</div>
    </div>
  </div>
  */
}.mds .mds-container .mds-grid {
  display: grid;
}.mds .mds-container .mds-grid .mds-grid-row-1 {
  /* 
  @name: mds-grid-row-1
  @category: Grid
  @usage: 
  Use mds-grid-row-1 class to position the cell in the 1 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 1 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 1;
}.mds .mds-container .mds-grid .mds-grid-row-2 {
  /* 
  @name: mds-grid-row-2
  @category: Grid
  @usage: 
  Use mds-grid-row-2 class to position the cell in the 2 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 2 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 2;
}.mds .mds-container .mds-grid .mds-grid-row-3 {
  /* 
  @name: mds-grid-row-3
  @category: Grid
  @usage: 
  Use mds-grid-row-3 class to position the cell in the 3 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 3 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 3;
}.mds .mds-container .mds-grid .mds-grid-row-4 {
  /* 
  @name: mds-grid-row-4
  @category: Grid
  @usage: 
  Use mds-grid-row-4 class to position the cell in the 4 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 4 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 4;
}.mds .mds-container .mds-grid .mds-grid-row-5 {
  /* 
  @name: mds-grid-row-5
  @category: Grid
  @usage: 
  Use mds-grid-row-5 class to position the cell in the 5 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 5 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 5;
}.mds .mds-container .mds-grid .mds-grid-row-6 {
  /* 
  @name: mds-grid-row-6
  @category: Grid
  @usage: 
  Use mds-grid-row-6 class to position the cell in the 6 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 6 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 6;
}.mds .mds-container .mds-grid .mds-grid-row-7 {
  /* 
  @name: mds-grid-row-7
  @category: Grid
  @usage: 
  Use mds-grid-row-7 class to position the cell in the 7 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 7 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 7;
}.mds .mds-container .mds-grid .mds-grid-row-8 {
  /* 
  @name: mds-grid-row-8
  @category: Grid
  @usage: 
  Use mds-grid-row-8 class to position the cell in the 8 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 8 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 8;
}.mds .mds-container .mds-grid .mds-grid-row-9 {
  /* 
  @name: mds-grid-row-9
  @category: Grid
  @usage: 
  Use mds-grid-row-9 class to position the cell in the 9 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 9 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 9;
}.mds .mds-container .mds-grid .mds-grid-row-10 {
  /* 
  @name: mds-grid-row-10
  @category: Grid
  @usage: 
  Use mds-grid-row-10 class to position the cell in the 10 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 10 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 10;
}.mds .mds-container .mds-grid .mds-grid-row-11 {
  /* 
  @name: mds-grid-row-11
  @category: Grid
  @usage: 
  Use mds-grid-row-11 class to position the cell in the 11 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 11 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 11;
}.mds .mds-container .mds-grid .mds-grid-row-12 {
  /* 
  @name: mds-grid-row-12
  @category: Grid
  @usage: 
  Use mds-grid-row-12 class to position the cell in the 12 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 12 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 12;
}.mds .mds-container .mds-grid .mds-grid-row-13 {
  /* 
  @name: mds-grid-row-13
  @category: Grid
  @usage: 
  Use mds-grid-row-13 class to position the cell in the 13 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 13 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 13;
}.mds .mds-container .mds-grid .mds-grid-row-14 {
  /* 
  @name: mds-grid-row-14
  @category: Grid
  @usage: 
  Use mds-grid-row-14 class to position the cell in the 14 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 14 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 14;
}.mds .mds-container .mds-grid .mds-grid-row-15 {
  /* 
  @name: mds-grid-row-15
  @category: Grid
  @usage: 
  Use mds-grid-row-15 class to position the cell in the 15 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 15 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 15;
}.mds .mds-container .mds-grid .mds-grid-row-16 {
  /* 
  @name: mds-grid-row-16
  @category: Grid
  @usage: 
  Use mds-grid-row-16 class to position the cell in the 16 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 16 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 16;
}.mds .mds-container .mds-grid .mds-grid-row-17 {
  /* 
  @name: mds-grid-row-17
  @category: Grid
  @usage: 
  Use mds-grid-row-17 class to position the cell in the 17 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 17 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 17;
}.mds .mds-container .mds-grid .mds-grid-row-18 {
  /* 
  @name: mds-grid-row-18
  @category: Grid
  @usage: 
  Use mds-grid-row-18 class to position the cell in the 18 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 18 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 18;
}.mds .mds-container .mds-grid .mds-grid-row-19 {
  /* 
  @name: mds-grid-row-19
  @category: Grid
  @usage: 
  Use mds-grid-row-19 class to position the cell in the 19 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 19 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 19;
}.mds .mds-container .mds-grid .mds-grid-row-20 {
  /* 
  @name: mds-grid-row-20
  @category: Grid
  @usage: 
  Use mds-grid-row-20 class to position the cell in the 20 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 20 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 20;
}.mds .mds-container .mds-grid .mds-grid-row-21 {
  /* 
  @name: mds-grid-row-21
  @category: Grid
  @usage: 
  Use mds-grid-row-21 class to position the cell in the 21 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 21 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 21;
}.mds .mds-container .mds-grid .mds-grid-row-22 {
  /* 
  @name: mds-grid-row-22
  @category: Grid
  @usage: 
  Use mds-grid-row-22 class to position the cell in the 22 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 22 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 22;
}.mds .mds-container .mds-grid .mds-grid-row-23 {
  /* 
  @name: mds-grid-row-23
  @category: Grid
  @usage: 
  Use mds-grid-row-23 class to position the cell in the 23 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 23 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 23;
}.mds .mds-container .mds-grid .mds-grid-row-24 {
  /* 
  @name: mds-grid-row-24
  @category: Grid
  @usage: 
  Use mds-grid-row-24 class to position the cell in the 24 row of the grid.
  The class is independent of the breakpoint, so when applied, the cell will only be in row 24 for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-row-1">Cell in row 1</div>
      <div class="mds-grid-row-2">Cell in row 2</div>
      ...
    </div>  
  </div> */
  grid-row-start: 24;
}.mds .mds-container .mds-grid .mds-grid-row-span-to-end {
  grid-row-end: -1;
}.mds .mds-container .mds-grid .mds-grid-row-span-to-start {
  grid-row-end: 1;
}.mds .mds-container .mds-grid .mds-grid-row-span-1 {
  grid-row-end: span 1;
}.mds .mds-container .mds-grid .mds-grid-row-span-2 {
  grid-row-end: span 2;
}.mds .mds-container .mds-grid .mds-grid-row-span-3 {
  grid-row-end: span 3;
}.mds .mds-container .mds-grid .mds-grid-row-span-4 {
  grid-row-end: span 4;
}.mds .mds-container .mds-grid .mds-grid-row-span-5 {
  grid-row-end: span 5;
}.mds .mds-container .mds-grid .mds-grid-row-span-6 {
  grid-row-end: span 6;
}.mds .mds-container .mds-grid .mds-grid-row-span-7 {
  grid-row-end: span 7;
}.mds .mds-container .mds-grid .mds-grid-row-span-8 {
  grid-row-end: span 8;
}.mds .mds-container .mds-grid .mds-grid-row-span-9 {
  grid-row-end: span 9;
}.mds .mds-container .mds-grid .mds-grid-row-span-10 {
  grid-row-end: span 10;
}.mds .mds-container .mds-grid .mds-grid-row-span-11 {
  grid-row-end: span 11;
}.mds .mds-container .mds-grid .mds-grid-row-span-12 {
  grid-row-end: span 12;
}.mds .mds-container .mds-grid .mds-grid-row-span-13 {
  grid-row-end: span 13;
}.mds .mds-container .mds-grid .mds-grid-row-span-14 {
  grid-row-end: span 14;
}.mds .mds-container .mds-grid .mds-grid-row-span-15 {
  grid-row-end: span 15;
}.mds .mds-container .mds-grid .mds-grid-row-span-16 {
  grid-row-end: span 16;
}.mds .mds-container .mds-grid .mds-grid-row-span-17 {
  grid-row-end: span 17;
}.mds .mds-container .mds-grid .mds-grid-row-span-18 {
  grid-row-end: span 18;
}.mds .mds-container .mds-grid .mds-grid-row-span-19 {
  grid-row-end: span 19;
}.mds .mds-container .mds-grid .mds-grid-row-span-20 {
  grid-row-end: span 20;
}.mds .mds-container .mds-grid .mds-grid-row-span-21 {
  grid-row-end: span 21;
}.mds .mds-container .mds-grid .mds-grid-row-span-22 {
  grid-row-end: span 22;
}.mds .mds-container .mds-grid .mds-grid-row-span-23 {
  grid-row-end: span 23;
}.mds .mds-container .mds-grid .mds-grid-row-span-24 {
  grid-row-end: span 24;
}.mds .mds-container .mds-grid .mds-grid-col-1 {
  /* 
  @name: mds-grid-col-1
  @category: Grid
  @usage: 
  Use mds-grid-col-1 class to position the cell in the 1 column of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 1 in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1">Cell in column 1 in all breakpoints</div>
      <div class="mds-grid-col-2">Cell in column 2 in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: 1;
}.mds .mds-container .mds-grid .mds-grid-col-2 {
  /* 
  @name: mds-grid-col-2
  @category: Grid
  @usage: 
  Use mds-grid-col-2 class to position the cell in the 2 column of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 2 in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1">Cell in column 1 in all breakpoints</div>
      <div class="mds-grid-col-2">Cell in column 2 in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: 2;
}.mds .mds-container .mds-grid .mds-grid-col-3 {
  /* 
  @name: mds-grid-col-3
  @category: Grid
  @usage: 
  Use mds-grid-col-3 class to position the cell in the 3 column of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 3 in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1">Cell in column 1 in all breakpoints</div>
      <div class="mds-grid-col-2">Cell in column 2 in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: 3;
}.mds .mds-container .mds-grid .mds-grid-col-4 {
  /* 
  @name: mds-grid-col-4
  @category: Grid
  @usage: 
  Use mds-grid-col-4 class to position the cell in the 4 column of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 4 in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1">Cell in column 1 in all breakpoints</div>
      <div class="mds-grid-col-2">Cell in column 2 in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: 4;
}.mds .mds-container .mds-grid .mds-grid-col-5 {
  /* 
  @name: mds-grid-col-5
  @category: Grid
  @usage: 
  Use mds-grid-col-5 class to position the cell in the 5 column of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 5 in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1">Cell in column 1 in all breakpoints</div>
      <div class="mds-grid-col-2">Cell in column 2 in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: 5;
}.mds .mds-container .mds-grid .mds-grid-col-6 {
  /* 
  @name: mds-grid-col-6
  @category: Grid
  @usage: 
  Use mds-grid-col-6 class to position the cell in the 6 column of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 6 in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1">Cell in column 1 in all breakpoints</div>
      <div class="mds-grid-col-2">Cell in column 2 in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: 6;
}.mds .mds-container .mds-grid .mds-grid-col-7 {
  /* 
  @name: mds-grid-col-7
  @category: Grid
  @usage: 
  Use mds-grid-col-7 class to position the cell in the 7 column of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 7 in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1">Cell in column 1 in all breakpoints</div>
      <div class="mds-grid-col-2">Cell in column 2 in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: 7;
}.mds .mds-container .mds-grid .mds-grid-col-8 {
  /* 
  @name: mds-grid-col-8
  @category: Grid
  @usage: 
  Use mds-grid-col-8 class to position the cell in the 8 column of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 8 in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1">Cell in column 1 in all breakpoints</div>
      <div class="mds-grid-col-2">Cell in column 2 in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: 8;
}.mds .mds-container .mds-grid .mds-grid-col-9 {
  /* 
  @name: mds-grid-col-9
  @category: Grid
  @usage: 
  Use mds-grid-col-9 class to position the cell in the 9 column of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 9 in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1">Cell in column 1 in all breakpoints</div>
      <div class="mds-grid-col-2">Cell in column 2 in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: 9;
}.mds .mds-container .mds-grid .mds-grid-col-10 {
  /* 
  @name: mds-grid-col-10
  @category: Grid
  @usage: 
  Use mds-grid-col-10 class to position the cell in the 10 column of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 10 in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1">Cell in column 1 in all breakpoints</div>
      <div class="mds-grid-col-2">Cell in column 2 in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: 10;
}.mds .mds-container .mds-grid .mds-grid-col-11 {
  /* 
  @name: mds-grid-col-11
  @category: Grid
  @usage: 
  Use mds-grid-col-11 class to position the cell in the 11 column of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 11 in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1">Cell in column 1 in all breakpoints</div>
      <div class="mds-grid-col-2">Cell in column 2 in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: 11;
}.mds .mds-container .mds-grid .mds-grid-col-12 {
  /* 
  @name: mds-grid-col-12
  @category: Grid
  @usage: 
  Use mds-grid-col-12 class to position the cell in the 12 column of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 12 in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1">Cell in column 1 in all breakpoints</div>
      <div class="mds-grid-col-2">Cell in column 2 in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: 12;
}.mds .mds-container .mds-grid .mds-grid-col-1-reverse {
  /* 
  @name: mds-grid-col-1-reverse
  @category: Grid
  @usage: 
  Use mds-grid-col-1-reverse class to position the cell in the reverse order in the 1 column (from the end) of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 1 from the end in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
      <div class="mds-grid-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: -2;
}.mds .mds-container .mds-grid .mds-grid-col-2-reverse {
  /* 
  @name: mds-grid-col-2-reverse
  @category: Grid
  @usage: 
  Use mds-grid-col-2-reverse class to position the cell in the reverse order in the 2 column (from the end) of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 2 from the end in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
      <div class="mds-grid-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: -3;
}.mds .mds-container .mds-grid .mds-grid-col-3-reverse {
  /* 
  @name: mds-grid-col-3-reverse
  @category: Grid
  @usage: 
  Use mds-grid-col-3-reverse class to position the cell in the reverse order in the 3 column (from the end) of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 3 from the end in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
      <div class="mds-grid-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: -4;
}.mds .mds-container .mds-grid .mds-grid-col-4-reverse {
  /* 
  @name: mds-grid-col-4-reverse
  @category: Grid
  @usage: 
  Use mds-grid-col-4-reverse class to position the cell in the reverse order in the 4 column (from the end) of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 4 from the end in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
      <div class="mds-grid-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: -5;
}.mds .mds-container .mds-grid .mds-grid-col-5-reverse {
  /* 
  @name: mds-grid-col-5-reverse
  @category: Grid
  @usage: 
  Use mds-grid-col-5-reverse class to position the cell in the reverse order in the 5 column (from the end) of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 5 from the end in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
      <div class="mds-grid-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: -6;
}.mds .mds-container .mds-grid .mds-grid-col-6-reverse {
  /* 
  @name: mds-grid-col-6-reverse
  @category: Grid
  @usage: 
  Use mds-grid-col-6-reverse class to position the cell in the reverse order in the 6 column (from the end) of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 6 from the end in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
      <div class="mds-grid-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: -7;
}.mds .mds-container .mds-grid .mds-grid-col-7-reverse {
  /* 
  @name: mds-grid-col-7-reverse
  @category: Grid
  @usage: 
  Use mds-grid-col-7-reverse class to position the cell in the reverse order in the 7 column (from the end) of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 7 from the end in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
      <div class="mds-grid-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: -8;
}.mds .mds-container .mds-grid .mds-grid-col-8-reverse {
  /* 
  @name: mds-grid-col-8-reverse
  @category: Grid
  @usage: 
  Use mds-grid-col-8-reverse class to position the cell in the reverse order in the 8 column (from the end) of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 8 from the end in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
      <div class="mds-grid-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: -9;
}.mds .mds-container .mds-grid .mds-grid-col-9-reverse {
  /* 
  @name: mds-grid-col-9-reverse
  @category: Grid
  @usage: 
  Use mds-grid-col-9-reverse class to position the cell in the reverse order in the 9 column (from the end) of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 9 from the end in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
      <div class="mds-grid-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: -10;
}.mds .mds-container .mds-grid .mds-grid-col-10-reverse {
  /* 
  @name: mds-grid-col-10-reverse
  @category: Grid
  @usage: 
  Use mds-grid-col-10-reverse class to position the cell in the reverse order in the 10 column (from the end) of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 10 from the end in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
      <div class="mds-grid-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: -11;
}.mds .mds-container .mds-grid .mds-grid-col-11-reverse {
  /* 
  @name: mds-grid-col-11-reverse
  @category: Grid
  @usage: 
  Use mds-grid-col-11-reverse class to position the cell in the reverse order in the 11 column (from the end) of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 11 from the end in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
      <div class="mds-grid-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: -12;
}.mds .mds-container .mds-grid .mds-grid-col-12-reverse {
  /* 
  @name: mds-grid-col-12-reverse
  @category: Grid
  @usage: 
  Use mds-grid-col-12-reverse class to position the cell in the reverse order in the 12 column (from the end) of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 12 from the end in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
      <div class="mds-grid-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: -13;
}.mds .mds-container .mds-grid .mds-grid-col-13-reverse {
  /* 
  @name: mds-grid-col-13-reverse
  @category: Grid
  @usage: 
  Use mds-grid-col-13-reverse class to position the cell in the reverse order in the 13 column (from the end) of the grid.
  The class is independent of the breakpoint, so when applied, the cell will persist to be in column 13 from the end in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
      <div class="mds-grid-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-start: -14;
}.mds .mds-container .mds-grid .mds-grid-col-span-to-end {
  grid-column-end: -1;
}.mds .mds-container .mds-grid .mds-grid-col-span-to-start {
  grid-column-end: 1;
}.mds .mds-container .mds-grid .mds-grid-col-span-1 {
  /* 
  @name: mds-grid-col-span-1
  @category: Grid
  @usage: 
  Use mds-grid-col-span-1 class to span multiple cells in your grid.
  The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1 mds-grid-col-span-2">Cell in column 1 that spans over 2 columns in all breakpoints</div>
      <div class="mds-grid-col-3 mds-grid-col-span-3">Cell in column 3 that spans over 3 columns in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-end: span 1;
}.mds .mds-container .mds-grid .mds-grid-col-span-2 {
  /* 
  @name: mds-grid-col-span-2
  @category: Grid
  @usage: 
  Use mds-grid-col-span-2 class to span multiple cells in your grid.
  The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1 mds-grid-col-span-2">Cell in column 1 that spans over 2 columns in all breakpoints</div>
      <div class="mds-grid-col-3 mds-grid-col-span-3">Cell in column 3 that spans over 3 columns in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-end: span 2;
}.mds .mds-container .mds-grid .mds-grid-col-span-3 {
  /* 
  @name: mds-grid-col-span-3
  @category: Grid
  @usage: 
  Use mds-grid-col-span-3 class to span multiple cells in your grid.
  The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1 mds-grid-col-span-2">Cell in column 1 that spans over 2 columns in all breakpoints</div>
      <div class="mds-grid-col-3 mds-grid-col-span-3">Cell in column 3 that spans over 3 columns in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-end: span 3;
}.mds .mds-container .mds-grid .mds-grid-col-span-4 {
  /* 
  @name: mds-grid-col-span-4
  @category: Grid
  @usage: 
  Use mds-grid-col-span-4 class to span multiple cells in your grid.
  The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1 mds-grid-col-span-2">Cell in column 1 that spans over 2 columns in all breakpoints</div>
      <div class="mds-grid-col-3 mds-grid-col-span-3">Cell in column 3 that spans over 3 columns in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-end: span 4;
}.mds .mds-container .mds-grid .mds-grid-col-span-5 {
  /* 
  @name: mds-grid-col-span-5
  @category: Grid
  @usage: 
  Use mds-grid-col-span-5 class to span multiple cells in your grid.
  The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1 mds-grid-col-span-2">Cell in column 1 that spans over 2 columns in all breakpoints</div>
      <div class="mds-grid-col-3 mds-grid-col-span-3">Cell in column 3 that spans over 3 columns in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-end: span 5;
}.mds .mds-container .mds-grid .mds-grid-col-span-6 {
  /* 
  @name: mds-grid-col-span-6
  @category: Grid
  @usage: 
  Use mds-grid-col-span-6 class to span multiple cells in your grid.
  The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1 mds-grid-col-span-2">Cell in column 1 that spans over 2 columns in all breakpoints</div>
      <div class="mds-grid-col-3 mds-grid-col-span-3">Cell in column 3 that spans over 3 columns in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-end: span 6;
}.mds .mds-container .mds-grid .mds-grid-col-span-7 {
  /* 
  @name: mds-grid-col-span-7
  @category: Grid
  @usage: 
  Use mds-grid-col-span-7 class to span multiple cells in your grid.
  The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1 mds-grid-col-span-2">Cell in column 1 that spans over 2 columns in all breakpoints</div>
      <div class="mds-grid-col-3 mds-grid-col-span-3">Cell in column 3 that spans over 3 columns in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-end: span 7;
}.mds .mds-container .mds-grid .mds-grid-col-span-8 {
  /* 
  @name: mds-grid-col-span-8
  @category: Grid
  @usage: 
  Use mds-grid-col-span-8 class to span multiple cells in your grid.
  The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1 mds-grid-col-span-2">Cell in column 1 that spans over 2 columns in all breakpoints</div>
      <div class="mds-grid-col-3 mds-grid-col-span-3">Cell in column 3 that spans over 3 columns in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-end: span 8;
}.mds .mds-container .mds-grid .mds-grid-col-span-9 {
  /* 
  @name: mds-grid-col-span-9
  @category: Grid
  @usage: 
  Use mds-grid-col-span-9 class to span multiple cells in your grid.
  The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1 mds-grid-col-span-2">Cell in column 1 that spans over 2 columns in all breakpoints</div>
      <div class="mds-grid-col-3 mds-grid-col-span-3">Cell in column 3 that spans over 3 columns in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-end: span 9;
}.mds .mds-container .mds-grid .mds-grid-col-span-10 {
  /* 
  @name: mds-grid-col-span-10
  @category: Grid
  @usage: 
  Use mds-grid-col-span-10 class to span multiple cells in your grid.
  The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1 mds-grid-col-span-2">Cell in column 1 that spans over 2 columns in all breakpoints</div>
      <div class="mds-grid-col-3 mds-grid-col-span-3">Cell in column 3 that spans over 3 columns in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-end: span 10;
}.mds .mds-container .mds-grid .mds-grid-col-span-11 {
  /* 
  @name: mds-grid-col-span-11
  @category: Grid
  @usage: 
  Use mds-grid-col-span-11 class to span multiple cells in your grid.
  The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1 mds-grid-col-span-2">Cell in column 1 that spans over 2 columns in all breakpoints</div>
      <div class="mds-grid-col-3 mds-grid-col-span-3">Cell in column 3 that spans over 3 columns in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-end: span 11;
}.mds .mds-container .mds-grid .mds-grid-col-span-12 {
  /* 
  @name: mds-grid-col-span-12
  @category: Grid
  @usage: 
  Use mds-grid-col-span-12 class to span multiple cells in your grid.
  The class is independent of the breakpoint, so when applied, the cells spanning will persist in all screen sizes.
  @example:
  <div class="mds-container">
    <div class="mds-grid">
      <div class="mds-grid-col-1 mds-grid-col-span-2">Cell in column 1 that spans over 2 columns in all breakpoints</div>
      <div class="mds-grid-col-3 mds-grid-col-span-3">Cell in column 3 that spans over 3 columns in all breakpoints</div>
      ...
    </div>
  </div> */
  grid-column-end: span 12;
}.mds .mds-container .mds-grid.mds-grid-cols-1 {
  /* 
  @name: mds-grid-cols-1
  @category: Grid
  @usage: 
  Use mds-grid-cols-1 class to define a grid with 1 columns. The default number of columns is 12, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-cols-1">
      Grid will have 1 number of columns in all breakpoints.
    </div>
  </div> */
  grid-template-columns: repeat(1, minmax(0, 1fr));
}.mds .mds-container .mds-grid.mds-grid-cols-2 {
  /* 
  @name: mds-grid-cols-2
  @category: Grid
  @usage: 
  Use mds-grid-cols-2 class to define a grid with 2 columns. The default number of columns is 12, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-cols-2">
      Grid will have 2 number of columns in all breakpoints.
    </div>
  </div> */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}.mds .mds-container .mds-grid.mds-grid-cols-3 {
  /* 
  @name: mds-grid-cols-3
  @category: Grid
  @usage: 
  Use mds-grid-cols-3 class to define a grid with 3 columns. The default number of columns is 12, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-cols-3">
      Grid will have 3 number of columns in all breakpoints.
    </div>
  </div> */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}.mds .mds-container .mds-grid.mds-grid-cols-4 {
  /* 
  @name: mds-grid-cols-4
  @category: Grid
  @usage: 
  Use mds-grid-cols-4 class to define a grid with 4 columns. The default number of columns is 12, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-cols-4">
      Grid will have 4 number of columns in all breakpoints.
    </div>
  </div> */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}.mds .mds-container .mds-grid.mds-grid-cols-5 {
  /* 
  @name: mds-grid-cols-5
  @category: Grid
  @usage: 
  Use mds-grid-cols-5 class to define a grid with 5 columns. The default number of columns is 12, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-cols-5">
      Grid will have 5 number of columns in all breakpoints.
    </div>
  </div> */
  grid-template-columns: repeat(5, minmax(0, 1fr));
}.mds .mds-container .mds-grid.mds-grid-cols-6 {
  /* 
  @name: mds-grid-cols-6
  @category: Grid
  @usage: 
  Use mds-grid-cols-6 class to define a grid with 6 columns. The default number of columns is 12, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-cols-6">
      Grid will have 6 number of columns in all breakpoints.
    </div>
  </div> */
  grid-template-columns: repeat(6, minmax(0, 1fr));
}.mds .mds-container .mds-grid.mds-grid-cols-7 {
  /* 
  @name: mds-grid-cols-7
  @category: Grid
  @usage: 
  Use mds-grid-cols-7 class to define a grid with 7 columns. The default number of columns is 12, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-cols-7">
      Grid will have 7 number of columns in all breakpoints.
    </div>
  </div> */
  grid-template-columns: repeat(7, minmax(0, 1fr));
}.mds .mds-container .mds-grid.mds-grid-cols-8 {
  /* 
  @name: mds-grid-cols-8
  @category: Grid
  @usage: 
  Use mds-grid-cols-8 class to define a grid with 8 columns. The default number of columns is 12, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-cols-8">
      Grid will have 8 number of columns in all breakpoints.
    </div>
  </div> */
  grid-template-columns: repeat(8, minmax(0, 1fr));
}.mds .mds-container .mds-grid.mds-grid-cols-9 {
  /* 
  @name: mds-grid-cols-9
  @category: Grid
  @usage: 
  Use mds-grid-cols-9 class to define a grid with 9 columns. The default number of columns is 12, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-cols-9">
      Grid will have 9 number of columns in all breakpoints.
    </div>
  </div> */
  grid-template-columns: repeat(9, minmax(0, 1fr));
}.mds .mds-container .mds-grid.mds-grid-cols-10 {
  /* 
  @name: mds-grid-cols-10
  @category: Grid
  @usage: 
  Use mds-grid-cols-10 class to define a grid with 10 columns. The default number of columns is 12, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-cols-10">
      Grid will have 10 number of columns in all breakpoints.
    </div>
  </div> */
  grid-template-columns: repeat(10, minmax(0, 1fr));
}.mds .mds-container .mds-grid.mds-grid-cols-11 {
  /* 
  @name: mds-grid-cols-11
  @category: Grid
  @usage: 
  Use mds-grid-cols-11 class to define a grid with 11 columns. The default number of columns is 12, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-cols-11">
      Grid will have 11 number of columns in all breakpoints.
    </div>
  </div> */
  grid-template-columns: repeat(11, minmax(0, 1fr));
}.mds .mds-container .mds-grid.mds-grid-cols-12 {
  /* 
  @name: mds-grid-cols-12
  @category: Grid
  @usage: 
  Use mds-grid-cols-12 class to define a grid with 12 columns. The default number of columns is 12, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the column layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-cols-12">
      Grid will have 12 number of columns in all breakpoints.
    </div>
  </div> */
  grid-template-columns: repeat(12, minmax(0, 1fr));
}.mds .mds-container .mds-grid.mds-grid-rows-1 {
  /* 
  @name: mds-grid-rows-1
  @category: Grid
  @usage: 
  Use mds-grid-rows-1 class to define a grid with 1 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-1">
      Grid will have 1 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(1, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-2 {
  /* 
  @name: mds-grid-rows-2
  @category: Grid
  @usage: 
  Use mds-grid-rows-2 class to define a grid with 2 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-2">
      Grid will have 2 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(2, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-3 {
  /* 
  @name: mds-grid-rows-3
  @category: Grid
  @usage: 
  Use mds-grid-rows-3 class to define a grid with 3 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-3">
      Grid will have 3 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(3, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-4 {
  /* 
  @name: mds-grid-rows-4
  @category: Grid
  @usage: 
  Use mds-grid-rows-4 class to define a grid with 4 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-4">
      Grid will have 4 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(4, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-5 {
  /* 
  @name: mds-grid-rows-5
  @category: Grid
  @usage: 
  Use mds-grid-rows-5 class to define a grid with 5 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-5">
      Grid will have 5 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(5, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-6 {
  /* 
  @name: mds-grid-rows-6
  @category: Grid
  @usage: 
  Use mds-grid-rows-6 class to define a grid with 6 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-6">
      Grid will have 6 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(6, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-7 {
  /* 
  @name: mds-grid-rows-7
  @category: Grid
  @usage: 
  Use mds-grid-rows-7 class to define a grid with 7 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-7">
      Grid will have 7 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(7, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-8 {
  /* 
  @name: mds-grid-rows-8
  @category: Grid
  @usage: 
  Use mds-grid-rows-8 class to define a grid with 8 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-8">
      Grid will have 8 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(8, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-9 {
  /* 
  @name: mds-grid-rows-9
  @category: Grid
  @usage: 
  Use mds-grid-rows-9 class to define a grid with 9 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-9">
      Grid will have 9 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(9, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-10 {
  /* 
  @name: mds-grid-rows-10
  @category: Grid
  @usage: 
  Use mds-grid-rows-10 class to define a grid with 10 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-10">
      Grid will have 10 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(10, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-11 {
  /* 
  @name: mds-grid-rows-11
  @category: Grid
  @usage: 
  Use mds-grid-rows-11 class to define a grid with 11 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-11">
      Grid will have 11 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(11, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-12 {
  /* 
  @name: mds-grid-rows-12
  @category: Grid
  @usage: 
  Use mds-grid-rows-12 class to define a grid with 12 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-12">
      Grid will have 12 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(12, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-13 {
  /* 
  @name: mds-grid-rows-13
  @category: Grid
  @usage: 
  Use mds-grid-rows-13 class to define a grid with 13 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-13">
      Grid will have 13 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(13, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-14 {
  /* 
  @name: mds-grid-rows-14
  @category: Grid
  @usage: 
  Use mds-grid-rows-14 class to define a grid with 14 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-14">
      Grid will have 14 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(14, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-15 {
  /* 
  @name: mds-grid-rows-15
  @category: Grid
  @usage: 
  Use mds-grid-rows-15 class to define a grid with 15 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-15">
      Grid will have 15 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(15, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-16 {
  /* 
  @name: mds-grid-rows-16
  @category: Grid
  @usage: 
  Use mds-grid-rows-16 class to define a grid with 16 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-16">
      Grid will have 16 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(16, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-17 {
  /* 
  @name: mds-grid-rows-17
  @category: Grid
  @usage: 
  Use mds-grid-rows-17 class to define a grid with 17 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-17">
      Grid will have 17 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(17, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-18 {
  /* 
  @name: mds-grid-rows-18
  @category: Grid
  @usage: 
  Use mds-grid-rows-18 class to define a grid with 18 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-18">
      Grid will have 18 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(18, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-19 {
  /* 
  @name: mds-grid-rows-19
  @category: Grid
  @usage: 
  Use mds-grid-rows-19 class to define a grid with 19 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-19">
      Grid will have 19 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(19, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-20 {
  /* 
  @name: mds-grid-rows-20
  @category: Grid
  @usage: 
  Use mds-grid-rows-20 class to define a grid with 20 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-20">
      Grid will have 20 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(20, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-21 {
  /* 
  @name: mds-grid-rows-21
  @category: Grid
  @usage: 
  Use mds-grid-rows-21 class to define a grid with 21 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-21">
      Grid will have 21 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(21, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-22 {
  /* 
  @name: mds-grid-rows-22
  @category: Grid
  @usage: 
  Use mds-grid-rows-22 class to define a grid with 22 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-22">
      Grid will have 22 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(22, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-23 {
  /* 
  @name: mds-grid-rows-23
  @category: Grid
  @usage: 
  Use mds-grid-rows-23 class to define a grid with 23 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-23">
      Grid will have 23 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(23, auto);
}.mds .mds-container .mds-grid.mds-grid-rows-24 {
  /* 
  @name: mds-grid-rows-24
  @category: Grid
  @usage: 
  Use mds-grid-rows-24 class to define a grid with 24 rows. The default number of rows is 1, but you can override it using this class.
  The class is independent of the breakpoint, so when applied, the row layout will be the same for all breakpoints.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-grid-rows-24">
      Grid will have 24 number of rows in all breakpoints.
    </div>
  </div> */
  grid-template-rows: repeat(24, auto);
}.mds {
  /** 
   * These SASS variables are auto-generated out of their counter-part design-tokens 
   * during build of foundations using scripts/utils/generate-breakpoint-sass-variables.mjs 
   **/
  /** 
   * These SASS variables are auto-generated out of their counter-part design-tokens 
   * during build of foundations using scripts/utils/generate-breakpoint-sass-variables.mjs 
   **/
  /** 
   * These SASS variables are auto-generated out of their counter-part design-tokens 
   * during build of foundations using scripts/utils/generate-breakpoint-sass-variables.mjs 
   **/
  /*
  @description: 
  Container and grid system utilities for responsive layouts with default gap. 
  Container-based grid respond to the width of the container rather than the entire viewport. 
  This enables more granular control over layout behavior—allowing components to adapt based on their immediate context. 
  It’s especially effective in complex or modular layouts where sections of a page need to remain visually consistent, even within wider screens.
  It includes utilities for defining rows, columns, and spans, enabling developers to create complex layouts with ease.

  @minimalExample:
  // Basic grid layout that is responsive to the width of parent container: 12 columns grid system in 'md' breakpoint (for 1025px + viewport), 6 columns grid system in 'sm' breakpoint (for 641px - 1024px viewport) and 2 columns grid system in 'xs' breakpoint (for 0px - 640px viewport) with default gap.
  <main class="mds-container">
    <div class="mds-grid ">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </main>

  @basicExample:
  // Basic grid layout that is responsive to the width of parent container: 12 columns grid system in 'md' breakpoint (for 1025px + viewport), 6 columns grid system in 'sm' breakpoint (for 641px - 1024px viewport) and 2 columns grid system in 'xs' breakpoint (for 0px - 640px viewport) with default gap. Example consists of 3 cells with different column spans in different breakpoints, and different number of rows in different breakpoints.
  <main class="mds-container">
    <div class="mds-grid mds-grid-md-rows-1 mds-grid-sm-rows-2 mds-grid-xs-rows-3">
      <div class="mds-grid-md-col-1 mds-grid-md-col-span-4 mds-grid-md-row-1 mds-grid-sm-col-1 mds-grid-sm-col-span-3 mds-grid-sm-row-1 mds-grid-xs-col-1 mds-grid-xs-col-span-2 mds-grid-xs-row-1">1</div>
      <div class="mds-grid-md-col-5 mds-grid-md-col-span-4 mds-grid-md-row-1 mds-grid-sm-col-4 mds-grid-sm-col-span-3 mds-grid-sm-row-1 mds-grid-xs-col-1 mds-grid-xs-col-span-2 mds-grid-xs-row-2">2</div>
      <div class="mds-grid-md-col-9 mds-grid-md-col-span-4 mds-grid-md-row-1 mds-grid-sm-col-1 mds-grid-sm-col-span-3 mds-grid-sm-row-2 mds-grid-xs-col-1 mds-grid-xs-col-span-2 mds-grid-xs-row-3">3</div>
    </div>
  </main>

  @advancedExample:
  // Advanced grid layout that is responsive to the width of parent container: 12 columns grid system in 'md' breakpoint (for 1025px + viewport), 6 columns grid system in 'sm' breakpoint (for 641px - 1024px viewport) and 2 columns grid system in 'xs' breakpoint (for 0px - 640px viewport) with default gap. Example consists of multiple cells with different column and row spans in different breakpoints, and different number of rows in different breakpoints.
  <main class="mds-container">
    <div class="mds-grid mds-grid-md-rows-3 mds-grid-sm-rows-5 mds-grid-xs-rows-7">
      <div class="mds-grid-md-col-1 mds-grid-md-col-span-3 mds-grid-md-row-1 mds-grid-md-row-span-3 mds-grid-sm-col-1 mds-grid-sm-col-span-6 mds-grid-sm-row-1 mds-grid-xs-col-1 mds-grid-xs-col-span-2 mds-grid-xs-row-1">1</div>
      <div class="mds-grid-md-col-4 mds-grid-md-col-span-6 mds-grid-md-row-1 mds-grid-sm-col-1 mds-grid-sm-col-span-3 mds-grid-sm-row-2 mds-grid-xs-col-1 mds-grid-xs-col-span-2 mds-grid-xs-row-2">2</div>
      <div class="mds-grid-md-col-10 mds-grid-md-col-span-3 mds-grid-md-row-1 mds-grid-sm-col-4 mds-grid-sm-col-span-3 mds-grid-sm-row-2 mds-grid-xs-col-1 mds-grid-xs-col-span-2 mds-grid-xs-row-4">3</div>
      <div class="mds-grid-md-col-4 mds-grid-md-col-span-3 mds-grid-md-row-2 mds-grid-sm-col-1 mds-grid-sm-col-span-3 mds-grid-sm-row-3 mds-grid-xs-col-1 mds-grid-xs-col-span-2 mds-grid-xs-row-3">4</div>
      <div class="mds-grid-md-col-7 mds-grid-md-col-span-3 mds-grid-md-row-2 mds-grid-sm-col-4 mds-grid-sm-col-span-3 mds-grid-sm-row-3 mds-grid-xs-col-1 mds-grid-xs-col-span-2 mds-grid-xs-row-5">5</div>
      <div class="mds-grid-md-col-10 mds-grid-md-col-span-3 mds-grid-md-row-2 mds-grid-sm-col-1 mds-grid-sm-col-span-3 mds-grid-sm-row-4 mds-grid-xs-col-1 mds-grid-xs-col-span-2 mds-grid-xs-row-6">6</div>
      <div class="mds-grid-md-col-4 mds-grid-md-col-span-2 mds-grid-md-row-3 mds-grid-sm-col-1 mds-grid-sm-col-span-2 mds-grid-sm-row-5 mds-grid-xs-col-1 mds-grid-xs-row-7">7</div>
      <div class="mds-grid-md-col-11 mds-grid-md-col-span-2 mds-grid-md-row-3 mds-grid-sm-col-5 mds-grid-sm-col-span-2 mds-grid-sm-row-5 mds-grid-xs-col-2 mds-grid-xs-row-7">8</div>
    </div>
  </main>
  */
}.mds .mds-container {
  /*
  @name: mds-container
  @category: Grid
  */
  container-type: inline-size;
  contain: layout;
  position: relative;
  z-index: 1;
}@container (max-width: 640px) {
  .mds .mds-container .mds-grid {
    gap: var(--mds_foundations_grid_xs_column-gap) var(--mds_foundations_grid_xs_row-gap);
    grid-template-columns: repeat(var(--mds_foundations_grid_xs_columns), minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-1 {
    /* 
    @name: mds-grid-xs-col-1
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-1 class to position the cell in the 1 column of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 1 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1">Cell in column 1 for xs breakpoint</div>
        <div class="mds-grid-xs-col-2">Cell in column 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 1;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-2 {
    /* 
    @name: mds-grid-xs-col-2
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-2 class to position the cell in the 2 column of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 2 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1">Cell in column 1 for xs breakpoint</div>
        <div class="mds-grid-xs-col-2">Cell in column 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 2;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-3 {
    /* 
    @name: mds-grid-xs-col-3
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-3 class to position the cell in the 3 column of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 3 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1">Cell in column 1 for xs breakpoint</div>
        <div class="mds-grid-xs-col-2">Cell in column 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 3;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-4 {
    /* 
    @name: mds-grid-xs-col-4
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-4 class to position the cell in the 4 column of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 4 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1">Cell in column 1 for xs breakpoint</div>
        <div class="mds-grid-xs-col-2">Cell in column 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 4;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-5 {
    /* 
    @name: mds-grid-xs-col-5
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-5 class to position the cell in the 5 column of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 5 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1">Cell in column 1 for xs breakpoint</div>
        <div class="mds-grid-xs-col-2">Cell in column 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 5;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-6 {
    /* 
    @name: mds-grid-xs-col-6
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-6 class to position the cell in the 6 column of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 6 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1">Cell in column 1 for xs breakpoint</div>
        <div class="mds-grid-xs-col-2">Cell in column 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 6;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-7 {
    /* 
    @name: mds-grid-xs-col-7
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-7 class to position the cell in the 7 column of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 7 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1">Cell in column 1 for xs breakpoint</div>
        <div class="mds-grid-xs-col-2">Cell in column 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 7;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-8 {
    /* 
    @name: mds-grid-xs-col-8
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-8 class to position the cell in the 8 column of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 8 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1">Cell in column 1 for xs breakpoint</div>
        <div class="mds-grid-xs-col-2">Cell in column 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 8;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-9 {
    /* 
    @name: mds-grid-xs-col-9
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-9 class to position the cell in the 9 column of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 9 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1">Cell in column 1 for xs breakpoint</div>
        <div class="mds-grid-xs-col-2">Cell in column 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 9;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-10 {
    /* 
    @name: mds-grid-xs-col-10
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-10 class to position the cell in the 10 column of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 10 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1">Cell in column 1 for xs breakpoint</div>
        <div class="mds-grid-xs-col-2">Cell in column 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 10;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-11 {
    /* 
    @name: mds-grid-xs-col-11
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-11 class to position the cell in the 11 column of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 11 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1">Cell in column 1 for xs breakpoint</div>
        <div class="mds-grid-xs-col-2">Cell in column 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 11;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-12 {
    /* 
    @name: mds-grid-xs-col-12
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-12 class to position the cell in the 12 column of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 12 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1">Cell in column 1 for xs breakpoint</div>
        <div class="mds-grid-xs-col-2">Cell in column 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 12;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-1-reverse {
    /* 
    @name: mds-grid-xs-col-1-reverse
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-1-reverse class to position the cell in the reverse order in the 1 column (from the end) in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 1 from the end for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-xs-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -2;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-2-reverse {
    /* 
    @name: mds-grid-xs-col-2-reverse
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-2-reverse class to position the cell in the reverse order in the 2 column (from the end) in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 2 from the end for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-xs-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -3;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-3-reverse {
    /* 
    @name: mds-grid-xs-col-3-reverse
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-3-reverse class to position the cell in the reverse order in the 3 column (from the end) in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 3 from the end for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-xs-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -4;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-4-reverse {
    /* 
    @name: mds-grid-xs-col-4-reverse
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-4-reverse class to position the cell in the reverse order in the 4 column (from the end) in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 4 from the end for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-xs-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -5;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-5-reverse {
    /* 
    @name: mds-grid-xs-col-5-reverse
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-5-reverse class to position the cell in the reverse order in the 5 column (from the end) in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 5 from the end for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-xs-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -6;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-6-reverse {
    /* 
    @name: mds-grid-xs-col-6-reverse
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-6-reverse class to position the cell in the reverse order in the 6 column (from the end) in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 6 from the end for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-xs-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -7;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-7-reverse {
    /* 
    @name: mds-grid-xs-col-7-reverse
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-7-reverse class to position the cell in the reverse order in the 7 column (from the end) in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 7 from the end for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-xs-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -8;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-8-reverse {
    /* 
    @name: mds-grid-xs-col-8-reverse
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-8-reverse class to position the cell in the reverse order in the 8 column (from the end) in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 8 from the end for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-xs-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -9;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-9-reverse {
    /* 
    @name: mds-grid-xs-col-9-reverse
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-9-reverse class to position the cell in the reverse order in the 9 column (from the end) in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 9 from the end for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-xs-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -10;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-10-reverse {
    /* 
    @name: mds-grid-xs-col-10-reverse
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-10-reverse class to position the cell in the reverse order in the 10 column (from the end) in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 10 from the end for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-xs-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -11;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-11-reverse {
    /* 
    @name: mds-grid-xs-col-11-reverse
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-11-reverse class to position the cell in the reverse order in the 11 column (from the end) in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 11 from the end for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-xs-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -12;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-12-reverse {
    /* 
    @name: mds-grid-xs-col-12-reverse
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-12-reverse class to position the cell in the reverse order in the 12 column (from the end) in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 12 from the end for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-xs-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -13;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-span-1 {
    /* 
    @name: mds-grid-xs-col-span-1
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-span-1 class to span multiple cells in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
    Use it in combination with mds-grid-xs-col-1 class to position the cell in the 1 column of the grid in xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1 mds-grid-xs-col-span-2">Cell in column 1 that spans over 2 columns in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 1;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-span-2 {
    /* 
    @name: mds-grid-xs-col-span-2
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-span-2 class to span multiple cells in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
    Use it in combination with mds-grid-xs-col-2 class to position the cell in the 2 column of the grid in xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1 mds-grid-xs-col-span-2">Cell in column 1 that spans over 2 columns in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 2;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-span-3 {
    /* 
    @name: mds-grid-xs-col-span-3
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-span-3 class to span multiple cells in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
    Use it in combination with mds-grid-xs-col-3 class to position the cell in the 3 column of the grid in xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1 mds-grid-xs-col-span-2">Cell in column 1 that spans over 2 columns in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 3;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-span-4 {
    /* 
    @name: mds-grid-xs-col-span-4
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-span-4 class to span multiple cells in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
    Use it in combination with mds-grid-xs-col-4 class to position the cell in the 4 column of the grid in xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1 mds-grid-xs-col-span-2">Cell in column 1 that spans over 2 columns in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 4;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-span-5 {
    /* 
    @name: mds-grid-xs-col-span-5
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-span-5 class to span multiple cells in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
    Use it in combination with mds-grid-xs-col-5 class to position the cell in the 5 column of the grid in xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1 mds-grid-xs-col-span-2">Cell in column 1 that spans over 2 columns in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 5;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-span-6 {
    /* 
    @name: mds-grid-xs-col-span-6
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-span-6 class to span multiple cells in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
    Use it in combination with mds-grid-xs-col-6 class to position the cell in the 6 column of the grid in xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1 mds-grid-xs-col-span-2">Cell in column 1 that spans over 2 columns in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 6;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-span-7 {
    /* 
    @name: mds-grid-xs-col-span-7
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-span-7 class to span multiple cells in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
    Use it in combination with mds-grid-xs-col-7 class to position the cell in the 7 column of the grid in xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1 mds-grid-xs-col-span-2">Cell in column 1 that spans over 2 columns in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 7;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-span-8 {
    /* 
    @name: mds-grid-xs-col-span-8
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-span-8 class to span multiple cells in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
    Use it in combination with mds-grid-xs-col-8 class to position the cell in the 8 column of the grid in xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1 mds-grid-xs-col-span-2">Cell in column 1 that spans over 2 columns in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 8;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-span-9 {
    /* 
    @name: mds-grid-xs-col-span-9
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-span-9 class to span multiple cells in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
    Use it in combination with mds-grid-xs-col-9 class to position the cell in the 9 column of the grid in xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1 mds-grid-xs-col-span-2">Cell in column 1 that spans over 2 columns in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 9;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-span-10 {
    /* 
    @name: mds-grid-xs-col-span-10
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-span-10 class to span multiple cells in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
    Use it in combination with mds-grid-xs-col-10 class to position the cell in the 10 column of the grid in xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1 mds-grid-xs-col-span-2">Cell in column 1 that spans over 2 columns in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 10;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-span-11 {
    /* 
    @name: mds-grid-xs-col-span-11
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-span-11 class to span multiple cells in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
    Use it in combination with mds-grid-xs-col-11 class to position the cell in the 11 column of the grid in xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1 mds-grid-xs-col-span-2">Cell in column 1 that spans over 2 columns in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 11;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-col-span-12 {
    /* 
    @name: mds-grid-xs-col-span-12
    @category: Grid
    @usage: 
    Use mds-grid-xs-col-span-12 class to span multiple cells in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for xs breakpoint.
    Use it in combination with mds-grid-xs-col-12 class to position the cell in the 12 column of the grid in xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-col-1 mds-grid-xs-col-span-2">Cell in column 1 that spans over 2 columns in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 12;
  }
  .mds .mds-container .mds-grid.mds-grid-xs-cols-1 {
    /* 
    @name: mds-grid-xs-cols-1
    @category: Grid
    @usage: 
    Use mds-grid-xs-cols-1 class to define a grid with 1 columns for xs breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-cols-1">
        Grid will have 1 number of columns in xs breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-xs-cols-2 {
    /* 
    @name: mds-grid-xs-cols-2
    @category: Grid
    @usage: 
    Use mds-grid-xs-cols-2 class to define a grid with 2 columns for xs breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-cols-2">
        Grid will have 2 number of columns in xs breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-xs-cols-3 {
    /* 
    @name: mds-grid-xs-cols-3
    @category: Grid
    @usage: 
    Use mds-grid-xs-cols-3 class to define a grid with 3 columns for xs breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-cols-3">
        Grid will have 3 number of columns in xs breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-xs-cols-4 {
    /* 
    @name: mds-grid-xs-cols-4
    @category: Grid
    @usage: 
    Use mds-grid-xs-cols-4 class to define a grid with 4 columns for xs breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-cols-4">
        Grid will have 4 number of columns in xs breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-xs-cols-5 {
    /* 
    @name: mds-grid-xs-cols-5
    @category: Grid
    @usage: 
    Use mds-grid-xs-cols-5 class to define a grid with 5 columns for xs breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-cols-5">
        Grid will have 5 number of columns in xs breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-xs-cols-6 {
    /* 
    @name: mds-grid-xs-cols-6
    @category: Grid
    @usage: 
    Use mds-grid-xs-cols-6 class to define a grid with 6 columns for xs breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-cols-6">
        Grid will have 6 number of columns in xs breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-xs-cols-7 {
    /* 
    @name: mds-grid-xs-cols-7
    @category: Grid
    @usage: 
    Use mds-grid-xs-cols-7 class to define a grid with 7 columns for xs breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-cols-7">
        Grid will have 7 number of columns in xs breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-xs-cols-8 {
    /* 
    @name: mds-grid-xs-cols-8
    @category: Grid
    @usage: 
    Use mds-grid-xs-cols-8 class to define a grid with 8 columns for xs breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-cols-8">
        Grid will have 8 number of columns in xs breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-xs-cols-9 {
    /* 
    @name: mds-grid-xs-cols-9
    @category: Grid
    @usage: 
    Use mds-grid-xs-cols-9 class to define a grid with 9 columns for xs breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-cols-9">
        Grid will have 9 number of columns in xs breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-xs-cols-10 {
    /* 
    @name: mds-grid-xs-cols-10
    @category: Grid
    @usage: 
    Use mds-grid-xs-cols-10 class to define a grid with 10 columns for xs breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-cols-10">
        Grid will have 10 number of columns in xs breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-xs-cols-11 {
    /* 
    @name: mds-grid-xs-cols-11
    @category: Grid
    @usage: 
    Use mds-grid-xs-cols-11 class to define a grid with 11 columns for xs breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-cols-11">
        Grid will have 11 number of columns in xs breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-xs-cols-12 {
    /* 
    @name: mds-grid-xs-cols-12
    @category: Grid
    @usage: 
    Use mds-grid-xs-cols-12 class to define a grid with 12 columns for xs breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-cols-12">
        Grid will have 12 number of columns in xs breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-1 {
    /* 
    @name: mds-grid-xs-row-1
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-1 class to position the cell in the 1 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 1 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 1;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-2 {
    /* 
    @name: mds-grid-xs-row-2
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-2 class to position the cell in the 2 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 2 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 2;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-3 {
    /* 
    @name: mds-grid-xs-row-3
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-3 class to position the cell in the 3 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 3 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 3;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-4 {
    /* 
    @name: mds-grid-xs-row-4
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-4 class to position the cell in the 4 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 4 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 4;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-5 {
    /* 
    @name: mds-grid-xs-row-5
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-5 class to position the cell in the 5 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 5 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 5;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-6 {
    /* 
    @name: mds-grid-xs-row-6
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-6 class to position the cell in the 6 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 6 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 6;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-7 {
    /* 
    @name: mds-grid-xs-row-7
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-7 class to position the cell in the 7 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 7 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 7;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-8 {
    /* 
    @name: mds-grid-xs-row-8
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-8 class to position the cell in the 8 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 8 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 8;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-9 {
    /* 
    @name: mds-grid-xs-row-9
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-9 class to position the cell in the 9 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 9 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 9;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-10 {
    /* 
    @name: mds-grid-xs-row-10
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-10 class to position the cell in the 10 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 10 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 10;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-11 {
    /* 
    @name: mds-grid-xs-row-11
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-11 class to position the cell in the 11 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 11 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 11;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-12 {
    /* 
    @name: mds-grid-xs-row-12
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-12 class to position the cell in the 12 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 12 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 12;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-13 {
    /* 
    @name: mds-grid-xs-row-13
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-13 class to position the cell in the 13 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 13 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 13;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-14 {
    /* 
    @name: mds-grid-xs-row-14
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-14 class to position the cell in the 14 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 14 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 14;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-15 {
    /* 
    @name: mds-grid-xs-row-15
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-15 class to position the cell in the 15 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 15 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 15;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-16 {
    /* 
    @name: mds-grid-xs-row-16
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-16 class to position the cell in the 16 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 16 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 16;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-17 {
    /* 
    @name: mds-grid-xs-row-17
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-17 class to position the cell in the 17 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 17 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 17;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-18 {
    /* 
    @name: mds-grid-xs-row-18
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-18 class to position the cell in the 18 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 18 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 18;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-19 {
    /* 
    @name: mds-grid-xs-row-19
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-19 class to position the cell in the 19 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 19 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 19;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-20 {
    /* 
    @name: mds-grid-xs-row-20
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-20 class to position the cell in the 20 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 20 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 20;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-21 {
    /* 
    @name: mds-grid-xs-row-21
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-21 class to position the cell in the 21 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 21 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 21;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-22 {
    /* 
    @name: mds-grid-xs-row-22
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-22 class to position the cell in the 22 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 22 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 22;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-23 {
    /* 
    @name: mds-grid-xs-row-23
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-23 class to position the cell in the 23 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 23 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 23;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-24 {
    /* 
    @name: mds-grid-xs-row-24
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-24 class to position the cell in the 24 row of the grid in xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 24 for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-1">Cell in row 1 for xs breakpoint</div>
        <div class="mds-grid-xs-row-2">Cell in row 2 for xs breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 24;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-1 {
    /* 
    @name: mds-grid-xs-row-span-1
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-1 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-1">Cell spans over 1 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 1;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-2 {
    /* 
    @name: mds-grid-xs-row-span-2
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-2 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-2">Cell spans over 2 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 2;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-3 {
    /* 
    @name: mds-grid-xs-row-span-3
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-3 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-3">Cell spans over 3 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 3;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-4 {
    /* 
    @name: mds-grid-xs-row-span-4
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-4 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-4">Cell spans over 4 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 4;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-5 {
    /* 
    @name: mds-grid-xs-row-span-5
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-5 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-5">Cell spans over 5 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 5;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-6 {
    /* 
    @name: mds-grid-xs-row-span-6
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-6 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-6">Cell spans over 6 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 6;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-7 {
    /* 
    @name: mds-grid-xs-row-span-7
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-7 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-7">Cell spans over 7 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 7;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-8 {
    /* 
    @name: mds-grid-xs-row-span-8
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-8 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-8">Cell spans over 8 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 8;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-9 {
    /* 
    @name: mds-grid-xs-row-span-9
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-9 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-9">Cell spans over 9 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 9;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-10 {
    /* 
    @name: mds-grid-xs-row-span-10
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-10 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-10">Cell spans over 10 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 10;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-11 {
    /* 
    @name: mds-grid-xs-row-span-11
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-11 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-11">Cell spans over 11 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 11;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-12 {
    /* 
    @name: mds-grid-xs-row-span-12
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-12 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-12">Cell spans over 12 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 12;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-13 {
    /* 
    @name: mds-grid-xs-row-span-13
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-13 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-13">Cell spans over 13 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 13;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-14 {
    /* 
    @name: mds-grid-xs-row-span-14
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-14 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-14">Cell spans over 14 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 14;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-15 {
    /* 
    @name: mds-grid-xs-row-span-15
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-15 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-15">Cell spans over 15 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 15;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-16 {
    /* 
    @name: mds-grid-xs-row-span-16
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-16 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-16">Cell spans over 16 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 16;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-17 {
    /* 
    @name: mds-grid-xs-row-span-17
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-17 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-17">Cell spans over 17 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 17;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-18 {
    /* 
    @name: mds-grid-xs-row-span-18
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-18 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-18">Cell spans over 18 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 18;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-19 {
    /* 
    @name: mds-grid-xs-row-span-19
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-19 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-19">Cell spans over 19 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 19;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-20 {
    /* 
    @name: mds-grid-xs-row-span-20
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-20 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-20">Cell spans over 20 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 20;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-21 {
    /* 
    @name: mds-grid-xs-row-span-21
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-21 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-21">Cell spans over 21 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 21;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-22 {
    /* 
    @name: mds-grid-xs-row-span-22
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-22 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-22">Cell spans over 22 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 22;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-23 {
    /* 
    @name: mds-grid-xs-row-span-23
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-23 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-23">Cell spans over 23 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 23;
  }
  .mds .mds-container .mds-grid .mds-grid-xs-row-span-24 {
    /* 
    @name: mds-grid-xs-row-span-24
    @category: Grid
    @usage: 
    Use mds-grid-xs-row-span-24 class to span multiple rows in your grid for xs breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-xs-row-span-24">Cell spans over 24 rows in xs breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 24;
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-1 {
    /* 
    @name: mds-grid-xs-rows-1
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-1 class to define a grid with 1 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-1">
        Grid will have 1 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(1, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-2 {
    /* 
    @name: mds-grid-xs-rows-2
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-2 class to define a grid with 2 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-2">
        Grid will have 2 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(2, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-3 {
    /* 
    @name: mds-grid-xs-rows-3
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-3 class to define a grid with 3 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-3">
        Grid will have 3 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(3, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-4 {
    /* 
    @name: mds-grid-xs-rows-4
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-4 class to define a grid with 4 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-4">
        Grid will have 4 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(4, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-5 {
    /* 
    @name: mds-grid-xs-rows-5
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-5 class to define a grid with 5 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-5">
        Grid will have 5 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(5, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-6 {
    /* 
    @name: mds-grid-xs-rows-6
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-6 class to define a grid with 6 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-6">
        Grid will have 6 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(6, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-7 {
    /* 
    @name: mds-grid-xs-rows-7
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-7 class to define a grid with 7 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-7">
        Grid will have 7 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(7, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-8 {
    /* 
    @name: mds-grid-xs-rows-8
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-8 class to define a grid with 8 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-8">
        Grid will have 8 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(8, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-9 {
    /* 
    @name: mds-grid-xs-rows-9
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-9 class to define a grid with 9 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-9">
        Grid will have 9 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(9, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-10 {
    /* 
    @name: mds-grid-xs-rows-10
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-10 class to define a grid with 10 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-10">
        Grid will have 10 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(10, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-11 {
    /* 
    @name: mds-grid-xs-rows-11
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-11 class to define a grid with 11 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-11">
        Grid will have 11 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(11, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-12 {
    /* 
    @name: mds-grid-xs-rows-12
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-12 class to define a grid with 12 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-12">
        Grid will have 12 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(12, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-13 {
    /* 
    @name: mds-grid-xs-rows-13
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-13 class to define a grid with 13 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-13">
        Grid will have 13 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(13, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-14 {
    /* 
    @name: mds-grid-xs-rows-14
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-14 class to define a grid with 14 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-14">
        Grid will have 14 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(14, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-15 {
    /* 
    @name: mds-grid-xs-rows-15
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-15 class to define a grid with 15 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-15">
        Grid will have 15 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(15, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-16 {
    /* 
    @name: mds-grid-xs-rows-16
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-16 class to define a grid with 16 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-16">
        Grid will have 16 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(16, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-17 {
    /* 
    @name: mds-grid-xs-rows-17
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-17 class to define a grid with 17 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-17">
        Grid will have 17 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(17, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-18 {
    /* 
    @name: mds-grid-xs-rows-18
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-18 class to define a grid with 18 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-18">
        Grid will have 18 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(18, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-19 {
    /* 
    @name: mds-grid-xs-rows-19
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-19 class to define a grid with 19 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-19">
        Grid will have 19 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(19, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-20 {
    /* 
    @name: mds-grid-xs-rows-20
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-20 class to define a grid with 20 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-20">
        Grid will have 20 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(20, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-21 {
    /* 
    @name: mds-grid-xs-rows-21
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-21 class to define a grid with 21 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-21">
        Grid will have 21 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(21, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-22 {
    /* 
    @name: mds-grid-xs-rows-22
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-22 class to define a grid with 22 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-22">
        Grid will have 22 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(22, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-23 {
    /* 
    @name: mds-grid-xs-rows-23
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-23 class to define a grid with 23 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-23">
        Grid will have 23 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(23, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-xs-rows-24 {
    /* 
    @name: mds-grid-xs-rows-24
    @category: Grid
    @usage: 
    Use mds-grid-xs-rows-24 class to define a grid with 24 rows for xs breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for xs breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-xs-rows-24">
        Grid will have 24 number of rows in xs breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(24, auto);
  }
}@container (min-width: 641px) {
  .mds .mds-container .mds-grid {
    gap: var(--mds_foundations_grid_sm_column-gap) var(--mds_foundations_grid_sm_row-gap);
    grid-template-columns: repeat(var(--mds_foundations_grid_sm_columns), minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-1 {
    /* 
    @name: mds-grid-sm-col-1
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-1 class to position the cell in the 1 column of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 1 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1">Cell in column 1 for sm breakpoint</div>
        <div class="mds-grid-sm-col-2">Cell in column 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 1;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-2 {
    /* 
    @name: mds-grid-sm-col-2
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-2 class to position the cell in the 2 column of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 2 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1">Cell in column 1 for sm breakpoint</div>
        <div class="mds-grid-sm-col-2">Cell in column 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 2;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-3 {
    /* 
    @name: mds-grid-sm-col-3
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-3 class to position the cell in the 3 column of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 3 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1">Cell in column 1 for sm breakpoint</div>
        <div class="mds-grid-sm-col-2">Cell in column 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 3;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-4 {
    /* 
    @name: mds-grid-sm-col-4
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-4 class to position the cell in the 4 column of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 4 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1">Cell in column 1 for sm breakpoint</div>
        <div class="mds-grid-sm-col-2">Cell in column 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 4;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-5 {
    /* 
    @name: mds-grid-sm-col-5
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-5 class to position the cell in the 5 column of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 5 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1">Cell in column 1 for sm breakpoint</div>
        <div class="mds-grid-sm-col-2">Cell in column 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 5;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-6 {
    /* 
    @name: mds-grid-sm-col-6
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-6 class to position the cell in the 6 column of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 6 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1">Cell in column 1 for sm breakpoint</div>
        <div class="mds-grid-sm-col-2">Cell in column 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 6;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-7 {
    /* 
    @name: mds-grid-sm-col-7
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-7 class to position the cell in the 7 column of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 7 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1">Cell in column 1 for sm breakpoint</div>
        <div class="mds-grid-sm-col-2">Cell in column 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 7;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-8 {
    /* 
    @name: mds-grid-sm-col-8
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-8 class to position the cell in the 8 column of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 8 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1">Cell in column 1 for sm breakpoint</div>
        <div class="mds-grid-sm-col-2">Cell in column 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 8;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-9 {
    /* 
    @name: mds-grid-sm-col-9
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-9 class to position the cell in the 9 column of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 9 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1">Cell in column 1 for sm breakpoint</div>
        <div class="mds-grid-sm-col-2">Cell in column 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 9;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-10 {
    /* 
    @name: mds-grid-sm-col-10
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-10 class to position the cell in the 10 column of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 10 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1">Cell in column 1 for sm breakpoint</div>
        <div class="mds-grid-sm-col-2">Cell in column 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 10;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-11 {
    /* 
    @name: mds-grid-sm-col-11
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-11 class to position the cell in the 11 column of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 11 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1">Cell in column 1 for sm breakpoint</div>
        <div class="mds-grid-sm-col-2">Cell in column 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 11;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-12 {
    /* 
    @name: mds-grid-sm-col-12
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-12 class to position the cell in the 12 column of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 12 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1">Cell in column 1 for sm breakpoint</div>
        <div class="mds-grid-sm-col-2">Cell in column 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 12;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-1-reverse {
    /* 
    @name: mds-grid-sm-col-1-reverse
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-1-reverse class to position the cell in the reverse order in the 1 column (from the end) in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 1 from the end for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-sm-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -2;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-2-reverse {
    /* 
    @name: mds-grid-sm-col-2-reverse
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-2-reverse class to position the cell in the reverse order in the 2 column (from the end) in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 2 from the end for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-sm-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -3;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-3-reverse {
    /* 
    @name: mds-grid-sm-col-3-reverse
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-3-reverse class to position the cell in the reverse order in the 3 column (from the end) in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 3 from the end for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-sm-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -4;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-4-reverse {
    /* 
    @name: mds-grid-sm-col-4-reverse
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-4-reverse class to position the cell in the reverse order in the 4 column (from the end) in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 4 from the end for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-sm-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -5;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-5-reverse {
    /* 
    @name: mds-grid-sm-col-5-reverse
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-5-reverse class to position the cell in the reverse order in the 5 column (from the end) in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 5 from the end for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-sm-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -6;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-6-reverse {
    /* 
    @name: mds-grid-sm-col-6-reverse
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-6-reverse class to position the cell in the reverse order in the 6 column (from the end) in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 6 from the end for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-sm-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -7;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-7-reverse {
    /* 
    @name: mds-grid-sm-col-7-reverse
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-7-reverse class to position the cell in the reverse order in the 7 column (from the end) in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 7 from the end for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-sm-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -8;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-8-reverse {
    /* 
    @name: mds-grid-sm-col-8-reverse
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-8-reverse class to position the cell in the reverse order in the 8 column (from the end) in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 8 from the end for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-sm-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -9;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-9-reverse {
    /* 
    @name: mds-grid-sm-col-9-reverse
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-9-reverse class to position the cell in the reverse order in the 9 column (from the end) in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 9 from the end for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-sm-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -10;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-10-reverse {
    /* 
    @name: mds-grid-sm-col-10-reverse
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-10-reverse class to position the cell in the reverse order in the 10 column (from the end) in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 10 from the end for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-sm-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -11;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-11-reverse {
    /* 
    @name: mds-grid-sm-col-11-reverse
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-11-reverse class to position the cell in the reverse order in the 11 column (from the end) in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 11 from the end for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-sm-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -12;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-12-reverse {
    /* 
    @name: mds-grid-sm-col-12-reverse
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-12-reverse class to position the cell in the reverse order in the 12 column (from the end) in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 12 from the end for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-sm-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -13;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-span-1 {
    /* 
    @name: mds-grid-sm-col-span-1
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-span-1 class to span multiple cells in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
    Use it in combination with mds-grid-sm-col-1 class to position the cell in the 1 column of the grid in sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1 mds-grid-sm-col-span-2">Cell in column 1 that spans over 2 columns in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 1;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-span-2 {
    /* 
    @name: mds-grid-sm-col-span-2
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-span-2 class to span multiple cells in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
    Use it in combination with mds-grid-sm-col-2 class to position the cell in the 2 column of the grid in sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1 mds-grid-sm-col-span-2">Cell in column 1 that spans over 2 columns in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 2;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-span-3 {
    /* 
    @name: mds-grid-sm-col-span-3
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-span-3 class to span multiple cells in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
    Use it in combination with mds-grid-sm-col-3 class to position the cell in the 3 column of the grid in sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1 mds-grid-sm-col-span-2">Cell in column 1 that spans over 2 columns in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 3;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-span-4 {
    /* 
    @name: mds-grid-sm-col-span-4
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-span-4 class to span multiple cells in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
    Use it in combination with mds-grid-sm-col-4 class to position the cell in the 4 column of the grid in sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1 mds-grid-sm-col-span-2">Cell in column 1 that spans over 2 columns in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 4;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-span-5 {
    /* 
    @name: mds-grid-sm-col-span-5
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-span-5 class to span multiple cells in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
    Use it in combination with mds-grid-sm-col-5 class to position the cell in the 5 column of the grid in sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1 mds-grid-sm-col-span-2">Cell in column 1 that spans over 2 columns in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 5;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-span-6 {
    /* 
    @name: mds-grid-sm-col-span-6
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-span-6 class to span multiple cells in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
    Use it in combination with mds-grid-sm-col-6 class to position the cell in the 6 column of the grid in sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1 mds-grid-sm-col-span-2">Cell in column 1 that spans over 2 columns in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 6;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-span-7 {
    /* 
    @name: mds-grid-sm-col-span-7
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-span-7 class to span multiple cells in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
    Use it in combination with mds-grid-sm-col-7 class to position the cell in the 7 column of the grid in sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1 mds-grid-sm-col-span-2">Cell in column 1 that spans over 2 columns in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 7;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-span-8 {
    /* 
    @name: mds-grid-sm-col-span-8
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-span-8 class to span multiple cells in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
    Use it in combination with mds-grid-sm-col-8 class to position the cell in the 8 column of the grid in sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1 mds-grid-sm-col-span-2">Cell in column 1 that spans over 2 columns in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 8;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-span-9 {
    /* 
    @name: mds-grid-sm-col-span-9
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-span-9 class to span multiple cells in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
    Use it in combination with mds-grid-sm-col-9 class to position the cell in the 9 column of the grid in sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1 mds-grid-sm-col-span-2">Cell in column 1 that spans over 2 columns in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 9;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-span-10 {
    /* 
    @name: mds-grid-sm-col-span-10
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-span-10 class to span multiple cells in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
    Use it in combination with mds-grid-sm-col-10 class to position the cell in the 10 column of the grid in sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1 mds-grid-sm-col-span-2">Cell in column 1 that spans over 2 columns in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 10;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-span-11 {
    /* 
    @name: mds-grid-sm-col-span-11
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-span-11 class to span multiple cells in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
    Use it in combination with mds-grid-sm-col-11 class to position the cell in the 11 column of the grid in sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1 mds-grid-sm-col-span-2">Cell in column 1 that spans over 2 columns in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 11;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-col-span-12 {
    /* 
    @name: mds-grid-sm-col-span-12
    @category: Grid
    @usage: 
    Use mds-grid-sm-col-span-12 class to span multiple cells in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for sm breakpoint.
    Use it in combination with mds-grid-sm-col-12 class to position the cell in the 12 column of the grid in sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-col-1 mds-grid-sm-col-span-2">Cell in column 1 that spans over 2 columns in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 12;
  }
  .mds .mds-container .mds-grid.mds-grid-sm-cols-1 {
    /* 
    @name: mds-grid-sm-cols-1
    @category: Grid
    @usage: 
    Use mds-grid-sm-cols-1 class to define a grid with 1 columns for sm breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-cols-1">
        Grid will have 1 number of columns in sm breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-sm-cols-2 {
    /* 
    @name: mds-grid-sm-cols-2
    @category: Grid
    @usage: 
    Use mds-grid-sm-cols-2 class to define a grid with 2 columns for sm breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-cols-2">
        Grid will have 2 number of columns in sm breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-sm-cols-3 {
    /* 
    @name: mds-grid-sm-cols-3
    @category: Grid
    @usage: 
    Use mds-grid-sm-cols-3 class to define a grid with 3 columns for sm breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-cols-3">
        Grid will have 3 number of columns in sm breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-sm-cols-4 {
    /* 
    @name: mds-grid-sm-cols-4
    @category: Grid
    @usage: 
    Use mds-grid-sm-cols-4 class to define a grid with 4 columns for sm breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-cols-4">
        Grid will have 4 number of columns in sm breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-sm-cols-5 {
    /* 
    @name: mds-grid-sm-cols-5
    @category: Grid
    @usage: 
    Use mds-grid-sm-cols-5 class to define a grid with 5 columns for sm breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-cols-5">
        Grid will have 5 number of columns in sm breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-sm-cols-6 {
    /* 
    @name: mds-grid-sm-cols-6
    @category: Grid
    @usage: 
    Use mds-grid-sm-cols-6 class to define a grid with 6 columns for sm breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-cols-6">
        Grid will have 6 number of columns in sm breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-sm-cols-7 {
    /* 
    @name: mds-grid-sm-cols-7
    @category: Grid
    @usage: 
    Use mds-grid-sm-cols-7 class to define a grid with 7 columns for sm breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-cols-7">
        Grid will have 7 number of columns in sm breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-sm-cols-8 {
    /* 
    @name: mds-grid-sm-cols-8
    @category: Grid
    @usage: 
    Use mds-grid-sm-cols-8 class to define a grid with 8 columns for sm breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-cols-8">
        Grid will have 8 number of columns in sm breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-sm-cols-9 {
    /* 
    @name: mds-grid-sm-cols-9
    @category: Grid
    @usage: 
    Use mds-grid-sm-cols-9 class to define a grid with 9 columns for sm breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-cols-9">
        Grid will have 9 number of columns in sm breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-sm-cols-10 {
    /* 
    @name: mds-grid-sm-cols-10
    @category: Grid
    @usage: 
    Use mds-grid-sm-cols-10 class to define a grid with 10 columns for sm breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-cols-10">
        Grid will have 10 number of columns in sm breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-sm-cols-11 {
    /* 
    @name: mds-grid-sm-cols-11
    @category: Grid
    @usage: 
    Use mds-grid-sm-cols-11 class to define a grid with 11 columns for sm breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-cols-11">
        Grid will have 11 number of columns in sm breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-sm-cols-12 {
    /* 
    @name: mds-grid-sm-cols-12
    @category: Grid
    @usage: 
    Use mds-grid-sm-cols-12 class to define a grid with 12 columns for sm breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-cols-12">
        Grid will have 12 number of columns in sm breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-1 {
    /* 
    @name: mds-grid-sm-row-1
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-1 class to position the cell in the 1 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 1 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 1;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-2 {
    /* 
    @name: mds-grid-sm-row-2
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-2 class to position the cell in the 2 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 2 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 2;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-3 {
    /* 
    @name: mds-grid-sm-row-3
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-3 class to position the cell in the 3 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 3 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 3;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-4 {
    /* 
    @name: mds-grid-sm-row-4
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-4 class to position the cell in the 4 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 4 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 4;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-5 {
    /* 
    @name: mds-grid-sm-row-5
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-5 class to position the cell in the 5 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 5 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 5;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-6 {
    /* 
    @name: mds-grid-sm-row-6
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-6 class to position the cell in the 6 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 6 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 6;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-7 {
    /* 
    @name: mds-grid-sm-row-7
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-7 class to position the cell in the 7 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 7 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 7;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-8 {
    /* 
    @name: mds-grid-sm-row-8
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-8 class to position the cell in the 8 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 8 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 8;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-9 {
    /* 
    @name: mds-grid-sm-row-9
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-9 class to position the cell in the 9 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 9 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 9;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-10 {
    /* 
    @name: mds-grid-sm-row-10
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-10 class to position the cell in the 10 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 10 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 10;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-11 {
    /* 
    @name: mds-grid-sm-row-11
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-11 class to position the cell in the 11 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 11 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 11;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-12 {
    /* 
    @name: mds-grid-sm-row-12
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-12 class to position the cell in the 12 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 12 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 12;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-13 {
    /* 
    @name: mds-grid-sm-row-13
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-13 class to position the cell in the 13 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 13 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 13;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-14 {
    /* 
    @name: mds-grid-sm-row-14
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-14 class to position the cell in the 14 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 14 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 14;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-15 {
    /* 
    @name: mds-grid-sm-row-15
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-15 class to position the cell in the 15 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 15 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 15;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-16 {
    /* 
    @name: mds-grid-sm-row-16
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-16 class to position the cell in the 16 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 16 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 16;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-17 {
    /* 
    @name: mds-grid-sm-row-17
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-17 class to position the cell in the 17 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 17 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 17;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-18 {
    /* 
    @name: mds-grid-sm-row-18
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-18 class to position the cell in the 18 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 18 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 18;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-19 {
    /* 
    @name: mds-grid-sm-row-19
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-19 class to position the cell in the 19 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 19 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 19;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-20 {
    /* 
    @name: mds-grid-sm-row-20
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-20 class to position the cell in the 20 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 20 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 20;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-21 {
    /* 
    @name: mds-grid-sm-row-21
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-21 class to position the cell in the 21 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 21 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 21;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-22 {
    /* 
    @name: mds-grid-sm-row-22
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-22 class to position the cell in the 22 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 22 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 22;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-23 {
    /* 
    @name: mds-grid-sm-row-23
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-23 class to position the cell in the 23 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 23 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 23;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-24 {
    /* 
    @name: mds-grid-sm-row-24
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-24 class to position the cell in the 24 row of the grid in sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 24 for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-1">Cell in row 1 for sm breakpoint</div>
        <div class="mds-grid-sm-row-2">Cell in row 2 for sm breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 24;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-1 {
    /* 
    @name: mds-grid-sm-row-span-1
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-1 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-1">Cell spans over 1 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 1;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-2 {
    /* 
    @name: mds-grid-sm-row-span-2
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-2 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-2">Cell spans over 2 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 2;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-3 {
    /* 
    @name: mds-grid-sm-row-span-3
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-3 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-3">Cell spans over 3 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 3;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-4 {
    /* 
    @name: mds-grid-sm-row-span-4
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-4 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-4">Cell spans over 4 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 4;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-5 {
    /* 
    @name: mds-grid-sm-row-span-5
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-5 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-5">Cell spans over 5 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 5;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-6 {
    /* 
    @name: mds-grid-sm-row-span-6
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-6 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-6">Cell spans over 6 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 6;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-7 {
    /* 
    @name: mds-grid-sm-row-span-7
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-7 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-7">Cell spans over 7 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 7;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-8 {
    /* 
    @name: mds-grid-sm-row-span-8
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-8 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-8">Cell spans over 8 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 8;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-9 {
    /* 
    @name: mds-grid-sm-row-span-9
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-9 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-9">Cell spans over 9 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 9;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-10 {
    /* 
    @name: mds-grid-sm-row-span-10
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-10 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-10">Cell spans over 10 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 10;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-11 {
    /* 
    @name: mds-grid-sm-row-span-11
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-11 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-11">Cell spans over 11 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 11;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-12 {
    /* 
    @name: mds-grid-sm-row-span-12
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-12 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-12">Cell spans over 12 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 12;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-13 {
    /* 
    @name: mds-grid-sm-row-span-13
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-13 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-13">Cell spans over 13 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 13;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-14 {
    /* 
    @name: mds-grid-sm-row-span-14
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-14 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-14">Cell spans over 14 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 14;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-15 {
    /* 
    @name: mds-grid-sm-row-span-15
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-15 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-15">Cell spans over 15 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 15;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-16 {
    /* 
    @name: mds-grid-sm-row-span-16
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-16 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-16">Cell spans over 16 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 16;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-17 {
    /* 
    @name: mds-grid-sm-row-span-17
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-17 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-17">Cell spans over 17 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 17;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-18 {
    /* 
    @name: mds-grid-sm-row-span-18
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-18 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-18">Cell spans over 18 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 18;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-19 {
    /* 
    @name: mds-grid-sm-row-span-19
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-19 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-19">Cell spans over 19 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 19;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-20 {
    /* 
    @name: mds-grid-sm-row-span-20
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-20 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-20">Cell spans over 20 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 20;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-21 {
    /* 
    @name: mds-grid-sm-row-span-21
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-21 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-21">Cell spans over 21 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 21;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-22 {
    /* 
    @name: mds-grid-sm-row-span-22
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-22 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-22">Cell spans over 22 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 22;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-23 {
    /* 
    @name: mds-grid-sm-row-span-23
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-23 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-23">Cell spans over 23 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 23;
  }
  .mds .mds-container .mds-grid .mds-grid-sm-row-span-24 {
    /* 
    @name: mds-grid-sm-row-span-24
    @category: Grid
    @usage: 
    Use mds-grid-sm-row-span-24 class to span multiple rows in your grid for sm breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-sm-row-span-24">Cell spans over 24 rows in sm breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 24;
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-1 {
    /* 
    @name: mds-grid-sm-rows-1
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-1 class to define a grid with 1 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-1">
        Grid will have 1 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(1, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-2 {
    /* 
    @name: mds-grid-sm-rows-2
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-2 class to define a grid with 2 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-2">
        Grid will have 2 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(2, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-3 {
    /* 
    @name: mds-grid-sm-rows-3
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-3 class to define a grid with 3 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-3">
        Grid will have 3 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(3, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-4 {
    /* 
    @name: mds-grid-sm-rows-4
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-4 class to define a grid with 4 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-4">
        Grid will have 4 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(4, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-5 {
    /* 
    @name: mds-grid-sm-rows-5
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-5 class to define a grid with 5 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-5">
        Grid will have 5 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(5, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-6 {
    /* 
    @name: mds-grid-sm-rows-6
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-6 class to define a grid with 6 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-6">
        Grid will have 6 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(6, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-7 {
    /* 
    @name: mds-grid-sm-rows-7
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-7 class to define a grid with 7 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-7">
        Grid will have 7 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(7, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-8 {
    /* 
    @name: mds-grid-sm-rows-8
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-8 class to define a grid with 8 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-8">
        Grid will have 8 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(8, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-9 {
    /* 
    @name: mds-grid-sm-rows-9
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-9 class to define a grid with 9 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-9">
        Grid will have 9 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(9, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-10 {
    /* 
    @name: mds-grid-sm-rows-10
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-10 class to define a grid with 10 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-10">
        Grid will have 10 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(10, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-11 {
    /* 
    @name: mds-grid-sm-rows-11
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-11 class to define a grid with 11 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-11">
        Grid will have 11 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(11, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-12 {
    /* 
    @name: mds-grid-sm-rows-12
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-12 class to define a grid with 12 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-12">
        Grid will have 12 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(12, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-13 {
    /* 
    @name: mds-grid-sm-rows-13
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-13 class to define a grid with 13 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-13">
        Grid will have 13 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(13, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-14 {
    /* 
    @name: mds-grid-sm-rows-14
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-14 class to define a grid with 14 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-14">
        Grid will have 14 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(14, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-15 {
    /* 
    @name: mds-grid-sm-rows-15
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-15 class to define a grid with 15 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-15">
        Grid will have 15 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(15, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-16 {
    /* 
    @name: mds-grid-sm-rows-16
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-16 class to define a grid with 16 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-16">
        Grid will have 16 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(16, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-17 {
    /* 
    @name: mds-grid-sm-rows-17
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-17 class to define a grid with 17 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-17">
        Grid will have 17 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(17, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-18 {
    /* 
    @name: mds-grid-sm-rows-18
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-18 class to define a grid with 18 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-18">
        Grid will have 18 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(18, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-19 {
    /* 
    @name: mds-grid-sm-rows-19
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-19 class to define a grid with 19 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-19">
        Grid will have 19 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(19, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-20 {
    /* 
    @name: mds-grid-sm-rows-20
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-20 class to define a grid with 20 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-20">
        Grid will have 20 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(20, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-21 {
    /* 
    @name: mds-grid-sm-rows-21
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-21 class to define a grid with 21 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-21">
        Grid will have 21 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(21, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-22 {
    /* 
    @name: mds-grid-sm-rows-22
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-22 class to define a grid with 22 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-22">
        Grid will have 22 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(22, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-23 {
    /* 
    @name: mds-grid-sm-rows-23
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-23 class to define a grid with 23 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-23">
        Grid will have 23 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(23, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-sm-rows-24 {
    /* 
    @name: mds-grid-sm-rows-24
    @category: Grid
    @usage: 
    Use mds-grid-sm-rows-24 class to define a grid with 24 rows for sm breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for sm breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-sm-rows-24">
        Grid will have 24 number of rows in sm breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(24, auto);
  }
}@container (min-width: 1025px) {
  .mds .mds-container .mds-grid {
    gap: var(--mds_foundations_grid_md_column-gap) var(--mds_foundations_grid_md_row-gap);
    grid-template-columns: repeat(var(--mds_foundations_grid_md_columns), minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-1 {
    /* 
    @name: mds-grid-md-col-1
    @category: Grid
    @usage: 
    Use mds-grid-md-col-1 class to position the cell in the 1 column of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 1 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1">Cell in column 1 for md breakpoint</div>
        <div class="mds-grid-md-col-2">Cell in column 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 1;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-2 {
    /* 
    @name: mds-grid-md-col-2
    @category: Grid
    @usage: 
    Use mds-grid-md-col-2 class to position the cell in the 2 column of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 2 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1">Cell in column 1 for md breakpoint</div>
        <div class="mds-grid-md-col-2">Cell in column 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 2;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-3 {
    /* 
    @name: mds-grid-md-col-3
    @category: Grid
    @usage: 
    Use mds-grid-md-col-3 class to position the cell in the 3 column of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 3 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1">Cell in column 1 for md breakpoint</div>
        <div class="mds-grid-md-col-2">Cell in column 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 3;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-4 {
    /* 
    @name: mds-grid-md-col-4
    @category: Grid
    @usage: 
    Use mds-grid-md-col-4 class to position the cell in the 4 column of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 4 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1">Cell in column 1 for md breakpoint</div>
        <div class="mds-grid-md-col-2">Cell in column 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 4;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-5 {
    /* 
    @name: mds-grid-md-col-5
    @category: Grid
    @usage: 
    Use mds-grid-md-col-5 class to position the cell in the 5 column of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 5 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1">Cell in column 1 for md breakpoint</div>
        <div class="mds-grid-md-col-2">Cell in column 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 5;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-6 {
    /* 
    @name: mds-grid-md-col-6
    @category: Grid
    @usage: 
    Use mds-grid-md-col-6 class to position the cell in the 6 column of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 6 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1">Cell in column 1 for md breakpoint</div>
        <div class="mds-grid-md-col-2">Cell in column 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 6;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-7 {
    /* 
    @name: mds-grid-md-col-7
    @category: Grid
    @usage: 
    Use mds-grid-md-col-7 class to position the cell in the 7 column of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 7 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1">Cell in column 1 for md breakpoint</div>
        <div class="mds-grid-md-col-2">Cell in column 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 7;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-8 {
    /* 
    @name: mds-grid-md-col-8
    @category: Grid
    @usage: 
    Use mds-grid-md-col-8 class to position the cell in the 8 column of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 8 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1">Cell in column 1 for md breakpoint</div>
        <div class="mds-grid-md-col-2">Cell in column 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 8;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-9 {
    /* 
    @name: mds-grid-md-col-9
    @category: Grid
    @usage: 
    Use mds-grid-md-col-9 class to position the cell in the 9 column of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 9 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1">Cell in column 1 for md breakpoint</div>
        <div class="mds-grid-md-col-2">Cell in column 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 9;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-10 {
    /* 
    @name: mds-grid-md-col-10
    @category: Grid
    @usage: 
    Use mds-grid-md-col-10 class to position the cell in the 10 column of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 10 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1">Cell in column 1 for md breakpoint</div>
        <div class="mds-grid-md-col-2">Cell in column 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 10;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-11 {
    /* 
    @name: mds-grid-md-col-11
    @category: Grid
    @usage: 
    Use mds-grid-md-col-11 class to position the cell in the 11 column of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 11 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1">Cell in column 1 for md breakpoint</div>
        <div class="mds-grid-md-col-2">Cell in column 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 11;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-12 {
    /* 
    @name: mds-grid-md-col-12
    @category: Grid
    @usage: 
    Use mds-grid-md-col-12 class to position the cell in the 12 column of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in column 12 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1">Cell in column 1 for md breakpoint</div>
        <div class="mds-grid-md-col-2">Cell in column 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-column-start: 12;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-1-reverse {
    /* 
    @name: mds-grid-md-col-1-reverse
    @category: Grid
    @usage: 
    Use mds-grid-md-col-1-reverse class to position the cell in the reverse order in the 1 column (from the end) in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 1 from the end for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-md-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -2;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-2-reverse {
    /* 
    @name: mds-grid-md-col-2-reverse
    @category: Grid
    @usage: 
    Use mds-grid-md-col-2-reverse class to position the cell in the reverse order in the 2 column (from the end) in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 2 from the end for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-md-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -3;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-3-reverse {
    /* 
    @name: mds-grid-md-col-3-reverse
    @category: Grid
    @usage: 
    Use mds-grid-md-col-3-reverse class to position the cell in the reverse order in the 3 column (from the end) in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 3 from the end for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-md-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -4;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-4-reverse {
    /* 
    @name: mds-grid-md-col-4-reverse
    @category: Grid
    @usage: 
    Use mds-grid-md-col-4-reverse class to position the cell in the reverse order in the 4 column (from the end) in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 4 from the end for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-md-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -5;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-5-reverse {
    /* 
    @name: mds-grid-md-col-5-reverse
    @category: Grid
    @usage: 
    Use mds-grid-md-col-5-reverse class to position the cell in the reverse order in the 5 column (from the end) in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 5 from the end for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-md-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -6;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-6-reverse {
    /* 
    @name: mds-grid-md-col-6-reverse
    @category: Grid
    @usage: 
    Use mds-grid-md-col-6-reverse class to position the cell in the reverse order in the 6 column (from the end) in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 6 from the end for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-md-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -7;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-7-reverse {
    /* 
    @name: mds-grid-md-col-7-reverse
    @category: Grid
    @usage: 
    Use mds-grid-md-col-7-reverse class to position the cell in the reverse order in the 7 column (from the end) in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 7 from the end for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-md-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -8;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-8-reverse {
    /* 
    @name: mds-grid-md-col-8-reverse
    @category: Grid
    @usage: 
    Use mds-grid-md-col-8-reverse class to position the cell in the reverse order in the 8 column (from the end) in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 8 from the end for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-md-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -9;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-9-reverse {
    /* 
    @name: mds-grid-md-col-9-reverse
    @category: Grid
    @usage: 
    Use mds-grid-md-col-9-reverse class to position the cell in the reverse order in the 9 column (from the end) in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 9 from the end for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-md-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -10;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-10-reverse {
    /* 
    @name: mds-grid-md-col-10-reverse
    @category: Grid
    @usage: 
    Use mds-grid-md-col-10-reverse class to position the cell in the reverse order in the 10 column (from the end) in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 10 from the end for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-md-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -11;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-11-reverse {
    /* 
    @name: mds-grid-md-col-11-reverse
    @category: Grid
    @usage: 
    Use mds-grid-md-col-11-reverse class to position the cell in the reverse order in the 11 column (from the end) in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 11 from the end for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-md-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -12;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-12-reverse {
    /* 
    @name: mds-grid-md-col-12-reverse
    @category: Grid
    @usage: 
    Use mds-grid-md-col-12-reverse class to position the cell in the reverse order in the 12 column (from the end) in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will be only in column 12 from the end for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-2-reverse">Cell in column 2 from the end in all breakpoints</div>
        <div class="mds-grid-md-col-1-reverse">Cell in column 1 from the end in all breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-start: -13;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-span-1 {
    /* 
    @name: mds-grid-md-col-span-1
    @category: Grid
    @usage: 
    Use mds-grid-md-col-span-1 class to span multiple cells in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
    Use it in combination with mds-grid-md-col-1 class to position the cell in the 1 column of the grid in md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1 mds-grid-md-col-span-2">Cell in column 1 that spans over 2 columns in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 1;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-span-2 {
    /* 
    @name: mds-grid-md-col-span-2
    @category: Grid
    @usage: 
    Use mds-grid-md-col-span-2 class to span multiple cells in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
    Use it in combination with mds-grid-md-col-2 class to position the cell in the 2 column of the grid in md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1 mds-grid-md-col-span-2">Cell in column 1 that spans over 2 columns in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 2;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-span-3 {
    /* 
    @name: mds-grid-md-col-span-3
    @category: Grid
    @usage: 
    Use mds-grid-md-col-span-3 class to span multiple cells in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
    Use it in combination with mds-grid-md-col-3 class to position the cell in the 3 column of the grid in md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1 mds-grid-md-col-span-2">Cell in column 1 that spans over 2 columns in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 3;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-span-4 {
    /* 
    @name: mds-grid-md-col-span-4
    @category: Grid
    @usage: 
    Use mds-grid-md-col-span-4 class to span multiple cells in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
    Use it in combination with mds-grid-md-col-4 class to position the cell in the 4 column of the grid in md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1 mds-grid-md-col-span-2">Cell in column 1 that spans over 2 columns in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 4;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-span-5 {
    /* 
    @name: mds-grid-md-col-span-5
    @category: Grid
    @usage: 
    Use mds-grid-md-col-span-5 class to span multiple cells in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
    Use it in combination with mds-grid-md-col-5 class to position the cell in the 5 column of the grid in md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1 mds-grid-md-col-span-2">Cell in column 1 that spans over 2 columns in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 5;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-span-6 {
    /* 
    @name: mds-grid-md-col-span-6
    @category: Grid
    @usage: 
    Use mds-grid-md-col-span-6 class to span multiple cells in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
    Use it in combination with mds-grid-md-col-6 class to position the cell in the 6 column of the grid in md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1 mds-grid-md-col-span-2">Cell in column 1 that spans over 2 columns in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 6;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-span-7 {
    /* 
    @name: mds-grid-md-col-span-7
    @category: Grid
    @usage: 
    Use mds-grid-md-col-span-7 class to span multiple cells in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
    Use it in combination with mds-grid-md-col-7 class to position the cell in the 7 column of the grid in md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1 mds-grid-md-col-span-2">Cell in column 1 that spans over 2 columns in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 7;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-span-8 {
    /* 
    @name: mds-grid-md-col-span-8
    @category: Grid
    @usage: 
    Use mds-grid-md-col-span-8 class to span multiple cells in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
    Use it in combination with mds-grid-md-col-8 class to position the cell in the 8 column of the grid in md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1 mds-grid-md-col-span-2">Cell in column 1 that spans over 2 columns in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 8;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-span-9 {
    /* 
    @name: mds-grid-md-col-span-9
    @category: Grid
    @usage: 
    Use mds-grid-md-col-span-9 class to span multiple cells in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
    Use it in combination with mds-grid-md-col-9 class to position the cell in the 9 column of the grid in md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1 mds-grid-md-col-span-2">Cell in column 1 that spans over 2 columns in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 9;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-span-10 {
    /* 
    @name: mds-grid-md-col-span-10
    @category: Grid
    @usage: 
    Use mds-grid-md-col-span-10 class to span multiple cells in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
    Use it in combination with mds-grid-md-col-10 class to position the cell in the 10 column of the grid in md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1 mds-grid-md-col-span-2">Cell in column 1 that spans over 2 columns in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 10;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-span-11 {
    /* 
    @name: mds-grid-md-col-span-11
    @category: Grid
    @usage: 
    Use mds-grid-md-col-span-11 class to span multiple cells in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
    Use it in combination with mds-grid-md-col-11 class to position the cell in the 11 column of the grid in md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1 mds-grid-md-col-span-2">Cell in column 1 that spans over 2 columns in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 11;
  }
  .mds .mds-container .mds-grid .mds-grid-md-col-span-12 {
    /* 
    @name: mds-grid-md-col-span-12
    @category: Grid
    @usage: 
    Use mds-grid-md-col-span-12 class to span multiple cells in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cells spanning will apply only for md breakpoint.
    Use it in combination with mds-grid-md-col-12 class to position the cell in the 12 column of the grid in md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-col-1 mds-grid-md-col-span-2">Cell in column 1 that spans over 2 columns in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-column-end: span 12;
  }
  .mds .mds-container .mds-grid.mds-grid-md-cols-1 {
    /* 
    @name: mds-grid-md-cols-1
    @category: Grid
    @usage: 
    Use mds-grid-md-cols-1 class to define a grid with 1 columns for md breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-cols-1">
        Grid will have 1 number of columns in md breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-md-cols-2 {
    /* 
    @name: mds-grid-md-cols-2
    @category: Grid
    @usage: 
    Use mds-grid-md-cols-2 class to define a grid with 2 columns for md breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-cols-2">
        Grid will have 2 number of columns in md breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-md-cols-3 {
    /* 
    @name: mds-grid-md-cols-3
    @category: Grid
    @usage: 
    Use mds-grid-md-cols-3 class to define a grid with 3 columns for md breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-cols-3">
        Grid will have 3 number of columns in md breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-md-cols-4 {
    /* 
    @name: mds-grid-md-cols-4
    @category: Grid
    @usage: 
    Use mds-grid-md-cols-4 class to define a grid with 4 columns for md breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-cols-4">
        Grid will have 4 number of columns in md breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-md-cols-5 {
    /* 
    @name: mds-grid-md-cols-5
    @category: Grid
    @usage: 
    Use mds-grid-md-cols-5 class to define a grid with 5 columns for md breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-cols-5">
        Grid will have 5 number of columns in md breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-md-cols-6 {
    /* 
    @name: mds-grid-md-cols-6
    @category: Grid
    @usage: 
    Use mds-grid-md-cols-6 class to define a grid with 6 columns for md breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-cols-6">
        Grid will have 6 number of columns in md breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-md-cols-7 {
    /* 
    @name: mds-grid-md-cols-7
    @category: Grid
    @usage: 
    Use mds-grid-md-cols-7 class to define a grid with 7 columns for md breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-cols-7">
        Grid will have 7 number of columns in md breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-md-cols-8 {
    /* 
    @name: mds-grid-md-cols-8
    @category: Grid
    @usage: 
    Use mds-grid-md-cols-8 class to define a grid with 8 columns for md breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-cols-8">
        Grid will have 8 number of columns in md breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-md-cols-9 {
    /* 
    @name: mds-grid-md-cols-9
    @category: Grid
    @usage: 
    Use mds-grid-md-cols-9 class to define a grid with 9 columns for md breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-cols-9">
        Grid will have 9 number of columns in md breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-md-cols-10 {
    /* 
    @name: mds-grid-md-cols-10
    @category: Grid
    @usage: 
    Use mds-grid-md-cols-10 class to define a grid with 10 columns for md breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-cols-10">
        Grid will have 10 number of columns in md breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-md-cols-11 {
    /* 
    @name: mds-grid-md-cols-11
    @category: Grid
    @usage: 
    Use mds-grid-md-cols-11 class to define a grid with 11 columns for md breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-cols-11">
        Grid will have 11 number of columns in md breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid.mds-grid-md-cols-12 {
    /* 
    @name: mds-grid-md-cols-12
    @category: Grid
    @usage: 
    Use mds-grid-md-cols-12 class to define a grid with 12 columns for md breakpoint. 
    The default number of columns is:
    - 12 columns for for 1025px + viewport and MDS breakpoints: md and above,
    - 6 columns for viewport between 641px - 1024px, and MDS breakpoints: sm,
    - 2 columns for viewport below 640px, and MDS breakpoints: xs.
    But you can override it using this class.
    The class is dependent of the breakpoint, so when applied, the column layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-cols-12">
        Grid will have 12 number of columns in md breakpoint.
      </div>
    </div> */
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-1 {
    /* 
    @name: mds-grid-md-row-1
    @category: Grid
    @usage: 
    Use mds-grid-md-row-1 class to position the cell in the 1 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 1 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 1;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-2 {
    /* 
    @name: mds-grid-md-row-2
    @category: Grid
    @usage: 
    Use mds-grid-md-row-2 class to position the cell in the 2 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 2 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 2;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-3 {
    /* 
    @name: mds-grid-md-row-3
    @category: Grid
    @usage: 
    Use mds-grid-md-row-3 class to position the cell in the 3 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 3 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 3;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-4 {
    /* 
    @name: mds-grid-md-row-4
    @category: Grid
    @usage: 
    Use mds-grid-md-row-4 class to position the cell in the 4 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 4 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 4;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-5 {
    /* 
    @name: mds-grid-md-row-5
    @category: Grid
    @usage: 
    Use mds-grid-md-row-5 class to position the cell in the 5 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 5 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 5;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-6 {
    /* 
    @name: mds-grid-md-row-6
    @category: Grid
    @usage: 
    Use mds-grid-md-row-6 class to position the cell in the 6 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 6 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 6;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-7 {
    /* 
    @name: mds-grid-md-row-7
    @category: Grid
    @usage: 
    Use mds-grid-md-row-7 class to position the cell in the 7 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 7 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 7;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-8 {
    /* 
    @name: mds-grid-md-row-8
    @category: Grid
    @usage: 
    Use mds-grid-md-row-8 class to position the cell in the 8 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 8 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 8;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-9 {
    /* 
    @name: mds-grid-md-row-9
    @category: Grid
    @usage: 
    Use mds-grid-md-row-9 class to position the cell in the 9 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 9 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 9;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-10 {
    /* 
    @name: mds-grid-md-row-10
    @category: Grid
    @usage: 
    Use mds-grid-md-row-10 class to position the cell in the 10 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 10 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 10;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-11 {
    /* 
    @name: mds-grid-md-row-11
    @category: Grid
    @usage: 
    Use mds-grid-md-row-11 class to position the cell in the 11 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 11 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 11;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-12 {
    /* 
    @name: mds-grid-md-row-12
    @category: Grid
    @usage: 
    Use mds-grid-md-row-12 class to position the cell in the 12 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 12 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 12;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-13 {
    /* 
    @name: mds-grid-md-row-13
    @category: Grid
    @usage: 
    Use mds-grid-md-row-13 class to position the cell in the 13 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 13 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 13;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-14 {
    /* 
    @name: mds-grid-md-row-14
    @category: Grid
    @usage: 
    Use mds-grid-md-row-14 class to position the cell in the 14 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 14 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 14;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-15 {
    /* 
    @name: mds-grid-md-row-15
    @category: Grid
    @usage: 
    Use mds-grid-md-row-15 class to position the cell in the 15 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 15 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 15;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-16 {
    /* 
    @name: mds-grid-md-row-16
    @category: Grid
    @usage: 
    Use mds-grid-md-row-16 class to position the cell in the 16 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 16 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 16;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-17 {
    /* 
    @name: mds-grid-md-row-17
    @category: Grid
    @usage: 
    Use mds-grid-md-row-17 class to position the cell in the 17 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 17 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 17;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-18 {
    /* 
    @name: mds-grid-md-row-18
    @category: Grid
    @usage: 
    Use mds-grid-md-row-18 class to position the cell in the 18 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 18 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 18;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-19 {
    /* 
    @name: mds-grid-md-row-19
    @category: Grid
    @usage: 
    Use mds-grid-md-row-19 class to position the cell in the 19 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 19 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 19;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-20 {
    /* 
    @name: mds-grid-md-row-20
    @category: Grid
    @usage: 
    Use mds-grid-md-row-20 class to position the cell in the 20 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 20 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 20;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-21 {
    /* 
    @name: mds-grid-md-row-21
    @category: Grid
    @usage: 
    Use mds-grid-md-row-21 class to position the cell in the 21 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 21 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 21;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-22 {
    /* 
    @name: mds-grid-md-row-22
    @category: Grid
    @usage: 
    Use mds-grid-md-row-22 class to position the cell in the 22 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 22 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 22;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-23 {
    /* 
    @name: mds-grid-md-row-23
    @category: Grid
    @usage: 
    Use mds-grid-md-row-23 class to position the cell in the 23 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 23 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 23;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-24 {
    /* 
    @name: mds-grid-md-row-24
    @category: Grid
    @usage: 
    Use mds-grid-md-row-24 class to position the cell in the 24 row of the grid in md breakpoint.
    The class is dependent of the breakpoint, so when applied, the cell will only be in row 24 for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-1">Cell in row 1 for md breakpoint</div>
        <div class="mds-grid-md-row-2">Cell in row 2 for md breakpoint</div>
        ...
      </div>  
    </div> */
    grid-row-start: 24;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-1 {
    /* 
    @name: mds-grid-md-row-span-1
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-1 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-1">Cell spans over 1 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 1;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-2 {
    /* 
    @name: mds-grid-md-row-span-2
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-2 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-2">Cell spans over 2 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 2;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-3 {
    /* 
    @name: mds-grid-md-row-span-3
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-3 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-3">Cell spans over 3 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 3;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-4 {
    /* 
    @name: mds-grid-md-row-span-4
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-4 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-4">Cell spans over 4 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 4;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-5 {
    /* 
    @name: mds-grid-md-row-span-5
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-5 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-5">Cell spans over 5 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 5;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-6 {
    /* 
    @name: mds-grid-md-row-span-6
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-6 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-6">Cell spans over 6 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 6;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-7 {
    /* 
    @name: mds-grid-md-row-span-7
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-7 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-7">Cell spans over 7 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 7;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-8 {
    /* 
    @name: mds-grid-md-row-span-8
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-8 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-8">Cell spans over 8 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 8;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-9 {
    /* 
    @name: mds-grid-md-row-span-9
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-9 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-9">Cell spans over 9 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 9;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-10 {
    /* 
    @name: mds-grid-md-row-span-10
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-10 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-10">Cell spans over 10 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 10;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-11 {
    /* 
    @name: mds-grid-md-row-span-11
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-11 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-11">Cell spans over 11 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 11;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-12 {
    /* 
    @name: mds-grid-md-row-span-12
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-12 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-12">Cell spans over 12 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 12;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-13 {
    /* 
    @name: mds-grid-md-row-span-13
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-13 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-13">Cell spans over 13 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 13;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-14 {
    /* 
    @name: mds-grid-md-row-span-14
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-14 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-14">Cell spans over 14 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 14;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-15 {
    /* 
    @name: mds-grid-md-row-span-15
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-15 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-15">Cell spans over 15 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 15;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-16 {
    /* 
    @name: mds-grid-md-row-span-16
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-16 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-16">Cell spans over 16 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 16;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-17 {
    /* 
    @name: mds-grid-md-row-span-17
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-17 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-17">Cell spans over 17 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 17;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-18 {
    /* 
    @name: mds-grid-md-row-span-18
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-18 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-18">Cell spans over 18 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 18;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-19 {
    /* 
    @name: mds-grid-md-row-span-19
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-19 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-19">Cell spans over 19 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 19;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-20 {
    /* 
    @name: mds-grid-md-row-span-20
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-20 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-20">Cell spans over 20 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 20;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-21 {
    /* 
    @name: mds-grid-md-row-span-21
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-21 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-21">Cell spans over 21 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 21;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-22 {
    /* 
    @name: mds-grid-md-row-span-22
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-22 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-22">Cell spans over 22 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 22;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-23 {
    /* 
    @name: mds-grid-md-row-span-23
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-23 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-23">Cell spans over 23 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 23;
  }
  .mds .mds-container .mds-grid .mds-grid-md-row-span-24 {
    /* 
    @name: mds-grid-md-row-span-24
    @category: Grid
    @usage: 
    Use mds-grid-md-row-span-24 class to span multiple rows in your grid for md breakpoint.
    The class is dependent of the breakpoint, so when applied, the rows spanning will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid">
        <div class="mds-grid-md-row-span-24">Cell spans over 24 rows in md breakpoints</div>
        ...
      </div>
    </div> */
    grid-row-end: span 24;
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-1 {
    /* 
    @name: mds-grid-md-rows-1
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-1 class to define a grid with 1 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-1">
        Grid will have 1 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(1, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-2 {
    /* 
    @name: mds-grid-md-rows-2
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-2 class to define a grid with 2 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-2">
        Grid will have 2 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(2, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-3 {
    /* 
    @name: mds-grid-md-rows-3
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-3 class to define a grid with 3 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-3">
        Grid will have 3 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(3, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-4 {
    /* 
    @name: mds-grid-md-rows-4
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-4 class to define a grid with 4 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-4">
        Grid will have 4 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(4, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-5 {
    /* 
    @name: mds-grid-md-rows-5
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-5 class to define a grid with 5 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-5">
        Grid will have 5 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(5, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-6 {
    /* 
    @name: mds-grid-md-rows-6
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-6 class to define a grid with 6 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-6">
        Grid will have 6 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(6, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-7 {
    /* 
    @name: mds-grid-md-rows-7
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-7 class to define a grid with 7 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-7">
        Grid will have 7 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(7, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-8 {
    /* 
    @name: mds-grid-md-rows-8
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-8 class to define a grid with 8 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-8">
        Grid will have 8 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(8, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-9 {
    /* 
    @name: mds-grid-md-rows-9
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-9 class to define a grid with 9 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-9">
        Grid will have 9 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(9, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-10 {
    /* 
    @name: mds-grid-md-rows-10
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-10 class to define a grid with 10 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-10">
        Grid will have 10 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(10, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-11 {
    /* 
    @name: mds-grid-md-rows-11
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-11 class to define a grid with 11 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-11">
        Grid will have 11 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(11, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-12 {
    /* 
    @name: mds-grid-md-rows-12
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-12 class to define a grid with 12 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-12">
        Grid will have 12 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(12, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-13 {
    /* 
    @name: mds-grid-md-rows-13
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-13 class to define a grid with 13 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-13">
        Grid will have 13 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(13, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-14 {
    /* 
    @name: mds-grid-md-rows-14
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-14 class to define a grid with 14 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-14">
        Grid will have 14 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(14, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-15 {
    /* 
    @name: mds-grid-md-rows-15
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-15 class to define a grid with 15 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-15">
        Grid will have 15 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(15, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-16 {
    /* 
    @name: mds-grid-md-rows-16
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-16 class to define a grid with 16 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-16">
        Grid will have 16 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(16, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-17 {
    /* 
    @name: mds-grid-md-rows-17
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-17 class to define a grid with 17 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-17">
        Grid will have 17 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(17, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-18 {
    /* 
    @name: mds-grid-md-rows-18
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-18 class to define a grid with 18 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-18">
        Grid will have 18 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(18, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-19 {
    /* 
    @name: mds-grid-md-rows-19
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-19 class to define a grid with 19 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-19">
        Grid will have 19 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(19, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-20 {
    /* 
    @name: mds-grid-md-rows-20
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-20 class to define a grid with 20 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-20">
        Grid will have 20 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(20, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-21 {
    /* 
    @name: mds-grid-md-rows-21
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-21 class to define a grid with 21 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-21">
        Grid will have 21 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(21, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-22 {
    /* 
    @name: mds-grid-md-rows-22
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-22 class to define a grid with 22 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-22">
        Grid will have 22 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(22, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-23 {
    /* 
    @name: mds-grid-md-rows-23
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-23 class to define a grid with 23 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-23">
        Grid will have 23 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(23, auto);
  }
  .mds .mds-container .mds-grid.mds-grid-md-rows-24 {
    /* 
    @name: mds-grid-md-rows-24
    @category: Grid
    @usage: 
    Use mds-grid-md-rows-24 class to define a grid with 24 rows for md breakpoint. 
    The class is dependent of the breakpoint, so when applied, the row layout will apply only for md breakpoint.
    @example:
    <div class="mds-container">
      <div class="mds-grid mds-grid-md-rows-24">
        Grid will have 24 number of rows in md breakpoint.
      </div>
    </div> */
    grid-template-rows: repeat(24, auto);
  }
}.mds {
  /*
  @description: 
  Typography styles for the Maersk Design System.
  This file defines the typography styles used throughout the design system, including font families, sizes, weights, and styles for various text elements.
  It provides a consistent typographic scale that can be applied to headings, paragraphs, links, and other text elements.
  You need to wrap your content in a container with the mds class to apply these styles. 

  @basicExample:
  // No margins or paddings are applied to headings and paragraphs, only font styles.
  <div class="mds">
    <h1 class="mds-headline mds-headline--large">Heading 1</h1>
    <p class="mds-text mds-text--medium">This is a paragraph with medium text.</p>
    <a href="#" class="mds-link">This is a link</a>
  </div>

  @advancedExample:
  // With margins and paddings, and font styles applied to headings and paragraphs.
  <div class="mds mds-container">
    <h2 class="mds-headline mds-headline--medium">Heading 2</h2>
    <p class="mds-text mds-text--small">This is a paragraph with small text.</p>
    <a href="#" class="mds-link">This is a link</a>
  </div>
  */
}.mds .mds {
  /*
  @name: mds
  @category: Typography
  @usage:
  Use mds class to apply typography styles to the content.
  @example:
  <div class="mds">
    <h1 class="mds-headline mds-headline--large">Heading 1</h1>
    <p class="mds-text mds-text--medium">This is a paragraph with medium text.</p>
    <a href="#" class="mds-link">This is a link</a>
  </div>
  */
  background: var(--mds_foundations_body_background-color);
  color: var(--mds_foundations_body_text-color);
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizelegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
}.mds .mds {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_medium_mobile_font-size);
  line-height: var(--mds_brand_typography_text_medium_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds {
    font-size: var(--mds_brand_typography_text_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_text_medium_desktop_line-height);
  }
}.mds .mds {
  font-style: var(--mds_brand_typography_text_medium_normal_font-style);
  font-weight: var(--mds_brand_typography_text_medium_normal_font-weight);
}.mds .mds-headline--x-small, .mds h4 {
  /*
  @name: mds-headline--x-small
  @category: Headline
  @usage:
  Use mds-headline--x-small class to style any text as small headlines.
  @example:
  <div class="mds-headline mds-headline--x-small">This is a small headline</div>
  */
}.mds .mds-headline--x-small, .mds h4 {
  font-family: var(--mds_brand_typography_headline_font-family), var(--mds_brand_typography_headline_font-family-fallback);
  font-size: var(--mds_brand_typography_headline_x-small_mobile_font-size);
  line-height: var(--mds_brand_typography_headline_x-small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-headline--x-small, .mds h4 {
    font-size: var(--mds_brand_typography_headline_x-small_desktop_font-size);
    line-height: var(--mds_brand_typography_headline_x-small_desktop_line-height);
  }
}.mds .mds-headline--x-small, .mds h4 {
  text-transform: var(--mds_brand_typography_headline_x-small_text-transform);
  font-style: var(--mds_brand_typography_headline_x-small_font-style);
  font-weight: var(--mds_brand_typography_headline_x-small_font-weight);
}.mds .mds-headline--small, .mds h3 {
  /*
  @name: mds-headline--small
  @category: Headline
  @usage:
  Use mds-headline--small class to style any text as small headlines.
  @example:
  <div class="mds-headline mds-headline--small">This is a small headline</div>
  */
}.mds .mds-headline--small, .mds h3 {
  font-family: var(--mds_brand_typography_headline_font-family), var(--mds_brand_typography_headline_font-family-fallback);
  font-size: var(--mds_brand_typography_headline_small_mobile_font-size);
  line-height: var(--mds_brand_typography_headline_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-headline--small, .mds h3 {
    font-size: var(--mds_brand_typography_headline_small_desktop_font-size);
    line-height: var(--mds_brand_typography_headline_small_desktop_line-height);
  }
}.mds .mds-headline--small, .mds h3 {
  text-transform: var(--mds_brand_typography_headline_small_text-transform);
  font-style: var(--mds_brand_typography_headline_small_font-style);
  font-weight: var(--mds_brand_typography_headline_small_font-weight);
}.mds .mds-headline--medium, .mds h2 {
  /*
  @name: mds-headline--medium
  @category: Headline
  @usage:
  Use mds-headline--medium class to style any text as medium headlines.
  @example:
  <div class="mds-headline mds-headline--medium">This is a medium headline</div>
  */
}.mds .mds-headline--medium, .mds h2 {
  font-family: var(--mds_brand_typography_headline_font-family), var(--mds_brand_typography_headline_font-family-fallback);
  font-size: var(--mds_brand_typography_headline_medium_mobile_font-size);
  line-height: var(--mds_brand_typography_headline_medium_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-headline--medium, .mds h2 {
    font-size: var(--mds_brand_typography_headline_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_headline_medium_desktop_line-height);
  }
}.mds .mds-headline--medium, .mds h2 {
  text-transform: var(--mds_brand_typography_headline_medium_text-transform);
  font-style: var(--mds_brand_typography_headline_medium_font-style);
  font-weight: var(--mds_brand_typography_headline_medium_font-weight);
}.mds .mds-headline--large, .mds h1 {
  /*
  @name: mds-headline--large
  @category: Headline
  @usage:
  Use mds-headline--large class to style any text as large headlines.
  @example:
  <div class="mds-headline mds-headline--large">This is a large headline</div>
  */
}.mds .mds-headline--large, .mds h1 {
  font-family: var(--mds_brand_typography_headline_font-family), var(--mds_brand_typography_headline_font-family-fallback);
  font-size: var(--mds_brand_typography_headline_large_mobile_font-size);
  line-height: var(--mds_brand_typography_headline_large_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-headline--large, .mds h1 {
    font-size: var(--mds_brand_typography_headline_large_desktop_font-size);
    line-height: var(--mds_brand_typography_headline_large_desktop_line-height);
  }
}.mds .mds-headline--large, .mds h1 {
  text-transform: var(--mds_brand_typography_headline_large_text-transform);
  font-style: var(--mds_brand_typography_headline_large_font-style);
  font-weight: var(--mds_brand_typography_headline_large_font-weight);
}.mds .mds-headline--x-large {
  /*
  @name: mds-headline--x-large
  @category: Headline
  @usage:
  Use mds-headline--x-large class to style any text as extra large headlines.
  @example:
  <div class="mds-headline mds-headline--x-large">This is an extra large headline</div>
  */
}.mds .mds-headline--x-large {
  font-family: var(--mds_brand_typography_headline_font-family), var(--mds_brand_typography_headline_font-family-fallback);
  font-size: var(--mds_brand_typography_headline_x-large_mobile_font-size);
  line-height: var(--mds_brand_typography_headline_x-large_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-headline--x-large {
    font-size: var(--mds_brand_typography_headline_x-large_desktop_font-size);
    line-height: var(--mds_brand_typography_headline_x-large_desktop_line-height);
  }
}.mds .mds-headline--x-large {
  text-transform: var(--mds_brand_typography_headline_x-large_text-transform);
  font-style: var(--mds_brand_typography_headline_x-large_font-style);
  font-weight: var(--mds_brand_typography_headline_x-large_font-weight);
}.mds .mds-text--x-small-normal {
  /*      
  @name: mds-text--x-small-normal
  @category: Text
  @usage:
  Use mds-text--x-small-normal class to style text with x-small normal font size.
  @example:
  <p class="mds-text mds-text--x-small-normal">This is x-small normal text</p>
  */
}.mds .mds-text--x-small-normal {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_x-small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_x-small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--x-small-normal {
    font-size: var(--mds_brand_typography_text_x-small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_x-small_desktop_line-height);
  }
}.mds .mds-text--x-small-normal {
  font-style: var(--mds_brand_typography_text_x-small_normal_font-style);
  font-weight: var(--mds_brand_typography_text_x-small_normal_font-weight);
}.mds .mds-text--x-small-medium {
  /*
  @name: mds-text--x-small-medium
  @category: Text
  @usage:
  Use mds-text--x-small-medium class to style text with x-small medium font size.
  @example:
  <p class="mds-text mds-text--x-small-medium">This is x-small medium text</p>
  */
}.mds .mds-text--x-small-medium {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_x-small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_x-small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--x-small-medium {
    font-size: var(--mds_brand_typography_text_x-small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_x-small_desktop_line-height);
  }
}.mds .mds-text--x-small-medium {
  font-style: var(--mds_brand_typography_text_x-small_medium_font-style);
  font-weight: var(--mds_brand_typography_text_x-small_medium_font-weight);
}.mds .mds-text--x-small-bold {
  /*
  @name: mds-text--x-small-bold
  @category: Text
  @usage:
  Use mds-text--x-small-bold class to style text with x-small bold font size.
  @example:
  <p class="mds-text mds-text--x-small-bold">This is x-small bold text</p>
  */
}.mds .mds-text--x-small-bold {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_x-small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_x-small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--x-small-bold {
    font-size: var(--mds_brand_typography_text_x-small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_x-small_desktop_line-height);
  }
}.mds .mds-text--x-small-bold {
  font-style: var(--mds_brand_typography_text_x-small_bold_font-style);
  font-weight: var(--mds_brand_typography_text_x-small_bold_font-weight);
}.mds .mds-text--x-small-italic {
  /*
  @name: mds-text--x-small-italic
  @category: Text
  @usage:
  Use mds-text--x-small-italic class to style text with x-small italic font size.
  @example:
  <p class="mds-text mds-text--x-small-italic">This is x-small italic text</p>
  */
}.mds .mds-text--x-small-italic {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_x-small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_x-small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--x-small-italic {
    font-size: var(--mds_brand_typography_text_x-small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_x-small_desktop_line-height);
  }
}.mds .mds-text--x-small-italic {
  font-style: var(--mds_brand_typography_text_x-small_italic_font-style);
  font-weight: var(--mds_brand_typography_text_x-small_italic_font-weight);
}.mds .mds-text--x-small-mediumitalic {
  /*
  @name: mds-text--x-small-mediumitalic
  @category: Text
  @usage:
  Use mds-text--x-small-mediumitalic class to style text with x-small medium italic font size.
  @example:
  <p class="mds-text mds-text--x-small-mediumitalic">This is x-small medium italic text</p>
  */
}.mds .mds-text--x-small-mediumitalic {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_x-small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_x-small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--x-small-mediumitalic {
    font-size: var(--mds_brand_typography_text_x-small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_x-small_desktop_line-height);
  }
}.mds .mds-text--x-small-mediumitalic {
  font-style: var(--mds_brand_typography_text_x-small_mediumitalic_font-style);
  font-weight: var(--mds_brand_typography_text_x-small_mediumitalic_font-weight);
}.mds .mds-text--x-small-bolditalic {
  /*
  @name: mds-text--x-small-bolditalic
  @category: Text
  @usage:
  Use mds-text--x-small-bolditalic class to style text with x-small bold italic font size.
  @example:
  <p class="mds-text mds-text--x-small-bolditalic">This is x-small bold italic text</p>
  */
}.mds .mds-text--x-small-bolditalic {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_x-small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_x-small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--x-small-bolditalic {
    font-size: var(--mds_brand_typography_text_x-small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_x-small_desktop_line-height);
  }
}.mds .mds-text--x-small-bolditalic {
  font-style: var(--mds_brand_typography_text_x-small_bolditalic_font-style);
  font-weight: var(--mds_brand_typography_text_x-small_bolditalic_font-weight);
}.mds .mds-text--small-normal {
  /*
  @name: mds-text--small-normal
  @category: Text
  @usage:
  Use mds-text--small-normal class to style text with small normal font size.
  @example:
  <p class="mds-text mds-text--small-normal">This is small normal text</p>
  */
}.mds .mds-text--small-normal {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--small-normal {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-text--small-normal {
  font-style: var(--mds_brand_typography_text_small_normal_font-style);
  font-weight: var(--mds_brand_typography_text_small_normal_font-weight);
}.mds .mds-text--small-medium {
  /*
  @name: mds-text--small-medium
  @category: Text
  @usage:
  Use mds-text--small-medium class to style text with small medium font size.
  @example:
  <p class="mds-text mds-text--small-medium">This is small medium text</p>
  */
}.mds .mds-text--small-medium {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--small-medium {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-text--small-medium {
  font-style: var(--mds_brand_typography_text_small_medium_font-style);
  font-weight: var(--mds_brand_typography_text_small_medium_font-weight);
}.mds .mds-text--small-bold {
  /*
  @name: mds-text--small-bold
  @category: Text
  @usage:
  Use mds-text--small-bold class to style text with small bold font size.
  @example:
  <p class="mds-text mds-text--small-bold">This is small bold text</p>
  */
}.mds .mds-text--small-bold {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--small-bold {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-text--small-bold {
  font-style: var(--mds_brand_typography_text_small_bold_font-style);
  font-weight: var(--mds_brand_typography_text_small_bold_font-weight);
}.mds .mds-text--small-italic {
  /*
  @name: mds-text--small-italic
  @category: Text
  @usage:
  Use mds-text--small-italic class to style text with small italic font size.
  @example:
  <p class="mds-text mds-text--small-italic">This is small italic text</p>
  */
}.mds .mds-text--small-italic {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--small-italic {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-text--small-italic {
  font-style: var(--mds_brand_typography_text_small_italic_font-style);
  font-weight: var(--mds_brand_typography_text_small_italic_font-weight);
}.mds .mds-text--small-mediumitalic {
  /*
  @name: mds-text--small-mediumitalic
  @category: Text
  @usage:
  Use mds-text--small-mediumitalic class to style text with small medium italic font size.
  @example:
  <p class="mds-text mds-text--small-mediumitalic">This is small medium italic text</p>
  */
}.mds .mds-text--small-mediumitalic {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--small-mediumitalic {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-text--small-mediumitalic {
  font-style: var(--mds_brand_typography_text_small_mediumitalic_font-style);
  font-weight: var(--mds_brand_typography_text_small_mediumitalic_font-weight);
}.mds .mds-text--small-bolditalic {
  /*
  @name: mds-text--small-bolditalic
  @category: Text
  @usage:
  Use mds-text--small-bolditalic class to style text with small bold italic font size.
  @example:
  <p class="mds-text mds-text--small-bolditalic">This is small bold italic text</p>
  */
}.mds .mds-text--small-bolditalic {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--small-bolditalic {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-text--small-bolditalic {
  font-style: var(--mds_brand_typography_text_small_bolditalic_font-style);
  font-weight: var(--mds_brand_typography_text_small_bolditalic_font-weight);
}.mds .mds-text--medium-normal {
  /*
  @name: mds-text--medium-normal
  @category: Text
  @usage:
  Use mds-text--medium-normal class to style text with medium normal font size.
  @example:
  <p class="mds-text mds-text--medium-normal">This is medium normal text</p>
  */
}.mds .mds-text--medium-normal {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_medium_mobile_font-size);
  line-height: var(--mds_brand_typography_text_medium_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--medium-normal {
    font-size: var(--mds_brand_typography_text_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_text_medium_desktop_line-height);
  }
}.mds .mds-text--medium-normal {
  font-style: var(--mds_brand_typography_text_medium_normal_font-style);
  font-weight: var(--mds_brand_typography_text_medium_normal_font-weight);
}.mds .mds-text--medium-medium {
  /*
  @name: mds-text--medium-medium
  @category: Text
  @usage:
  Use mds-text--medium-medium class to style text with medium medium font size.
  @example:
  <p class="mds-text mds-text--medium-medium">This is medium medium text</p>
  */
}.mds .mds-text--medium-medium {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_medium_mobile_font-size);
  line-height: var(--mds_brand_typography_text_medium_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--medium-medium {
    font-size: var(--mds_brand_typography_text_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_text_medium_desktop_line-height);
  }
}.mds .mds-text--medium-medium {
  font-style: var(--mds_brand_typography_text_medium_medium_font-style);
  font-weight: var(--mds_brand_typography_text_medium_medium_font-weight);
}.mds .mds-text--medium-bold, .mds h5,
.mds h6 {
  /*
  @name: mds-text--medium-bold
  @category: Text
  @usage:
  Use mds-text--medium-bold class to style text with medium bold font size.
  @example:
  <p class="mds-text mds-text--medium-bold">This is medium bold text</p>
  */
}.mds .mds-text--medium-bold, .mds h5,
.mds h6 {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_medium_mobile_font-size);
  line-height: var(--mds_brand_typography_text_medium_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--medium-bold, .mds h5,
  .mds h6 {
    font-size: var(--mds_brand_typography_text_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_text_medium_desktop_line-height);
  }
}.mds .mds-text--medium-bold, .mds h5,
.mds h6 {
  font-style: var(--mds_brand_typography_text_medium_bold_font-style);
  font-weight: var(--mds_brand_typography_text_medium_bold_font-weight);
}.mds .mds-text--medium-italic {
  /*
  @name: mds-text--medium-italic
  @category: Text
  @usage:
  Use mds-text--medium-italic class to style text with medium italic font size.
  @example:
  <p class="mds-text mds-text--medium-italic">This is medium italic text</p>
  */
}.mds .mds-text--medium-italic {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_medium_mobile_font-size);
  line-height: var(--mds_brand_typography_text_medium_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--medium-italic {
    font-size: var(--mds_brand_typography_text_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_text_medium_desktop_line-height);
  }
}.mds .mds-text--medium-italic {
  font-style: var(--mds_brand_typography_text_medium_italic_font-style);
  font-weight: var(--mds_brand_typography_text_medium_italic_font-weight);
}.mds .mds-text--medium-mediumitalic {
  /*
  @name: mds-text--medium-mediumitalic
  @category: Text
  @usage:
  Use mds-text--medium-mediumitalic class to style text with medium medium italic font size.
  @example:
  <p class="mds-text mds-text--medium-mediumitalic">This is medium medium italic text</p>
  */
}.mds .mds-text--medium-mediumitalic {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_medium_mobile_font-size);
  line-height: var(--mds_brand_typography_text_medium_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--medium-mediumitalic {
    font-size: var(--mds_brand_typography_text_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_text_medium_desktop_line-height);
  }
}.mds .mds-text--medium-mediumitalic {
  font-style: var(--mds_brand_typography_text_medium_mediumitalic_font-style);
  font-weight: var(--mds_brand_typography_text_medium_mediumitalic_font-weight);
}.mds .mds-text--medium-bolditalic {
  /*
  @name: mds-text--medium-bolditalic
  @category: Text
  @usage:
  Use mds-text--medium-bolditalic class to style text with medium bold italic font size.
  @example:
  <p class="mds-text mds-text--medium-bolditalic">This is medium bold italic text</p>
  */
}.mds .mds-text--medium-bolditalic {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_medium_mobile_font-size);
  line-height: var(--mds_brand_typography_text_medium_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--medium-bolditalic {
    font-size: var(--mds_brand_typography_text_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_text_medium_desktop_line-height);
  }
}.mds .mds-text--medium-bolditalic {
  font-style: var(--mds_brand_typography_text_medium_bolditalic_font-style);
  font-weight: var(--mds_brand_typography_text_medium_bolditalic_font-weight);
}.mds .mds-text--large-normal {
  /*
  @name: mds-text--large-normal
  @category: Text
  @usage:
  Use mds-text--large-normal class to style text with large normal font size.
  @example:
  <p class="mds-text mds-text--large-normal">This is large normal text</p>
  */
}.mds .mds-text--large-normal {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_large_mobile_font-size);
  line-height: var(--mds_brand_typography_text_large_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--large-normal {
    font-size: var(--mds_brand_typography_text_large_desktop_font-size);
    line-height: var(--mds_brand_typography_text_large_desktop_line-height);
  }
}.mds .mds-text--large-normal {
  font-style: var(--mds_brand_typography_text_large_normal_font-style);
  font-weight: var(--mds_brand_typography_text_large_normal_font-weight);
}.mds .mds-text--large-medium {
  /*
  @name: mds-text--large-medium
  @category: Text
  @usage:
  Use mds-text--large-medium class to style text with large medium font size.
  @example:
  <p class="mds-text mds-text--large-medium">This is large medium text</p>
  */
}.mds .mds-text--large-medium {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_large_mobile_font-size);
  line-height: var(--mds_brand_typography_text_large_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--large-medium {
    font-size: var(--mds_brand_typography_text_large_desktop_font-size);
    line-height: var(--mds_brand_typography_text_large_desktop_line-height);
  }
}.mds .mds-text--large-medium {
  font-style: var(--mds_brand_typography_text_large_medium_font-style);
  font-weight: var(--mds_brand_typography_text_large_medium_font-weight);
}.mds .mds-text--large-bold {
  /*
  @name: mds-text--large-bold
  @category: Text
  @usage:
  Use mds-text--large-bold class to style text with large bold font size.
  @example:
  <p class="mds-text mds-text--large-bold">This is large bold text</p>
  */
}.mds .mds-text--large-bold {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_large_mobile_font-size);
  line-height: var(--mds_brand_typography_text_large_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--large-bold {
    font-size: var(--mds_brand_typography_text_large_desktop_font-size);
    line-height: var(--mds_brand_typography_text_large_desktop_line-height);
  }
}.mds .mds-text--large-bold {
  font-style: var(--mds_brand_typography_text_large_bold_font-style);
  font-weight: var(--mds_brand_typography_text_large_bold_font-weight);
}.mds .mds-text--large-italic {
  /*
  @name: mds-text--large-italic
  @category: Text
  @usage:
  Use mds-text--large-italic class to style text with large italic font size.
  @example:
  <p class="mds-text mds-text--large-italic">This is large italic text</p>
  */
}.mds .mds-text--large-italic {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_large_mobile_font-size);
  line-height: var(--mds_brand_typography_text_large_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--large-italic {
    font-size: var(--mds_brand_typography_text_large_desktop_font-size);
    line-height: var(--mds_brand_typography_text_large_desktop_line-height);
  }
}.mds .mds-text--large-italic {
  font-style: var(--mds_brand_typography_text_large_italic_font-style);
  font-weight: var(--mds_brand_typography_text_large_italic_font-weight);
}.mds .mds-text--large-mediumitalic {
  /*
  @name: mds-text--large-mediumitalic
  @category: Text
  @usage:
  Use mds-text--large-mediumitalic class to style text with large medium italic font size.
  @example:
  <p class="mds-text mds-text--large-mediumitalic">This is large medium italic text</p>
  */
}.mds .mds-text--large-mediumitalic {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_large_mobile_font-size);
  line-height: var(--mds_brand_typography_text_large_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--large-mediumitalic {
    font-size: var(--mds_brand_typography_text_large_desktop_font-size);
    line-height: var(--mds_brand_typography_text_large_desktop_line-height);
  }
}.mds .mds-text--large-mediumitalic {
  font-style: var(--mds_brand_typography_text_large_mediumitalic_font-style);
  font-weight: var(--mds_brand_typography_text_large_mediumitalic_font-weight);
}.mds .mds-text--large-bolditalic {
  /*
  @name: mds-text--large-bolditalic
  @category: Text
  @usage:
  Use mds-text--large-bolditalic class to style text with large bold italic font size.
  @example:
  <p class="mds-text mds-text--large-bolditalic">This is large bold italic text</p>
  */
}.mds .mds-text--large-bolditalic {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_large_mobile_font-size);
  line-height: var(--mds_brand_typography_text_large_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-text--large-bolditalic {
    font-size: var(--mds_brand_typography_text_large_desktop_font-size);
    line-height: var(--mds_brand_typography_text_large_desktop_line-height);
  }
}.mds .mds-text--large-bolditalic {
  font-style: var(--mds_brand_typography_text_large_bolditalic_font-style);
  font-weight: var(--mds_brand_typography_text_large_bolditalic_font-weight);
}@container (max-width: 1024px) {
  .mds .mds-container .mds-headline--x-small, .mds .mds-container h4 {
    font-size: var(--mds_brand_typography_headline_x-small_mobile_font-size);
    line-height: var(--mds_brand_typography_headline_x-small_mobile_line-height);
  }
}@container (min-width: 1025px) {
  .mds .mds-container .mds-headline--x-small, .mds .mds-container h4 {
    font-size: var(--mds_brand_typography_headline_x-small_desktop_font-size);
    line-height: var(--mds_brand_typography_headline_x-small_desktop_line-height);
  }
}@container (max-width: 1024px) {
  .mds .mds-container .mds-headline--small, .mds .mds-container h3 {
    font-size: var(--mds_brand_typography_headline_small_mobile_font-size);
    line-height: var(--mds_brand_typography_headline_small_mobile_line-height);
  }
}@container (min-width: 1025px) {
  .mds .mds-container .mds-headline--small, .mds .mds-container h3 {
    font-size: var(--mds_brand_typography_headline_small_desktop_font-size);
    line-height: var(--mds_brand_typography_headline_small_desktop_line-height);
  }
}@container (max-width: 1024px) {
  .mds .mds-container .mds-headline--medium, .mds .mds-container h2 {
    font-size: var(--mds_brand_typography_headline_medium_mobile_font-size);
    line-height: var(--mds_brand_typography_headline_medium_mobile_line-height);
  }
}@container (min-width: 1025px) {
  .mds .mds-container .mds-headline--medium, .mds .mds-container h2 {
    font-size: var(--mds_brand_typography_headline_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_headline_medium_desktop_line-height);
  }
}@container (max-width: 1024px) {
  .mds .mds-container .mds-headline--large, .mds .mds-container h1 {
    font-size: var(--mds_brand_typography_headline_large_mobile_font-size);
    line-height: var(--mds_brand_typography_headline_large_mobile_line-height);
  }
}@container (min-width: 1025px) {
  .mds .mds-container .mds-headline--large, .mds .mds-container h1 {
    font-size: var(--mds_brand_typography_headline_large_desktop_font-size);
    line-height: var(--mds_brand_typography_headline_large_desktop_line-height);
  }
}@container (max-width: 1024px) {
  .mds .mds-container .mds-headline--x-large {
    font-size: var(--mds_brand_typography_headline_x-large_mobile_font-size);
    line-height: var(--mds_brand_typography_headline_x-large_mobile_line-height);
  }
}@container (min-width: 1025px) {
  .mds .mds-container .mds-headline--x-large {
    font-size: var(--mds_brand_typography_headline_x-large_desktop_font-size);
    line-height: var(--mds_brand_typography_headline_x-large_desktop_line-height);
  }
}@container (max-width: 1024px) {
  .mds .mds-container .mds-text--x-small-normal, .mds .mds-container .mds-text--x-small-medium, .mds .mds-container .mds-text--x-small-bold, .mds .mds-container .mds-text--x-small-italic, .mds .mds-container .mds-text--x-small-mediumitalic, .mds .mds-container .mds-text--x-small-bolditalic {
    font-size: var(--mds_brand_typography_text_x-small_mobile_font-size);
    line-height: var(--mds_brand_typography_text_x-small_mobile_line-height);
  }
}@container (min-width: 1025px) {
  .mds .mds-container .mds-text--x-small-normal, .mds .mds-container .mds-text--x-small-medium, .mds .mds-container .mds-text--x-small-bold, .mds .mds-container .mds-text--x-small-italic, .mds .mds-container .mds-text--x-small-mediumitalic, .mds .mds-container .mds-text--x-small-bolditalic {
    font-size: var(--mds_brand_typography_text_x-small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_x-small_desktop_line-height);
  }
}@container (max-width: 1024px) {
  .mds .mds-container .mds-text--small-normal, .mds .mds-container .mds-text--small-medium, .mds .mds-container .mds-text--small-bold, .mds .mds-container .mds-text--small-italic, .mds .mds-container .mds-text--small-mediumitalic, .mds .mds-container .mds-text--small-bolditalic {
    font-size: var(--mds_brand_typography_text_small_mobile_font-size);
    line-height: var(--mds_brand_typography_text_small_mobile_line-height);
  }
}@container (min-width: 1025px) {
  .mds .mds-container .mds-text--small-normal, .mds .mds-container .mds-text--small-medium, .mds .mds-container .mds-text--small-bold, .mds .mds-container .mds-text--small-italic, .mds .mds-container .mds-text--small-mediumitalic, .mds .mds-container .mds-text--small-bolditalic {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}@container (max-width: 1024px) {
  .mds .mds-container .mds-text--medium-normal, .mds .mds-container .mds-text--medium-medium, .mds .mds-container .mds-text--medium-bold, .mds .mds-container h5,
  .mds .mds-container h6, .mds .mds-container .mds-text--medium-italic, .mds .mds-container .mds-text--medium-mediumitalic, .mds .mds-container .mds-text--medium-bolditalic {
    font-size: var(--mds_brand_typography_text_medium_mobile_font-size);
    line-height: var(--mds_brand_typography_text_medium_mobile_line-height);
  }
}@container (min-width: 1025px) {
  .mds .mds-container .mds-text--medium-normal, .mds .mds-container .mds-text--medium-medium, .mds .mds-container .mds-text--medium-bold, .mds .mds-container h5,
  .mds .mds-container h6, .mds .mds-container .mds-text--medium-italic, .mds .mds-container .mds-text--medium-mediumitalic, .mds .mds-container .mds-text--medium-bolditalic {
    font-size: var(--mds_brand_typography_text_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_text_medium_desktop_line-height);
  }
}@container (max-width: 1024px) {
  .mds .mds-container .mds-text--large-normal, .mds .mds-container .mds-text--large-medium, .mds .mds-container .mds-text--large-bold, .mds .mds-container .mds-text--large-italic, .mds .mds-container .mds-text--large-mediumitalic, .mds .mds-container .mds-text--large-bolditalic {
    font-size: var(--mds_brand_typography_text_large_mobile_font-size);
    line-height: var(--mds_brand_typography_text_large_mobile_line-height);
  }
}@container (min-width: 1025px) {
  .mds .mds-container .mds-text--large-normal, .mds .mds-container .mds-text--large-medium, .mds .mds-container .mds-text--large-bold, .mds .mds-container .mds-text--large-italic, .mds .mds-container .mds-text--large-mediumitalic, .mds .mds-container .mds-text--large-bolditalic {
    font-size: var(--mds_brand_typography_text_large_desktop_font-size);
    line-height: var(--mds_brand_typography_text_large_desktop_line-height);
  }
}.mds .mds-tabular-figures {
  font-feature-settings: "tnum";
}.mds .mds-numeric.mds-tabular-figures {
  font-feature-settings: "salt" on, "tnum";
}.mds .mds-numeric {
  font-feature-settings: "salt" on;
  font-variant-numeric: slashed-zero;
}.mds h1,
.mds h2,
.mds h3,
.mds h4,
.mds h5,
.mds h6,
.mds p {
  padding: 0;
  margin: 0;
}.mds em {
  font-style: var(--mds_brand_typography_text_medium_italic_font-style);
}.mds strong {
  font-weight: var(--mds_brand_typography_text_medium_bold_font-weight);
}.mds .mds-underline--dotted {
  /*
  @name: mds-underline--dotted
  @category: Typography
  @usage:
  Use mds-underline--dotted class to apply a dotted underline style to text.
  @example:
  <span class="mds-underline--dotted">This text has a dotted underline</span>
  */
}.mds .mds-underline--dotted {
  text-decoration: underline dotted;
}.mds {
  /** 
  These classes are auto-generated out of their counter-part design-tokens 
  during build of foundations using scripts/utils/generate-gap-utility-classes.mjs

  @description: 
  The MDS offers a collection of gap utility classes that can be used to control the spacing between elements in a mds grid or mds flex layout. 
  These classes allow you to easily apply consistent spacing throughout your application.

  @basicExample:
  <div class="mds-container">
    <div class="mds-grid mds-gap-200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
   **/
}.mds .mds-gap-50,
.mds .mds-container .mds-gap-50,
.mds .mds-viewport .mds-gap-50 {
  /*
  @name: mds-gap-50, mds-xs-gap-50, mds-sm-gap-50, mds-md-gap-50, mds-lg-gap-50, mds-xl-gap-50
  @category: Gap
  @usage: 
  Use mds-gap-50 class to apply gap of 2px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-50, mds-sm-gap-50, mds-md-gap-50, mds-lg-gap-50, mds-xl-gap-50 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-50">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-50">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 2px;
}.mds .mds-col-gap-50,
.mds .mds-container .mds-col-gap-50,
.mds .mds-viewport .mds-col-gap-50 {
  /*
  @name: mds-col-gap-50, mds-xs-col-gap-50, mds-sm-col-gap-50, mds-md-col-gap-50, mds-lg-col-gap-50, mds-xl-col-gap-50
  @category: Gap
  @usage: 
  Use mds-col-gap-50 class to apply a gap of 2px between columns in a grid or flex box.
  Use mds-xs-col-gap-50, mds-sm-col-gap-50, mds-md-col-gap-50, mds-lg-col-gap-50, mds-xl-col-gap-50 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-50">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-50">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 2px;
}.mds .mds-row-gap-50,
.mds .mds-container .mds-row-gap-50,
.mds .mds-viewport .mds-row-gap-50 {
  /*
  @name: mds-row-gap-50, mds-xs-row-gap-50, mds-sm-row-gap-50, mds-md-row-gap-50, mds-lg-row-gap-50, mds-xl-row-gap-50
  @category: Gap
  @usage: 
  Use mds-row-gap-50 class to apply a gap of 2px between rows in a grid or flex box.
  Use mds-xs-row-gap-50, mds-sm-row-gap-50, mds-md-row-gap-50, mds-lg-row-gap-50, mds-xl-row-gap-50 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-50">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-50">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 2px;
}.mds .mds-gap-100,
.mds .mds-container .mds-gap-100,
.mds .mds-viewport .mds-gap-100 {
  /*
  @name: mds-gap-100, mds-xs-gap-100, mds-sm-gap-100, mds-md-gap-100, mds-lg-gap-100, mds-xl-gap-100
  @category: Gap
  @usage: 
  Use mds-gap-100 class to apply gap of 4px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-100, mds-sm-gap-100, mds-md-gap-100, mds-lg-gap-100, mds-xl-gap-100 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-100">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-100">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 4px;
}.mds .mds-col-gap-100,
.mds .mds-container .mds-col-gap-100,
.mds .mds-viewport .mds-col-gap-100 {
  /*
  @name: mds-col-gap-100, mds-xs-col-gap-100, mds-sm-col-gap-100, mds-md-col-gap-100, mds-lg-col-gap-100, mds-xl-col-gap-100
  @category: Gap
  @usage: 
  Use mds-col-gap-100 class to apply a gap of 4px between columns in a grid or flex box.
  Use mds-xs-col-gap-100, mds-sm-col-gap-100, mds-md-col-gap-100, mds-lg-col-gap-100, mds-xl-col-gap-100 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-100">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-100">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 4px;
}.mds .mds-row-gap-100,
.mds .mds-container .mds-row-gap-100,
.mds .mds-viewport .mds-row-gap-100 {
  /*
  @name: mds-row-gap-100, mds-xs-row-gap-100, mds-sm-row-gap-100, mds-md-row-gap-100, mds-lg-row-gap-100, mds-xl-row-gap-100
  @category: Gap
  @usage: 
  Use mds-row-gap-100 class to apply a gap of 4px between rows in a grid or flex box.
  Use mds-xs-row-gap-100, mds-sm-row-gap-100, mds-md-row-gap-100, mds-lg-row-gap-100, mds-xl-row-gap-100 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-100">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-100">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 4px;
}.mds .mds-gap-150,
.mds .mds-container .mds-gap-150,
.mds .mds-viewport .mds-gap-150 {
  /*
  @name: mds-gap-150, mds-xs-gap-150, mds-sm-gap-150, mds-md-gap-150, mds-lg-gap-150, mds-xl-gap-150
  @category: Gap
  @usage: 
  Use mds-gap-150 class to apply gap of 6px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-150, mds-sm-gap-150, mds-md-gap-150, mds-lg-gap-150, mds-xl-gap-150 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-150">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-150">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 6px;
}.mds .mds-col-gap-150,
.mds .mds-container .mds-col-gap-150,
.mds .mds-viewport .mds-col-gap-150 {
  /*
  @name: mds-col-gap-150, mds-xs-col-gap-150, mds-sm-col-gap-150, mds-md-col-gap-150, mds-lg-col-gap-150, mds-xl-col-gap-150
  @category: Gap
  @usage: 
  Use mds-col-gap-150 class to apply a gap of 6px between columns in a grid or flex box.
  Use mds-xs-col-gap-150, mds-sm-col-gap-150, mds-md-col-gap-150, mds-lg-col-gap-150, mds-xl-col-gap-150 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-150">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-150">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 6px;
}.mds .mds-row-gap-150,
.mds .mds-container .mds-row-gap-150,
.mds .mds-viewport .mds-row-gap-150 {
  /*
  @name: mds-row-gap-150, mds-xs-row-gap-150, mds-sm-row-gap-150, mds-md-row-gap-150, mds-lg-row-gap-150, mds-xl-row-gap-150
  @category: Gap
  @usage: 
  Use mds-row-gap-150 class to apply a gap of 6px between rows in a grid or flex box.
  Use mds-xs-row-gap-150, mds-sm-row-gap-150, mds-md-row-gap-150, mds-lg-row-gap-150, mds-xl-row-gap-150 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-150">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-150">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 6px;
}.mds .mds-gap-200,
.mds .mds-container .mds-gap-200,
.mds .mds-viewport .mds-gap-200 {
  /*
  @name: mds-gap-200, mds-xs-gap-200, mds-sm-gap-200, mds-md-gap-200, mds-lg-gap-200, mds-xl-gap-200
  @category: Gap
  @usage: 
  Use mds-gap-200 class to apply gap of 8px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-200, mds-sm-gap-200, mds-md-gap-200, mds-lg-gap-200, mds-xl-gap-200 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 8px;
}.mds .mds-col-gap-200,
.mds .mds-container .mds-col-gap-200,
.mds .mds-viewport .mds-col-gap-200 {
  /*
  @name: mds-col-gap-200, mds-xs-col-gap-200, mds-sm-col-gap-200, mds-md-col-gap-200, mds-lg-col-gap-200, mds-xl-col-gap-200
  @category: Gap
  @usage: 
  Use mds-col-gap-200 class to apply a gap of 8px between columns in a grid or flex box.
  Use mds-xs-col-gap-200, mds-sm-col-gap-200, mds-md-col-gap-200, mds-lg-col-gap-200, mds-xl-col-gap-200 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 8px;
}.mds .mds-row-gap-200,
.mds .mds-container .mds-row-gap-200,
.mds .mds-viewport .mds-row-gap-200 {
  /*
  @name: mds-row-gap-200, mds-xs-row-gap-200, mds-sm-row-gap-200, mds-md-row-gap-200, mds-lg-row-gap-200, mds-xl-row-gap-200
  @category: Gap
  @usage: 
  Use mds-row-gap-200 class to apply a gap of 8px between rows in a grid or flex box.
  Use mds-xs-row-gap-200, mds-sm-row-gap-200, mds-md-row-gap-200, mds-lg-row-gap-200, mds-xl-row-gap-200 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 8px;
}.mds .mds-gap-300,
.mds .mds-container .mds-gap-300,
.mds .mds-viewport .mds-gap-300 {
  /*
  @name: mds-gap-300, mds-xs-gap-300, mds-sm-gap-300, mds-md-gap-300, mds-lg-gap-300, mds-xl-gap-300
  @category: Gap
  @usage: 
  Use mds-gap-300 class to apply gap of 12px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-300, mds-sm-gap-300, mds-md-gap-300, mds-lg-gap-300, mds-xl-gap-300 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-300">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-300">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 12px;
}.mds .mds-col-gap-300,
.mds .mds-container .mds-col-gap-300,
.mds .mds-viewport .mds-col-gap-300 {
  /*
  @name: mds-col-gap-300, mds-xs-col-gap-300, mds-sm-col-gap-300, mds-md-col-gap-300, mds-lg-col-gap-300, mds-xl-col-gap-300
  @category: Gap
  @usage: 
  Use mds-col-gap-300 class to apply a gap of 12px between columns in a grid or flex box.
  Use mds-xs-col-gap-300, mds-sm-col-gap-300, mds-md-col-gap-300, mds-lg-col-gap-300, mds-xl-col-gap-300 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-300">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-300">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 12px;
}.mds .mds-row-gap-300,
.mds .mds-container .mds-row-gap-300,
.mds .mds-viewport .mds-row-gap-300 {
  /*
  @name: mds-row-gap-300, mds-xs-row-gap-300, mds-sm-row-gap-300, mds-md-row-gap-300, mds-lg-row-gap-300, mds-xl-row-gap-300
  @category: Gap
  @usage: 
  Use mds-row-gap-300 class to apply a gap of 12px between rows in a grid or flex box.
  Use mds-xs-row-gap-300, mds-sm-row-gap-300, mds-md-row-gap-300, mds-lg-row-gap-300, mds-xl-row-gap-300 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-300">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-300">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 12px;
}.mds .mds-gap-400,
.mds .mds-container .mds-gap-400,
.mds .mds-viewport .mds-gap-400 {
  /*
  @name: mds-gap-400, mds-xs-gap-400, mds-sm-gap-400, mds-md-gap-400, mds-lg-gap-400, mds-xl-gap-400
  @category: Gap
  @usage: 
  Use mds-gap-400 class to apply gap of 16px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-400, mds-sm-gap-400, mds-md-gap-400, mds-lg-gap-400, mds-xl-gap-400 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-400">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-400">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 16px;
}.mds .mds-col-gap-400,
.mds .mds-container .mds-col-gap-400,
.mds .mds-viewport .mds-col-gap-400 {
  /*
  @name: mds-col-gap-400, mds-xs-col-gap-400, mds-sm-col-gap-400, mds-md-col-gap-400, mds-lg-col-gap-400, mds-xl-col-gap-400
  @category: Gap
  @usage: 
  Use mds-col-gap-400 class to apply a gap of 16px between columns in a grid or flex box.
  Use mds-xs-col-gap-400, mds-sm-col-gap-400, mds-md-col-gap-400, mds-lg-col-gap-400, mds-xl-col-gap-400 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-400">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-400">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 16px;
}.mds .mds-row-gap-400,
.mds .mds-container .mds-row-gap-400,
.mds .mds-viewport .mds-row-gap-400 {
  /*
  @name: mds-row-gap-400, mds-xs-row-gap-400, mds-sm-row-gap-400, mds-md-row-gap-400, mds-lg-row-gap-400, mds-xl-row-gap-400
  @category: Gap
  @usage: 
  Use mds-row-gap-400 class to apply a gap of 16px between rows in a grid or flex box.
  Use mds-xs-row-gap-400, mds-sm-row-gap-400, mds-md-row-gap-400, mds-lg-row-gap-400, mds-xl-row-gap-400 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-400">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-400">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 16px;
}.mds .mds-gap-500,
.mds .mds-container .mds-gap-500,
.mds .mds-viewport .mds-gap-500 {
  /*
  @name: mds-gap-500, mds-xs-gap-500, mds-sm-gap-500, mds-md-gap-500, mds-lg-gap-500, mds-xl-gap-500
  @category: Gap
  @usage: 
  Use mds-gap-500 class to apply gap of 20px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-500, mds-sm-gap-500, mds-md-gap-500, mds-lg-gap-500, mds-xl-gap-500 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-500">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-500">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 20px;
}.mds .mds-col-gap-500,
.mds .mds-container .mds-col-gap-500,
.mds .mds-viewport .mds-col-gap-500 {
  /*
  @name: mds-col-gap-500, mds-xs-col-gap-500, mds-sm-col-gap-500, mds-md-col-gap-500, mds-lg-col-gap-500, mds-xl-col-gap-500
  @category: Gap
  @usage: 
  Use mds-col-gap-500 class to apply a gap of 20px between columns in a grid or flex box.
  Use mds-xs-col-gap-500, mds-sm-col-gap-500, mds-md-col-gap-500, mds-lg-col-gap-500, mds-xl-col-gap-500 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-500">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-500">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 20px;
}.mds .mds-row-gap-500,
.mds .mds-container .mds-row-gap-500,
.mds .mds-viewport .mds-row-gap-500 {
  /*
  @name: mds-row-gap-500, mds-xs-row-gap-500, mds-sm-row-gap-500, mds-md-row-gap-500, mds-lg-row-gap-500, mds-xl-row-gap-500
  @category: Gap
  @usage: 
  Use mds-row-gap-500 class to apply a gap of 20px between rows in a grid or flex box.
  Use mds-xs-row-gap-500, mds-sm-row-gap-500, mds-md-row-gap-500, mds-lg-row-gap-500, mds-xl-row-gap-500 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-500">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-500">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 20px;
}.mds .mds-gap-600,
.mds .mds-container .mds-gap-600,
.mds .mds-viewport .mds-gap-600 {
  /*
  @name: mds-gap-600, mds-xs-gap-600, mds-sm-gap-600, mds-md-gap-600, mds-lg-gap-600, mds-xl-gap-600
  @category: Gap
  @usage: 
  Use mds-gap-600 class to apply gap of 24px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-600, mds-sm-gap-600, mds-md-gap-600, mds-lg-gap-600, mds-xl-gap-600 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-600">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-600">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 24px;
}.mds .mds-col-gap-600,
.mds .mds-container .mds-col-gap-600,
.mds .mds-viewport .mds-col-gap-600 {
  /*
  @name: mds-col-gap-600, mds-xs-col-gap-600, mds-sm-col-gap-600, mds-md-col-gap-600, mds-lg-col-gap-600, mds-xl-col-gap-600
  @category: Gap
  @usage: 
  Use mds-col-gap-600 class to apply a gap of 24px between columns in a grid or flex box.
  Use mds-xs-col-gap-600, mds-sm-col-gap-600, mds-md-col-gap-600, mds-lg-col-gap-600, mds-xl-col-gap-600 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-600">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-600">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 24px;
}.mds .mds-row-gap-600,
.mds .mds-container .mds-row-gap-600,
.mds .mds-viewport .mds-row-gap-600 {
  /*
  @name: mds-row-gap-600, mds-xs-row-gap-600, mds-sm-row-gap-600, mds-md-row-gap-600, mds-lg-row-gap-600, mds-xl-row-gap-600
  @category: Gap
  @usage: 
  Use mds-row-gap-600 class to apply a gap of 24px between rows in a grid or flex box.
  Use mds-xs-row-gap-600, mds-sm-row-gap-600, mds-md-row-gap-600, mds-lg-row-gap-600, mds-xl-row-gap-600 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-600">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-600">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 24px;
}.mds .mds-gap-700,
.mds .mds-container .mds-gap-700,
.mds .mds-viewport .mds-gap-700 {
  /*
  @name: mds-gap-700, mds-xs-gap-700, mds-sm-gap-700, mds-md-gap-700, mds-lg-gap-700, mds-xl-gap-700
  @category: Gap
  @usage: 
  Use mds-gap-700 class to apply gap of 28px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-700, mds-sm-gap-700, mds-md-gap-700, mds-lg-gap-700, mds-xl-gap-700 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-700">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-700">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 28px;
}.mds .mds-col-gap-700,
.mds .mds-container .mds-col-gap-700,
.mds .mds-viewport .mds-col-gap-700 {
  /*
  @name: mds-col-gap-700, mds-xs-col-gap-700, mds-sm-col-gap-700, mds-md-col-gap-700, mds-lg-col-gap-700, mds-xl-col-gap-700
  @category: Gap
  @usage: 
  Use mds-col-gap-700 class to apply a gap of 28px between columns in a grid or flex box.
  Use mds-xs-col-gap-700, mds-sm-col-gap-700, mds-md-col-gap-700, mds-lg-col-gap-700, mds-xl-col-gap-700 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-700">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-700">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 28px;
}.mds .mds-row-gap-700,
.mds .mds-container .mds-row-gap-700,
.mds .mds-viewport .mds-row-gap-700 {
  /*
  @name: mds-row-gap-700, mds-xs-row-gap-700, mds-sm-row-gap-700, mds-md-row-gap-700, mds-lg-row-gap-700, mds-xl-row-gap-700
  @category: Gap
  @usage: 
  Use mds-row-gap-700 class to apply a gap of 28px between rows in a grid or flex box.
  Use mds-xs-row-gap-700, mds-sm-row-gap-700, mds-md-row-gap-700, mds-lg-row-gap-700, mds-xl-row-gap-700 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-700">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-700">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 28px;
}.mds .mds-gap-800,
.mds .mds-container .mds-gap-800,
.mds .mds-viewport .mds-gap-800 {
  /*
  @name: mds-gap-800, mds-xs-gap-800, mds-sm-gap-800, mds-md-gap-800, mds-lg-gap-800, mds-xl-gap-800
  @category: Gap
  @usage: 
  Use mds-gap-800 class to apply gap of 32px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-800, mds-sm-gap-800, mds-md-gap-800, mds-lg-gap-800, mds-xl-gap-800 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-800">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-800">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 32px;
}.mds .mds-col-gap-800,
.mds .mds-container .mds-col-gap-800,
.mds .mds-viewport .mds-col-gap-800 {
  /*
  @name: mds-col-gap-800, mds-xs-col-gap-800, mds-sm-col-gap-800, mds-md-col-gap-800, mds-lg-col-gap-800, mds-xl-col-gap-800
  @category: Gap
  @usage: 
  Use mds-col-gap-800 class to apply a gap of 32px between columns in a grid or flex box.
  Use mds-xs-col-gap-800, mds-sm-col-gap-800, mds-md-col-gap-800, mds-lg-col-gap-800, mds-xl-col-gap-800 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-800">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-800">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 32px;
}.mds .mds-row-gap-800,
.mds .mds-container .mds-row-gap-800,
.mds .mds-viewport .mds-row-gap-800 {
  /*
  @name: mds-row-gap-800, mds-xs-row-gap-800, mds-sm-row-gap-800, mds-md-row-gap-800, mds-lg-row-gap-800, mds-xl-row-gap-800
  @category: Gap
  @usage: 
  Use mds-row-gap-800 class to apply a gap of 32px between rows in a grid or flex box.
  Use mds-xs-row-gap-800, mds-sm-row-gap-800, mds-md-row-gap-800, mds-lg-row-gap-800, mds-xl-row-gap-800 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-800">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-800">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 32px;
}.mds .mds-gap-900,
.mds .mds-container .mds-gap-900,
.mds .mds-viewport .mds-gap-900 {
  /*
  @name: mds-gap-900, mds-xs-gap-900, mds-sm-gap-900, mds-md-gap-900, mds-lg-gap-900, mds-xl-gap-900
  @category: Gap
  @usage: 
  Use mds-gap-900 class to apply gap of 36px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-900, mds-sm-gap-900, mds-md-gap-900, mds-lg-gap-900, mds-xl-gap-900 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-900">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-900">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 36px;
}.mds .mds-col-gap-900,
.mds .mds-container .mds-col-gap-900,
.mds .mds-viewport .mds-col-gap-900 {
  /*
  @name: mds-col-gap-900, mds-xs-col-gap-900, mds-sm-col-gap-900, mds-md-col-gap-900, mds-lg-col-gap-900, mds-xl-col-gap-900
  @category: Gap
  @usage: 
  Use mds-col-gap-900 class to apply a gap of 36px between columns in a grid or flex box.
  Use mds-xs-col-gap-900, mds-sm-col-gap-900, mds-md-col-gap-900, mds-lg-col-gap-900, mds-xl-col-gap-900 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-900">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-900">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 36px;
}.mds .mds-row-gap-900,
.mds .mds-container .mds-row-gap-900,
.mds .mds-viewport .mds-row-gap-900 {
  /*
  @name: mds-row-gap-900, mds-xs-row-gap-900, mds-sm-row-gap-900, mds-md-row-gap-900, mds-lg-row-gap-900, mds-xl-row-gap-900
  @category: Gap
  @usage: 
  Use mds-row-gap-900 class to apply a gap of 36px between rows in a grid or flex box.
  Use mds-xs-row-gap-900, mds-sm-row-gap-900, mds-md-row-gap-900, mds-lg-row-gap-900, mds-xl-row-gap-900 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-900">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-900">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 36px;
}.mds .mds-gap-1000,
.mds .mds-container .mds-gap-1000,
.mds .mds-viewport .mds-gap-1000 {
  /*
  @name: mds-gap-1000, mds-xs-gap-1000, mds-sm-gap-1000, mds-md-gap-1000, mds-lg-gap-1000, mds-xl-gap-1000
  @category: Gap
  @usage: 
  Use mds-gap-1000 class to apply gap of 40px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-1000, mds-sm-gap-1000, mds-md-gap-1000, mds-lg-gap-1000, mds-xl-gap-1000 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-1000">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-1000">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 40px;
}.mds .mds-col-gap-1000,
.mds .mds-container .mds-col-gap-1000,
.mds .mds-viewport .mds-col-gap-1000 {
  /*
  @name: mds-col-gap-1000, mds-xs-col-gap-1000, mds-sm-col-gap-1000, mds-md-col-gap-1000, mds-lg-col-gap-1000, mds-xl-col-gap-1000
  @category: Gap
  @usage: 
  Use mds-col-gap-1000 class to apply a gap of 40px between columns in a grid or flex box.
  Use mds-xs-col-gap-1000, mds-sm-col-gap-1000, mds-md-col-gap-1000, mds-lg-col-gap-1000, mds-xl-col-gap-1000 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-1000">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-1000">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 40px;
}.mds .mds-row-gap-1000,
.mds .mds-container .mds-row-gap-1000,
.mds .mds-viewport .mds-row-gap-1000 {
  /*
  @name: mds-row-gap-1000, mds-xs-row-gap-1000, mds-sm-row-gap-1000, mds-md-row-gap-1000, mds-lg-row-gap-1000, mds-xl-row-gap-1000
  @category: Gap
  @usage: 
  Use mds-row-gap-1000 class to apply a gap of 40px between rows in a grid or flex box.
  Use mds-xs-row-gap-1000, mds-sm-row-gap-1000, mds-md-row-gap-1000, mds-lg-row-gap-1000, mds-xl-row-gap-1000 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-1000">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-1000">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 40px;
}.mds .mds-gap-1200,
.mds .mds-container .mds-gap-1200,
.mds .mds-viewport .mds-gap-1200 {
  /*
  @name: mds-gap-1200, mds-xs-gap-1200, mds-sm-gap-1200, mds-md-gap-1200, mds-lg-gap-1200, mds-xl-gap-1200
  @category: Gap
  @usage: 
  Use mds-gap-1200 class to apply gap of 48px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-1200, mds-sm-gap-1200, mds-md-gap-1200, mds-lg-gap-1200, mds-xl-gap-1200 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-1200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-1200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 48px;
}.mds .mds-col-gap-1200,
.mds .mds-container .mds-col-gap-1200,
.mds .mds-viewport .mds-col-gap-1200 {
  /*
  @name: mds-col-gap-1200, mds-xs-col-gap-1200, mds-sm-col-gap-1200, mds-md-col-gap-1200, mds-lg-col-gap-1200, mds-xl-col-gap-1200
  @category: Gap
  @usage: 
  Use mds-col-gap-1200 class to apply a gap of 48px between columns in a grid or flex box.
  Use mds-xs-col-gap-1200, mds-sm-col-gap-1200, mds-md-col-gap-1200, mds-lg-col-gap-1200, mds-xl-col-gap-1200 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-1200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-1200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 48px;
}.mds .mds-row-gap-1200,
.mds .mds-container .mds-row-gap-1200,
.mds .mds-viewport .mds-row-gap-1200 {
  /*
  @name: mds-row-gap-1200, mds-xs-row-gap-1200, mds-sm-row-gap-1200, mds-md-row-gap-1200, mds-lg-row-gap-1200, mds-xl-row-gap-1200
  @category: Gap
  @usage: 
  Use mds-row-gap-1200 class to apply a gap of 48px between rows in a grid or flex box.
  Use mds-xs-row-gap-1200, mds-sm-row-gap-1200, mds-md-row-gap-1200, mds-lg-row-gap-1200, mds-xl-row-gap-1200 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-1200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-1200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 48px;
}.mds .mds-gap-1600,
.mds .mds-container .mds-gap-1600,
.mds .mds-viewport .mds-gap-1600 {
  /*
  @name: mds-gap-1600, mds-xs-gap-1600, mds-sm-gap-1600, mds-md-gap-1600, mds-lg-gap-1600, mds-xl-gap-1600
  @category: Gap
  @usage: 
  Use mds-gap-1600 class to apply gap of 64px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-1600, mds-sm-gap-1600, mds-md-gap-1600, mds-lg-gap-1600, mds-xl-gap-1600 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-1600">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-1600">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 64px;
}.mds .mds-col-gap-1600,
.mds .mds-container .mds-col-gap-1600,
.mds .mds-viewport .mds-col-gap-1600 {
  /*
  @name: mds-col-gap-1600, mds-xs-col-gap-1600, mds-sm-col-gap-1600, mds-md-col-gap-1600, mds-lg-col-gap-1600, mds-xl-col-gap-1600
  @category: Gap
  @usage: 
  Use mds-col-gap-1600 class to apply a gap of 64px between columns in a grid or flex box.
  Use mds-xs-col-gap-1600, mds-sm-col-gap-1600, mds-md-col-gap-1600, mds-lg-col-gap-1600, mds-xl-col-gap-1600 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-1600">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-1600">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 64px;
}.mds .mds-row-gap-1600,
.mds .mds-container .mds-row-gap-1600,
.mds .mds-viewport .mds-row-gap-1600 {
  /*
  @name: mds-row-gap-1600, mds-xs-row-gap-1600, mds-sm-row-gap-1600, mds-md-row-gap-1600, mds-lg-row-gap-1600, mds-xl-row-gap-1600
  @category: Gap
  @usage: 
  Use mds-row-gap-1600 class to apply a gap of 64px between rows in a grid or flex box.
  Use mds-xs-row-gap-1600, mds-sm-row-gap-1600, mds-md-row-gap-1600, mds-lg-row-gap-1600, mds-xl-row-gap-1600 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-1600">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-1600">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 64px;
}.mds .mds-gap-2000,
.mds .mds-container .mds-gap-2000,
.mds .mds-viewport .mds-gap-2000 {
  /*
  @name: mds-gap-2000, mds-xs-gap-2000, mds-sm-gap-2000, mds-md-gap-2000, mds-lg-gap-2000, mds-xl-gap-2000
  @category: Gap
  @usage: 
  Use mds-gap-2000 class to apply gap of 80px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-2000, mds-sm-gap-2000, mds-md-gap-2000, mds-lg-gap-2000, mds-xl-gap-2000 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-2000">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-2000">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 80px;
}.mds .mds-col-gap-2000,
.mds .mds-container .mds-col-gap-2000,
.mds .mds-viewport .mds-col-gap-2000 {
  /*
  @name: mds-col-gap-2000, mds-xs-col-gap-2000, mds-sm-col-gap-2000, mds-md-col-gap-2000, mds-lg-col-gap-2000, mds-xl-col-gap-2000
  @category: Gap
  @usage: 
  Use mds-col-gap-2000 class to apply a gap of 80px between columns in a grid or flex box.
  Use mds-xs-col-gap-2000, mds-sm-col-gap-2000, mds-md-col-gap-2000, mds-lg-col-gap-2000, mds-xl-col-gap-2000 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-2000">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-2000">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 80px;
}.mds .mds-row-gap-2000,
.mds .mds-container .mds-row-gap-2000,
.mds .mds-viewport .mds-row-gap-2000 {
  /*
  @name: mds-row-gap-2000, mds-xs-row-gap-2000, mds-sm-row-gap-2000, mds-md-row-gap-2000, mds-lg-row-gap-2000, mds-xl-row-gap-2000
  @category: Gap
  @usage: 
  Use mds-row-gap-2000 class to apply a gap of 80px between rows in a grid or flex box.
  Use mds-xs-row-gap-2000, mds-sm-row-gap-2000, mds-md-row-gap-2000, mds-lg-row-gap-2000, mds-xl-row-gap-2000 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-2000">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-2000">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 80px;
}.mds .mds-gap-2400,
.mds .mds-container .mds-gap-2400,
.mds .mds-viewport .mds-gap-2400 {
  /*
  @name: mds-gap-2400, mds-xs-gap-2400, mds-sm-gap-2400, mds-md-gap-2400, mds-lg-gap-2400, mds-xl-gap-2400
  @category: Gap
  @usage: 
  Use mds-gap-2400 class to apply gap of 96px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-2400, mds-sm-gap-2400, mds-md-gap-2400, mds-lg-gap-2400, mds-xl-gap-2400 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-2400">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-2400">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 96px;
}.mds .mds-col-gap-2400,
.mds .mds-container .mds-col-gap-2400,
.mds .mds-viewport .mds-col-gap-2400 {
  /*
  @name: mds-col-gap-2400, mds-xs-col-gap-2400, mds-sm-col-gap-2400, mds-md-col-gap-2400, mds-lg-col-gap-2400, mds-xl-col-gap-2400
  @category: Gap
  @usage: 
  Use mds-col-gap-2400 class to apply a gap of 96px between columns in a grid or flex box.
  Use mds-xs-col-gap-2400, mds-sm-col-gap-2400, mds-md-col-gap-2400, mds-lg-col-gap-2400, mds-xl-col-gap-2400 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-2400">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-2400">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 96px;
}.mds .mds-row-gap-2400,
.mds .mds-container .mds-row-gap-2400,
.mds .mds-viewport .mds-row-gap-2400 {
  /*
  @name: mds-row-gap-2400, mds-xs-row-gap-2400, mds-sm-row-gap-2400, mds-md-row-gap-2400, mds-lg-row-gap-2400, mds-xl-row-gap-2400
  @category: Gap
  @usage: 
  Use mds-row-gap-2400 class to apply a gap of 96px between rows in a grid or flex box.
  Use mds-xs-row-gap-2400, mds-sm-row-gap-2400, mds-md-row-gap-2400, mds-lg-row-gap-2400, mds-xl-row-gap-2400 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-2400">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-2400">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 96px;
}.mds .mds-gap-2800,
.mds .mds-container .mds-gap-2800,
.mds .mds-viewport .mds-gap-2800 {
  /*
  @name: mds-gap-2800, mds-xs-gap-2800, mds-sm-gap-2800, mds-md-gap-2800, mds-lg-gap-2800, mds-xl-gap-2800
  @category: Gap
  @usage: 
  Use mds-gap-2800 class to apply gap of 112px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-2800, mds-sm-gap-2800, mds-md-gap-2800, mds-lg-gap-2800, mds-xl-gap-2800 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-2800">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-2800">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 112px;
}.mds .mds-col-gap-2800,
.mds .mds-container .mds-col-gap-2800,
.mds .mds-viewport .mds-col-gap-2800 {
  /*
  @name: mds-col-gap-2800, mds-xs-col-gap-2800, mds-sm-col-gap-2800, mds-md-col-gap-2800, mds-lg-col-gap-2800, mds-xl-col-gap-2800
  @category: Gap
  @usage: 
  Use mds-col-gap-2800 class to apply a gap of 112px between columns in a grid or flex box.
  Use mds-xs-col-gap-2800, mds-sm-col-gap-2800, mds-md-col-gap-2800, mds-lg-col-gap-2800, mds-xl-col-gap-2800 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-2800">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-2800">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 112px;
}.mds .mds-row-gap-2800,
.mds .mds-container .mds-row-gap-2800,
.mds .mds-viewport .mds-row-gap-2800 {
  /*
  @name: mds-row-gap-2800, mds-xs-row-gap-2800, mds-sm-row-gap-2800, mds-md-row-gap-2800, mds-lg-row-gap-2800, mds-xl-row-gap-2800
  @category: Gap
  @usage: 
  Use mds-row-gap-2800 class to apply a gap of 112px between rows in a grid or flex box.
  Use mds-xs-row-gap-2800, mds-sm-row-gap-2800, mds-md-row-gap-2800, mds-lg-row-gap-2800, mds-xl-row-gap-2800 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-2800">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-2800">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 112px;
}.mds .mds-gap-3200,
.mds .mds-container .mds-gap-3200,
.mds .mds-viewport .mds-gap-3200 {
  /*
  @name: mds-gap-3200, mds-xs-gap-3200, mds-sm-gap-3200, mds-md-gap-3200, mds-lg-gap-3200, mds-xl-gap-3200
  @category: Gap
  @usage: 
  Use mds-gap-3200 class to apply gap of 128px between columns and rows in a grid or flex box that is the same in all breakpoints.
  Use mds-xs-gap-3200, mds-sm-gap-3200, mds-md-gap-3200, mds-lg-gap-3200, mds-xl-gap-3200 classes to apply gap of 2px between columns and rows in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-gap-3200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-gap-3200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  gap: 128px;
}.mds .mds-col-gap-3200,
.mds .mds-container .mds-col-gap-3200,
.mds .mds-viewport .mds-col-gap-3200 {
  /*
  @name: mds-col-gap-3200, mds-xs-col-gap-3200, mds-sm-col-gap-3200, mds-md-col-gap-3200, mds-lg-col-gap-3200, mds-xl-col-gap-3200
  @category: Gap
  @usage: 
  Use mds-col-gap-3200 class to apply a gap of 128px between columns in a grid or flex box.
  Use mds-xs-col-gap-3200, mds-sm-col-gap-3200, mds-md-col-gap-3200, mds-lg-col-gap-3200, mds-xl-col-gap-3200 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-col-gap-3200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-col-gap-3200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  column-gap: 128px;
}.mds .mds-row-gap-3200,
.mds .mds-container .mds-row-gap-3200,
.mds .mds-viewport .mds-row-gap-3200 {
  /*
  @name: mds-row-gap-3200, mds-xs-row-gap-3200, mds-sm-row-gap-3200, mds-md-row-gap-3200, mds-lg-row-gap-3200, mds-xl-row-gap-3200
  @category: Gap
  @usage: 
  Use mds-row-gap-3200 class to apply a gap of 128px between rows in a grid or flex box.
  Use mds-xs-row-gap-3200, mds-sm-row-gap-3200, mds-md-row-gap-3200, mds-lg-row-gap-3200, mds-xl-row-gap-3200 classes to apply gap of 2px between columns in a grid or flex box that is specific to the breakpoint.
  @example:
  <div class="mds-container">
    <div class="mds-grid mds-row-gap-3200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
    <div class="mds-flex mds-row-gap-3200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>
  */
  row-gap: 128px;
}.mds {
  /*
  @description: 
  The MDS offers a set of light-weight utility classes to help with common flexbox layout patterns.

  @basicExample:
  <div class="mds-container">
    <div class="mds-flex mds-gap-200">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </div>

  @advancedExample:
  <div class="mds-container">
    <div class="mds-flex mds-flex-items-start mds-gap-200">
      <div class="box" style="width: 100px; height: 100px;">1</div>
      <div class="box" style="width: 200px;">2</div>
      <div class="box" style="width: 100px; height: 100px;">3</div>
    </div>
  </div>
  */
}.mds .mds-flex {
  /* 
  @name: mds-flex
  @category: Flexbox
  @usage: 
  Use mds-flex class to create a flex container.
  @example:
  <div class="mds-flex">...</div>
  */
  display: flex;
  flex-wrap: wrap;
}.mds .mds-flex-items-start {
  /* 
  @name: mds-flex-items-start
  @category: Flexbox
  @usage: 
  Use mds-flex-items-start class to align flex items to the start of the flex container.
  @example:
  <div class="mds-flex mds-flex-items-start">...</div>
  */
  align-items: flex-start;
}.mds .mds-flex-items-center {
  /* 
  @name: mds-flex-items-center
  @category: Flexbox
  @usage: 
  Use mds-flex-items-center class to align flex items to the center of the flex container.
  @example:
  <div class="mds-flex mds-flex-items-center">...</div>
  */
  align-items: center;
}.mds .mds-flex-items-end {
  /*  
  @name: mds-flex-items-end
  @category: Flexbox
  @usage: 
  Use mds-flex-items-end class to align flex items to the end of the flex container.
  @example:
  <div class="mds-flex mds-flex-items-end">...</div>
  */
  align-items: flex-end;
}.mds .mds-flex-items-baseline {
  /* 
  @name: mds-flex-items-baseline
  @category: Flexbox
  @usage: 
  Use mds-flex-items-baseline class to align flex items to the baseline of the flex container.
  @example:
  <div class="mds-flex mds-flex-items-baseline">...</div>
  */
  align-items: baseline;
}.mds .mds-flex-items-stretch {
  /* 
  @name: mds-flex-items-stretch
  @category: Flexbox
  @usage: 
  Use mds-flex-items-stretch class to stretch flex items to fill the flex container.
  @example:
  <div class="mds-flex mds-flex-items-stretch">...</div>
  */
  align-items: stretch;
}.mds .mds-flex-row {
  flex-direction: row;
}.mds .mds-flex-column {
  flex-direction: column;
}.mds hr {
  border-bottom: var(--mds_foundations_horizontal-rule_border-width) var(--mds_foundations_horizontal-rule_border-style) var(--mds_foundations_horizontal-rule_border-color);
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}.mds hr.vertical {
  border-left: var(--mds_foundations_horizontal-rule_border-width) var(--mds_foundations_horizontal-rule_border-style) var(--mds_foundations_horizontal-rule_border-color);
  border-top-width: 0;
  border-bottom-width: 0;
  height: 40px;
  width: 0;
  padding: 0;
  margin: 0 4px;
}.mds {
  /*
  @description: 
  Links are automatically styled if an outer container applies the mds class.
  We also provide a mds-link--stand-alone class for styling "stand-alone" links i.e. those links that do not sit inline within a paragraph of text etc.

  @basicExample:
  <div class="mds">
    <a href="#" class="mds-link--stand-alone">This is a stand-alone link</a>
    <a href="#" class="mds-link--stand-alone">Another stand-alone link</a>
  </div>

  @advancedExample:
  <div class="mds">
    <a class="mds-link--external" href="https://designsystem.maersk.com" target="_blank" rel="noreferrer" aria-label="Maersk Design System website - link opens in a new tab">
      External link to Maersk Design System
    </a> 
  </div>
  */
}.mds a.mds-link--stand-alone {
  /*
  @name: mds-link--stand-alone
  @category: Link
  @usage:
  Use mds-link--stand-alone class to style links that are not part of a paragraph of text.
  @example:
  <a href="#" class="mds-link--stand-alone">This is a stand-alone link</a>
  */
  text-decoration: var(--mds_foundations_link_stand-alone_text-decoration);
}.mds a.mds-link--stand-alone:hover, .mds a.mds-link--stand-alone:active {
  text-decoration: var(--mds_foundations_link_stand-alone_hover_text-decoration);
}.mds a.mds-link--stand-alone:visited {
  text-decoration: var(--mds_foundations_link_stand-alone_text-decoration);
}.mds a.mds-link--disabled {
  /*
  @name: mds-link--disabled
  @category: Link
  @usage:
  Use mds-link--disabled class to style links that are disabled.
  @example:
  <a href="#" class="mds-link--disabled">This link is disabled</a>
  */
  pointer-events: inherit;
  cursor: not-allowed;
}.mds a.mds-link--disabled:hover {
  text-decoration: var(--mds_foundations_link_inline_text-decoration);
}.mds a.mds-link--disabled:hover.mds-link--stand-alone {
  text-decoration: var(--mds_foundations_link_stand-alone_text-decoration);
}.mds a.mds-link--disabled {
  pointer-events: none;
  touch-action: none;
  opacity: var(--mds_brand_appearance_state_disabled_opacity);
  user-select: none;
}.mds a.mds-link--disabled * {
  user-select: none;
  pointer-events: none;
  touch-action: none;
}.mds a.mds-link--external {
  display: inline-flex;
}.mds a.mds-link--external::after {
  content: "";
  text-decoration: none;
  height: var(--mds_foundations_link_external_icon_height);
  width: var(--mds_foundations_link_external_icon_width);
  background-color: var(--mds_foundations_link_default_text-color);
  -webkit-mask: url('data:image/svg+xml,<svg part="icon" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M15.293 4H12V3h3.293a1 1 0 0 1 .707.293l.707.707a1 1 0 0 1 .293.707V8h-1V4.707l-6.646 6.647-.708-.708L15.293 4zM3 7a2 2 0 0 1 2-2h4v1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-4h1v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"></path></svg>') no-repeat 50% 50%;
  mask: url('data:image/svg+xml,<svg part="icon" shape-rendering="geometricPrecision" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M15.293 4H12V3h3.293a1 1 0 0 1 .707.293l.707.707a1 1 0 0 1 .293.707V8h-1V4.707l-6.646 6.647-.708-.708L15.293 4zM3 7a2 2 0 0 1 2-2h4v1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-4h1v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"></path></svg>') no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}.mds a.mds-link--focus-shadow-inset {
  /*
  @name: mds-link--focus-shadow-inset
  @category: Link
  @usage:
  Use mds-link--focus-shadow-inset class to apply an inset focus shadow to links
  when they are focused or focused-visible.
  @example:
  <a href="#" class="mds-link--focus-shadow-inset">This link has an inset focus shadow</a>
  */
}.mds a.mds-link--focus-shadow-inset:focus-visible {
  outline: 0;
  box-shadow: inset var(--mds_brand_appearance_state_focus_default_shadow_offset-x) var(--mds_brand_appearance_state_focus_default_shadow_offset-y) var(--mds_brand_appearance_state_focus_default_shadow_blur-radius) var(--mds_brand_appearance_state_focus_default_shadow_spread-radius) var(--mds_brand_appearance_state_focus_default_shadow_color);
}.mds a {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  text-decoration: var(--mds_foundations_link_inline_text-decoration);
  transition-duration: var(--mds_foundations_link_transition-duration);
  transition-property: var(--mds_foundations_link_transition-properties);
  transition-timing-function: var(--mds_foundations_link_transition-timing);
}.mds a:focus-visible {
  border-radius: var(--mds_foundations_link_focus_border-radius);
  text-decoration: var(--mds_foundations_link_inline_hover_text-decoration);
  outline: 0;
  box-shadow: var(--mds_brand_appearance_state_focus_default_shadow_offset-x) var(--mds_brand_appearance_state_focus_default_shadow_offset-y) var(--mds_brand_appearance_state_focus_default_shadow_blur-radius) var(--mds_brand_appearance_state_focus_default_shadow_spread-radius) var(--mds_brand_appearance_state_focus_default_shadow_color);
}.mds a:hover, .mds a:active {
  text-decoration: var(--mds_foundations_link_inline_hover_text-decoration);
}.mds a:visited {
  text-decoration: var(--mds_foundations_link_inline_text-decoration);
}.mds a {
  color: var(--mds_foundations_link_default_text-color);
}.mds a:active, .mds a:visited {
  color: var(--mds_foundations_link_default_text-color);
}.mds a mc-icon::part(icon) {
  fill: var(--mds_foundations_link_default_text-color);
}.mds mc-button a,
.mds mc-button a:visited,
.mds mc-button-group-item a,
.mds mc-button-group-item a:visited,
.mds mc-link-button a,
.mds mc-link-button a:visited,
.mds mc-list-item a,
.mds mc-list-item a:visited,
.mds mc-pagination a,
.mds mc-pagination a:visited,
.mds mc-segmented-control-item a,
.mds mc-segmented-control-item a:visited,
.mds mc-tab a,
.mds mc-tab a:visited {
  text-decoration: none;
  display: inline-block;
  position: relative;
  z-index: 1;
}.mds mc-button-group-item a:focus-visible,
.mds mc-list-item a:focus-visible,
.mds mc-pagination a:focus-visible,
.mds mc-segmented-control-item a:focus-visible,
.mds mc-tab a:focus-visible {
  outline: 0;
  box-shadow: inset var(--mds_brand_appearance_state_focus_default_shadow_offset-x) var(--mds_brand_appearance_state_focus_default_shadow_offset-y) var(--mds_brand_appearance_state_focus_default_shadow_blur-radius) var(--mds_brand_appearance_state_focus_default_shadow_spread-radius) var(--mds_brand_appearance_state_focus_default_shadow_color);
}.mds {
  /*
  @description: 
  Lists are used to display a collection of items in a structured format. They can be ordered or unordered, and can be styled to fit the design requirements of the application.
  Lists are automatically styled if an outer container applies the mds class. The styles can be customized using the mds-list--horizontal class for horizontal lists or by applying custom styles to the list items.
  Use `mc-list` component as better alternative to ul/ol html native elements.

  @basicExample:
  <ol>
    <li>Apple</li>
    <li>Orange</li>
    <li>Lemon</li>
  </ol>

  @advancedExample:
  // Use mc-list for displaying easier text and icons, groups, and more complex items.
  <mc-list>
    <mc-list-item label="Back" icon="arrow-left"></mc-list-item>
    <mc-list-item label="Forward" disabled icon="arrow-right"></mc-list-item>
    <mc-list-item label="Reload" icon="arrow-clockwise"></mc-list-item>
    <hr />
    <mc-list-item label="Save" icon="floppy-disk"></mc-list-item>
    <mc-list-item label="Print" icon="printer"></mc-list-item>
  </mc-list>
  */
}.mds ul {
  list-style: var(--mds_foundations_list_unordered_list-style);
  display: flex;
  flex-direction: column;
  gap: var(--mds_foundations_list_vertical_item_gap);
  margin: 0;
  padding: 0;
}.mds ul.mds-list--horizontal {
  /*
  @name: mds-list--horizontal
  @category: List
  @usage:
  Use mds-list--horizontal class to style lists that are displayed horizontally.
  @example:
  <ul class="mds-list--horizontal">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  */
  flex-direction: row;
  gap: var(--mds_foundations_list_horizontal_item_gap);
  padding: 0;
}.mds ul li {
  padding: 0;
  margin: 0;
}.mds ol {
  list-style: var(--mds_foundations_list_ordered_list-style);
  display: flex;
  flex-direction: column;
  gap: var(--mds_foundations_list_vertical_item_gap);
  margin: 0;
  padding: 0;
}.mds ol.mds-list--horizontal {
  /*
  @name: mds-list--horizontal
  @category: List
  @usage:
  Use mds-list--horizontal class to style lists that are displayed horizontally.
  @example:
  <ul class="mds-list--horizontal">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  */
  flex-direction: row;
  gap: var(--mds_foundations_list_horizontal_item_gap);
  padding: 0;
}.mds ol li {
  padding: 0;
  margin: 0;
}.mds nav ol,
.mds nav ul {
  list-style: none;
}.mds svg:not([fill]) {
  fill: currentcolor;
}.mds {
  /*
  @description: 
  Foundational classes for styling HTML tables. Use it if you use native HTML table elements like `<table>`, or using external libraries like Tanstack Table or AG Grid and you make your own customizations.
  We recommend using the `mc-table` component for better accessibility and styling control, with multiple features working out of the box and option to high customization.

  @basicExample:
  <body class="mds">
    <div class="mds-table mds-table--scrollable">
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Last port</th>
            <th class="mds-table__cell--number">Built (year)</th>
            <th class="mds-table__cell--number">Length (m)</th>
            <th class="mds-table__cell--number">Capacity (TEU)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Madrid Maersk</td>
            <td>Shanghai</td>
            <td class="mds-table__cell--number">2017</td>
            <td class="mds-table__cell--number">399</td>
            <td class="mds-table__cell--number">19,630</td>
          </tr>
          <tr>
            <td>Mary Maersk</td>
            <td>Busan</td>
            <td class="mds-table__cell--number">2013</td>
            <td class="mds-table__cell--number">399</td>
            <td class="mds-table__cell--number">18,270</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
  @advancedExample:
  <mc-table .data=[{id: 1, name: 'Madrid Maersk', type: 'Container ship', built: '2017', length: 399, capacity: 19630, inService: true, status: 'On schedule', speed: '16.2', position: 'Track on map', lastPort: 'Shanghai', lastCountry: 'China', lastUpdate: '06/08/2025'}, {id: 2, name: 'Mary Maersk', type: 'Container ship', built: '2013', length: 399, capacity: 18270, inService: true, status: 'Delayed', speed: '2.1', position: 'Track on map', lastPort: 'Busan', lastCountry: 'South Korea', lastUpdate: '07/08/2025'}, {id: 3, name: 'Gerner Maersk', type: 'Container ship', built: '2008', length: 367, capacity: 9038, inService: true, status: 'On schedule', speed: '10.7', position: 'Track on map', lastPort: 'Rotterdam', lastCountry: 'Netherlands', lastUpdate: '08/08/2025'}]></mc-table>
  */
}.mds mc-c-table {
  display: block;
}.mds .mds-table {
  /*
  @name: mds-table
  @category: Table
  @usage:
  Use mds-table class to style HTML tables with consistent design and behavior.
  @example:
  <div class="mds-table">
    <table>...</table>
  </div>
  */
  --row-border-radius: calc(var(--mds_foundations_table_border-radius) - 1px);
  border-radius: var(--mds_foundations_table_border-radius);
  border: var(--mds_foundations_table_border-width) var(--mds_foundations_table_border-style) var(--mds_foundations_table_border-color);
  max-width: 100%;
}.mds .mds-table table {
  border-collapse: collapse;
  border-style: hidden;
  width: 100%;
  border-radius: var(--mds_foundations_table_border-radius);
}.mds .mds-table {
  /** Base cell styles **/
}.mds .mds-table th,
.mds .mds-table td {
  padding: var(--mds_foundations_table_medium_cell_padding-top) var(--mds_foundations_table_medium_cell_padding-right) var(--mds_foundations_table_medium_cell_padding-bottom) var(--mds_foundations_table_medium_cell_padding-left);
  text-align: left;
  vertical-align: middle;
  border: 0;
  border-bottom: var(--mds_foundations_table_border-width) var(--mds_foundations_table_border-style) var(--mds_foundations_table_border-color);
}.mds .mds-table th .mds-table__subtext,
.mds .mds-table td .mds-table__subtext {
  /*
  @name: mds-table__subtext
  @category: Table
  @usage:
  Use mds-table__subtext class to style subtext within table cells.
  @example:
  <td>
    <span class="mds-table__subtext">Subtext here</span>
  </td>
  */
  color: var(--mds_foundations_table_subtext_text-color);
  display: block;
  font-weight: var(--mds_foundations_table_subtext_font-weight);
}.mds .mds-table th .mds-table__subtext,
.mds .mds-table td .mds-table__subtext {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-table th .mds-table__subtext,
  .mds .mds-table td .mds-table__subtext {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-table th .mds-table__subtext,
.mds .mds-table td .mds-table__subtext {
  font-style: var(--mds_brand_typography_text_small_normal_font-style);
  font-weight: var(--mds_brand_typography_text_small_normal_font-weight);
}.mds .mds-table {
  /** Header cell styles **/
}.mds .mds-table th {
  background-color: var(--mds_foundations_table_header-cell_background-color);
  color: var(--mds_foundations_table_header-cell_text-color);
}.mds .mds-table th {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_medium_mobile_font-size);
  line-height: var(--mds_brand_typography_text_medium_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-table th {
    font-size: var(--mds_brand_typography_text_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_text_medium_desktop_line-height);
  }
}.mds .mds-table th {
  font-style: var(--mds_brand_typography_text_medium_bold_font-style);
  font-weight: var(--mds_brand_typography_text_medium_bold_font-weight);
}.mds .mds-table {
  /** Data cell styles **/
}.mds .mds-table td {
  background-color: var(--mds_foundations_table_cell_background-color);
  color: var(--mds_foundations_table_cell_text-color);
}.mds .mds-table td {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_medium_mobile_font-size);
  line-height: var(--mds_brand_typography_text_medium_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-table td {
    font-size: var(--mds_brand_typography_text_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_text_medium_desktop_line-height);
  }
}.mds .mds-table td {
  font-style: var(--mds_brand_typography_text_medium_normal_font-style);
  font-weight: var(--mds_brand_typography_text_medium_normal_font-weight);
}.mds .mds-table {
  /** Footer cell styles **/
}.mds .mds-table tfoot td {
  background-color: var(--mds_foundations_table_cell_background-color);
  color: var(--mds_foundations_table_cell_text-color);
}.mds .mds-table tfoot td {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_medium_mobile_font-size);
  line-height: var(--mds_brand_typography_text_medium_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-table tfoot td {
    font-size: var(--mds_brand_typography_text_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_text_medium_desktop_line-height);
  }
}.mds .mds-table tfoot td {
  font-style: var(--mds_brand_typography_text_medium_bold_font-style);
  font-weight: var(--mds_brand_typography_text_medium_bold_font-weight);
}.mds .mds-table {
  /** Cell positioning **/
}.mds .mds-table thead tr th,
.mds .mds-table tbody tr td,
.mds .mds-table tbody tr th,
.mds .mds-table tfoot tr td {
  position: relative;
}.mds .mds-table {
  /** Large fit **/
}.mds .mds-table.mds-table--large {
  /*
  @name: mds-table--large
  @category: Table
  @usage:
  Use mds-table--large class to style tables that are displayed in a more spacious format.
  @example:
  <table class="mds-table mds-table--large">...</table>
  */
}.mds .mds-table.mds-table--large th,
.mds .mds-table.mds-table--large td {
  padding: var(--mds_foundations_table_large_cell_padding-top) var(--mds_foundations_table_large_cell_padding-right) var(--mds_foundations_table_large_cell_padding-bottom) var(--mds_foundations_table_large_cell_padding-left);
}.mds .mds-table.mds-table--large .mds-table__row-selector > mc-checkbox {
  margin-top: 0;
}.mds .mds-table.mds-table--large .mds-table__row-expander > mc-button {
  margin-top: 0;
}.mds .mds-table.mds-table--large .mds-table__header-cell--sortable {
  padding-top: var(--mds_foundations_table_large_header-cell_sortable_padding-top);
  padding-bottom: var(--mds_foundations_table_large_header-cell_sortable_padding-bottom);
}.mds .mds-table.mds-table--large .mds-table__expanded-row.mds-table__expanded-row--no-padding td {
  padding: 0;
}.mds .mds-table.mds-table--large .mds-table__expanded-row td {
  padding: var(--mds_foundations_table_large_expanded-row_padding-top) var(--mds_foundations_table_large_expanded-row_padding-right) var(--mds_foundations_table_large_expanded-row_padding-bottom) var(--mds_foundations_table_large_expanded-row_padding-left);
}.mds .mds-table {
  /** Small fit **/
}.mds .mds-table.mds-table--small {
  /*
  @name: mds-table--small
  @category: Table
  @usage:
  Use mds-table--small class to style tables that are displayed in a more compact format.
  @example:
  <table class="mds-table mds-table--small">...</table>
  */
}.mds .mds-table.mds-table--small th {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-table.mds-table--small th {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-table.mds-table--small th {
  font-style: var(--mds_brand_typography_text_small_bold_font-style);
  font-weight: var(--mds_brand_typography_text_small_bold_font-weight);
}.mds .mds-table.mds-table--small td {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-table.mds-table--small td {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-table.mds-table--small td {
  font-style: var(--mds_brand_typography_text_small_normal_font-style);
  font-weight: var(--mds_brand_typography_text_small_normal_font-weight);
}.mds .mds-table.mds-table--small th,
.mds .mds-table.mds-table--small td {
  padding: var(--mds_foundations_table_small_cell_padding-top) var(--mds_foundations_table_small_cell_padding-right) var(--mds_foundations_table_small_cell_padding-bottom) var(--mds_foundations_table_small_cell_padding-left);
}.mds .mds-table.mds-table--small th .mds-table__subtext,
.mds .mds-table.mds-table--small td .mds-table__subtext {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_x-small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_x-small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-table.mds-table--small th .mds-table__subtext,
  .mds .mds-table.mds-table--small td .mds-table__subtext {
    font-size: var(--mds_brand_typography_text_x-small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_x-small_desktop_line-height);
  }
}.mds .mds-table.mds-table--small th .mds-table__subtext,
.mds .mds-table.mds-table--small td .mds-table__subtext {
  font-style: var(--mds_brand_typography_text_x-small_normal_font-style);
  font-weight: var(--mds_brand_typography_text_x-small_normal_font-weight);
}.mds .mds-table.mds-table--small tfoot td {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-table.mds-table--small tfoot td {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-table.mds-table--small tfoot td {
  font-style: var(--mds_brand_typography_text_small_bold_font-style);
  font-weight: var(--mds_brand_typography_text_small_bold_font-weight);
}.mds .mds-table.mds-table--small .mds-table__header-cell--sortable {
  padding-top: var(--mds_foundations_table_small_header-cell_sortable_padding-top);
  padding-bottom: var(--mds_foundations_table_small_header-cell_sortable_padding-bottom);
}.mds .mds-table.mds-table--small .mds-table__expanded-row.mds-table__expanded-row--no-padding td {
  padding: 0;
}.mds .mds-table.mds-table--small .mds-table__expanded-row td {
  padding: var(--mds_foundations_table_small_expanded-row_padding-top) var(--mds_foundations_table_small_expanded-row_padding-right) var(--mds_foundations_table_small_expanded-row_padding-bottom) var(--mds_foundations_table_small_expanded-row_padding-left);
}.mds .mds-table {
  /** Zebra stripes **/
}.mds .mds-table.mds-table--zebra-stripes {
  /*
  @name: mds-table--zebra-stripes
  @category: Table
  @usage:
  Use mds-table--zebra-stripes class to style tables with alternating row colors.
  @example:
  <table class="mds-table mds-table--zebra-stripes">...</table>
  */
}.mds .mds-table.mds-table--zebra-stripes tbody tr:nth-child(even) td {
  background-color: var(--mds_foundations_table_zebra-stripe_background-color);
  color: var(--mds_foundations_table_zebra-stripe_text-color);
}.mds .mds-table.mds-table--zebra-stripes:not(.mds-table--disable-row-highlight-on-hover) tbody tr:nth-child(even) td {
  background-color: var(--mds_foundations_table_zebra-stripe_background-color);
  color: var(--mds_foundations_table_zebra-stripe_text-color);
}.mds .mds-table.mds-table--zebra-stripes:not(.mds-table--disable-row-highlight-on-hover) tbody tr:nth-child(odd) td {
  background-color: var(--mds_foundations_table_cell_background-color);
  color: var(--mds_foundations_table_cell_text-color);
}.mds .mds-table.mds-table--zebra-stripes-with-expand {
  /* 
  @name: mds-table--zebra-stripes-with-expand
  @category: Table
  @usage:
  Use row pairs (main row + expanded row) for zebra striping.
  @example:
  <table class="mds-table mds-table--zebra-stripes-with-expand">...</table>
  */
}.mds .mds-table.mds-table--zebra-stripes-with-expand tbody > tr:nth-child(4n+1) td,
.mds .mds-table.mds-table--zebra-stripes-with-expand tbody > tr:nth-child(4n+2) td {
  background-color: var(--mds_foundations_table_cell_background-color);
  color: var(--mds_foundations_table_cell_text-color);
}.mds .mds-table.mds-table--zebra-stripes-with-expand tbody > tr:nth-child(4n+3) td,
.mds .mds-table.mds-table--zebra-stripes-with-expand tbody > tr:nth-child(4n+4) td {
  background-color: var(--mds_foundations_table_zebra-stripe_background-color);
  color: var(--mds_foundations_table_zebra-stripe_text-color);
}.mds .mds-table.mds-table--zebra-stripes-with-expand:not(.mds-table--disable-row-highlight-on-hover) {
  /* Use row pairs (main row + expanded row) for zebra striping */
}.mds .mds-table.mds-table--zebra-stripes-with-expand:not(.mds-table--disable-row-highlight-on-hover) tbody > tr:nth-child(4n+1) td,
.mds .mds-table.mds-table--zebra-stripes-with-expand:not(.mds-table--disable-row-highlight-on-hover) tbody > tr:nth-child(4n+2) td {
  background-color: var(--mds_foundations_table_cell_background-color);
  color: var(--mds_foundations_table_cell_text-color);
}.mds .mds-table.mds-table--zebra-stripes-with-expand:not(.mds-table--disable-row-highlight-on-hover) tbody > tr:nth-child(4n+3) td,
.mds .mds-table.mds-table--zebra-stripes-with-expand:not(.mds-table--disable-row-highlight-on-hover) tbody > tr:nth-child(4n+4) td {
  background-color: var(--mds_foundations_table_zebra-stripe_background-color);
  color: var(--mds_foundations_table_zebra-stripe_text-color);
}.mds .mds-table {
  /** Highlight on hover **/
}.mds .mds-table:not(.mds-table--disable-row-highlight-on-hover) tbody tr:nth-child(even):hover td, .mds .mds-table:not(.mds-table--disable-row-highlight-on-hover) tbody tr:nth-child(odd):hover td {
  background-color: var(--mds_foundations_table_cell_hover_background-color);
  color: var(--mds_foundations_table_cell_hover_text-color);
}.mds .mds-table thead tr:first-child th:first-child,
.mds .mds-table thead tr:first-child td:first-child {
  border-top-left-radius: calc(var(--mds_foundations_table_border-radius) - 1px);
}.mds .mds-table thead tr:first-child th:last-child,
.mds .mds-table thead tr:first-child td:last-child {
  border-top-right-radius: calc(var(--mds_foundations_table_border-radius) - 1px);
}.mds .mds-table tbody:last-child tr:last-child td:first-child,
.mds .mds-table tbody:last-child tr:last-child th:first-child,
.mds .mds-table tfoot tr:last-child td:first-child,
.mds .mds-table tfoot tr:last-child th:first-child {
  border-bottom-left-radius: calc(var(--mds_foundations_table_border-radius) - 1px);
}.mds .mds-table tbody:last-child tr:last-child td:last-child,
.mds .mds-table tbody:last-child tr:last-child th:last-child,
.mds .mds-table tfoot tr:last-child td:last-child,
.mds .mds-table tfoot tr:last-child th:last-child {
  border-bottom-right-radius: calc(var(--mds_foundations_table_border-radius) - 1px);
}.mds .mds-table {
  /** Border style variations **/
}.mds .mds-table.mds-table--horizontal-lines-dashed {
  /*
  @name: mds-table--horizontal-lines-dashed
  @category: Table
  @usage:
  Use mds-table--horizontal-lines-dashed class to style tables with dashed horizontal lines.
  @example:
  <table class="mds-table mds-table--horizontal-lines-dashed">...</table>
  */
}.mds .mds-table.mds-table--horizontal-lines-dashed th,
.mds .mds-table.mds-table--horizontal-lines-dashed td {
  border-bottom-style: dashed;
}.mds .mds-table.mds-table--horizontal-lines-dashed thead th,
.mds .mds-table.mds-table--horizontal-lines-dashed thead td {
  border-top-style: dashed;
}.mds .mds-table.mds-table--horizontal-lines-dotted {
  /*
  @name: mds-table--horizontal-lines-dotted
  @category: Table
  @usage:
  Use mds-table--horizontal-lines-dotted class to style tables with dotted horizontal lines.
  @example:
  <table class="mds-table mds-table--horizontal-lines-dotted">...</table>
  */
}.mds .mds-table.mds-table--horizontal-lines-dotted th,
.mds .mds-table.mds-table--horizontal-lines-dotted td {
  border-bottom-style: dotted;
}.mds .mds-table.mds-table--horizontal-lines-dotted thead th,
.mds .mds-table.mds-table--horizontal-lines-dotted thead td {
  border-top-style: dotted;
}.mds .mds-table.mds-table--vertical-lines-solid {
  /*
  @name: mds-table--vertical-lines-solid
  @category: Table
  @usage:
  Use mds-table--vertical-lines-solid class to style tables with solid vertical lines.
  @example:
  <table class="mds-table mds-table--vertical-lines-solid">...</table>
  */
}.mds .mds-table.mds-table--vertical-lines-solid th,
.mds .mds-table.mds-table--vertical-lines-solid td {
  border-left: var(--mds_foundations_table_border-width) solid var(--mds_foundations_table_border-color);
  border-right: var(--mds_foundations_table_border-width) solid var(--mds_foundations_table_border-color);
}.mds .mds-table.mds-table--vertical-lines-dashed {
  /*
  @name: mds-table--vertical-lines-dashed
  @category: Table
  @usage:
  Use mds-table--vertical-lines-dashed class to style tables with dashed vertical lines.
  @example:
  <table class="mds-table mds-table--vertical-lines-dashed">...</table>
  */
}.mds .mds-table.mds-table--vertical-lines-dashed th,
.mds .mds-table.mds-table--vertical-lines-dashed td {
  border-left: var(--mds_foundations_table_border-width) dashed var(--mds_foundations_table_border-color);
  border-right: var(--mds_foundations_table_border-width) dashed var(--mds_foundations_table_border-color);
}.mds .mds-table.mds-table--vertical-lines-dotted {
  /*
  @name: mds-table--vertical-lines-dotted
  @category: Table
  @usage:
  Use mds-table--vertical-lines-dotted class to style tables with dotted vertical lines.
  @example:
  <table class="mds-table mds-table--vertical-lines-dotted">...</table>
  */
}.mds .mds-table.mds-table--vertical-lines-dotted th,
.mds .mds-table.mds-table--vertical-lines-dotted td {
  border-left: var(--mds_foundations_table_border-width) dotted var(--mds_foundations_table_border-color);
  border-right: var(--mds_foundations_table_border-width) dotted var(--mds_foundations_table_border-color);
}.mds .mds-table.mds-table--horizontal-lines-none {
  /*
  @name: mds-table--horizontal-lines-none
  @category: Table
  @usage:
  Use mds-table--horizontal-lines-none class to style tables with no horizontal lines.
  @example:
  <table class="mds-table mds-table--horizontal-lines-none">...</table>
  */
}.mds .mds-table.mds-table--horizontal-lines-none th,
.mds .mds-table.mds-table--horizontal-lines-none td {
  border-top-width: 0;
  border-bottom-width: 0;
}.mds .mds-table.mds-table--vertical-lines-none {
  /*
  @name: mds-table--vertical-lines-none
  @category: Table
  @usage:
  Use mds-table--vertical-lines-none class to style tables with no vertical lines.
  @example:
  <table class="mds-table mds-table--vertical-lines-none">...</table>
  */
}.mds .mds-table.mds-table--vertical-lines-none th,
.mds .mds-table.mds-table--vertical-lines-none td {
  border-left-width: 0;
  border-right-width: 0;
}.mds .mds-table.mds-table--outer-border-none {
  /*
  @name: mds-table--outer-border-none
  @category: Table
  @usage:
  Use mds-table--outer-border-none class to style tables with no outer border.
  @example:
  <table class="mds-table mds-table--outer-border-none">...</table>
  */
  border-width: 0;
}.mds .mds-table.mds-table--outer-border-dashed {
  /*
  @name: mds-table--outer-border-dashed
  @category: Table
  @usage:
  Use mds-table--outer-border-dashed class to style tables with a dashed outer border.
  @example:
  <table class="mds-table mds-table--outer-border-dashed">...</table>
  */
  border-style: dashed;
}.mds .mds-table.mds-table--outer-border-dotted {
  /*
  @name: mds-table--outer-border-dotted
  @category: Table
  @usage:
  Use mds-table--outer-border-dotted class to style tables with a dotted outer border.
  @example:
  <table class="mds-table mds-table--outer-border-dotted">...</table>
  */
  border-style: dotted;
}.mds .mds-table.mds-table--outer-border-corners-square {
  /*
  @name: mds-table--outer-border-corners-square
  @category: Table
  @usage:
  Use mds-table--outer-border-corners-square class to style tables with square outer border corners.
  @example:
  <table class="mds-table mds-table--outer-border-corners-square">...</table>
  */
  border-radius: 0;
}.mds .mds-table.mds-table--outer-border-corners-square thead tr:first-child th,
.mds .mds-table.mds-table--outer-border-corners-square thead tr:first-child td,
.mds .mds-table.mds-table--outer-border-corners-square tbody:last-child tr:last-child th,
.mds .mds-table.mds-table--outer-border-corners-square tbody:last-child tr:last-child td,
.mds .mds-table.mds-table--outer-border-corners-square tfoot tr:last-child th,
.mds .mds-table.mds-table--outer-border-corners-square tfoot tr:last-child td {
  border-radius: 0;
}.mds .mds-table table tr th,
.mds .mds-table table tr td {
  border-radius: 0;
}.mds .mds-table {
  /** Wrapping **/
}.mds .mds-table.mds-table--nowrap {
  /*
  @name: mds-table--nowrap
  @category: Table
  @usage:
  Use mds-table--nowrap class to prevent text wrapping in table cells.
  @example:
  <table class="mds-table mds-table--nowrap">...</table>
  */
  white-space: nowrap;
}.mds .mds-table.mds-table--nowrap * {
  white-space: nowrap;
}.mds .mds-table .mds-table__cell--nowrap {
  /*
  @name: mds-table__cell--nowrap
  @category: Table
  @usage:
  Use mds-table__cell--nowrap class to prevent text wrapping in specific table cells.
  @example:
  <td class="mds-table__cell--nowrap">This cell will not wrap text</td>
  */
  white-space: nowrap;
}.mds .mds-table .mds-table__cell--nowrap * {
  white-space: nowrap;
}.mds .mds-table {
  /** Vertical alignment **/
}.mds .mds-table.mds-table--vertical-align-top {
  /*
  @name: mds-table--vertical-align-top
  @category: Table
  @usage:
  Use mds-table--vertical-align-top class to align table cell content to the top.
  @example:
  <table class="mds-table mds-table--vertical-align-top">...</table>
  */
}.mds .mds-table.mds-table--vertical-align-top td,
.mds .mds-table.mds-table--vertical-align-top th {
  vertical-align: top;
}.mds .mds-table.mds-table--vertical-align-baseline {
  /*
  @name: mds-table--vertical-align-baseline
  @category: Table
  @usage:
  Use mds-table--vertical-align-baseline class to align table cell content to the baseline.
  @example:
  <table class="mds-table mds-table--vertical-align-baseline">...</table>
  */
}.mds .mds-table.mds-table--vertical-align-baseline td,
.mds .mds-table.mds-table--vertical-align-baseline th {
  vertical-align: baseline;
}.mds .mds-table.mds-table--vertical-align-bottom {
  /*
  @name: mds-table--vertical-align-bottom
  @category: Table
  @usage:
  Use mds-table--vertical-align-bottom class to align table cell content to the bottom.
  @example:
  <table class="mds-table mds-table--vertical-align-bottom">...</table>
  */
}.mds .mds-table.mds-table--vertical-align-bottom td,
.mds .mds-table.mds-table--vertical-align-bottom th {
  vertical-align: bottom;
}.mds .mds-table {
  /** Row selector **/
}.mds .mds-table .mds-table__column--row-selector {
  /*
  @name: mds-table__column--row-selector
  @category: Table
  @usage:
  Use mds-table__column--row-selector class to add a column for row selection checkboxes.
  @example:
  <table class="mds-table">
    <thead>
      <tr>
        <th class="mds-table__column--row-selector">
          <mc-checkbox></mc-checkbox>
        </th>
        <th>Name</th>
        </tr>
    </thead>
    <tbody>...</tbody>
  </table>
  */
  width: 1px;
  flex-grow: 0;
  flex-shrink: 0;
}.mds .mds-table .mds_table__row--selected {
  /*
  @name: mds_table__row--selected
  @category: Table
  @usage:
  Use mds_table__row--selected class to style selected rows in a table.
  @example:
  <tr class="mds_table__row--selected">...</tr>
  */
}.mds .mds-table .mds_table__row--selected td {
  background-color: var(--mds_foundations_table_cell_selected_background-color);
  color: var(--mds_foundations_table_cell_selected_text-color);
}.mds .mds-table {
  /** Row expander **/
}.mds .mds-table .mds-table__column--row-expander {
  /*
  @name: mds-table__column--row-expander
  @category: Table
  @usage:
  Use mds-table__column--row-expander class to add a column for row expander buttons.
  @example:
  <table class="mds-table">
    <thead>
      <tr>
        <th class="mds-table__column--row-expander">
          <mc-button icon="chevron-down" variant="text"></mc-button>
        </th>
        <th>Name</th>
        </tr>
    </thead>
    <tbody>...</tbody>
  </table>
  */
  width: 1px;
  flex-grow: 0;
  flex-shrink: 0;
}.mds .mds-table .mds-table__child-row td {
  color: var(--mds_brand_appearance_neutral_weakest_text-color);
}.mds .mds-table {
  /** Sortable header **/
}.mds .mds-table .mds-table__header-cell--sortable {
  /*
  @name: mds-table__header-cell--sortable
  @category: Table
  @usage:
  Use mds-table__header-cell--sortable class to make table headers sortable.
  @example:
  <th class="mds-table__header-cell--sortable">Name</th>
  */
  cursor: pointer;
  user-select: none !important;
  padding-top: var(--mds_foundations_table_medium_header-cell_sortable_padding-top);
  padding-bottom: var(--mds_foundations_table_medium_header-cell_sortable_padding-bottom);
}.mds .mds-table .mds-table__header-cell--sortable:hover {
  background-color: var(--mds_foundations_table_header-cell_sort_hover_background-color);
}.mds .mds-table .mds-table__header-cell--sortable:active {
  background-color: var(--mds_foundations_table_header-cell_sort_active_background-color);
}.mds .mds-table .mds-table__header-cell--sortable mc-button {
  pointer-events: none;
}.mds .mds-table .mds-table__header-cell--sortable mc-button::part(button) {
  border-radius: 0;
  padding: 0;
}.mds .mds-table .mds-table__header-cell--sortable mc-button::part(text-and-icon) {
  font-weight: var(--mds_foundations_table_header-cell_sort-button_font-weight);
}.mds .mds-table {
  /** Scrollable **/
}.mds .mds-table.mds-table--scrollable {
  /*
  @name: mds-table--scrollable
  @category: Table
  @usage:
  Use mds-table--scrollable class to make the table scrollable when it exceeds the available space.
  @example:
  <div class="mds-table mds-table--scrollable">
    <table>...</table>
  </div>
  */
  overflow: auto;
}.mds .mds-table.mds-table--scrollable thead tr:first-child th:last-child,
.mds .mds-table.mds-table--scrollable thead tr:first-child td:last-child {
  border-top-right-radius: 0;
}.mds .mds-table.mds-table--scrollable tbody:last-child tr:last-child td:last-child,
.mds .mds-table.mds-table--scrollable tbody:last-child tr:last-child th:last-child,
.mds .mds-table.mds-table--scrollable tfoot tr:last-child td:last-child,
.mds .mds-table.mds-table--scrollable tfoot tr:last-child th:last-child {
  border-bottom-right-radius: 0;
}.mds .mds-table {
  /** Sticky header viewport **/
}.mds .mds-table.mds-table--header-sticky-viewport {
  /*
  @name: mds-table--header-sticky-viewport
  @category: Table
  @usage:
  Use mds-table--header-sticky-viewport class when the sticky header should attach to the viewport rather than an inner scroll container.
  @example:
  <div class="mds-table mds-table--header-sticky mds-table--header-sticky-viewport">
    <table>...</table>
  </div>
  */
  overflow-y: visible;
}.mds .mds-table {
  /** No header **/
}.mds .mds-table.mds-table--header-none {
  /*
  @name: mds-table--header-none
  @category: Table
  @usage:
  Use mds-table--header-none class to hide the table header.
  @example:
  <table class="mds-table mds-table--header-none">...</table>
  */
}.mds .mds-table.mds-table--header-none thead {
  display: none;
}.mds .mds-table.mds-table--header-none tbody tr:first-child > *:first-child {
  border-top-left-radius: var(--row-border-radius);
}.mds .mds-table.mds-table--header-none tbody tr:first-child > *:last-child {
  border-top-right-radius: var(--row-border-radius);
}.mds .mds-table {
  /** Footer **/
}.mds .mds-table.mds-table--footer {
  /*
  @name: mds-table--footer
  @category: Table
  @usage:
  Use mds-table--footer class to add a footer to the table.
  @example:
  <table class="mds-table mds-table--footer">
    <tfoot>
      <tr>
        <td>Total</td>
        <td>...</td>
      </tr>
    </tfoot>
  </table>
  */
}.mds .mds-table.mds-table--footer tbody tr:last-child > *:first-child {
  border-bottom-left-radius: 0;
}.mds .mds-table.mds-table--footer tbody tr:last-child > *:last-child {
  border-bottom-right-radius: 0;
}.mds .mds-table.mds-table--footer tfoot tr:first-child td,
.mds .mds-table.mds-table--footer tfoot tr:first-child th {
  border-top: var(--mds_foundations_table_border-width) var(--mds_foundations_table_border-style) var(--mds_foundations_table_border-color);
}.mds .mds-table {
  /** Sticky **/
}.mds .mds-table .mds-table__column--sticky {
  /*
  @name: mds-table__column--sticky
  @category: Table
  @usage:
  Use mds-table__column--sticky class to make a column sticky.
  @example:
  <th class="mds-table__column--sticky">Sticky Column</th>
  */
  left: 0;
  position: sticky;
  z-index: 10;
  box-shadow: inset -3px 0 0 0 var(--mds_foundations_table_border-color);
}.mds .mds-table.mds-table--header-sticky {
  /*
  @name: mds-table--header-sticky
  @category: Table
  @usage:
  Use mds-table--header-sticky class to make the table header sticky.
  @example:
  <table class="mds-table mds-table--header-sticky">...</table>
  */
}.mds .mds-table.mds-table--header-sticky thead tr th {
  border-bottom: 0;
  box-shadow: inset 0 -1px var(--mds_foundations_table_border-color);
}.mds .mds-table.mds-table--header-sticky thead th,
.mds .mds-table.mds-table--header-sticky thead td {
  top: var(--mds-table-header-sticky-top, 0);
  position: sticky;
  z-index: 11;
}.mds .mds-table.mds-table--header-sticky thead th.mds-table__column--sticky,
.mds .mds-table.mds-table--header-sticky thead td.mds-table__column--sticky {
  z-index: 12;
}.mds .mds-table.mds-table--footer-sticky {
  /*
  @name: mds-table--footer-sticky
  @category: Table
  @usage:
  Use mds-table--footer-sticky class to make the table footer sticky.
  @example:
  <table class="mds-table mds-table--footer-sticky"></table>
  */
}.mds .mds-table.mds-table--footer-sticky tbody tr:last-child td,
.mds .mds-table.mds-table--footer-sticky tbody tr:last-child th {
  border-bottom: 0;
}.mds .mds-table.mds-table--footer-sticky tfoot tr:first-child td,
.mds .mds-table.mds-table--footer-sticky tfoot tr:first-child th {
  border-top: 0;
}.mds .mds-table.mds-table--footer-sticky tfoot tr td,
.mds .mds-table.mds-table--footer-sticky tfoot tr th {
  box-shadow: inset 0 1px var(--mds_foundations_table_border-color);
}.mds .mds-table.mds-table--footer-sticky tfoot td,
.mds .mds-table.mds-table--footer-sticky tfoot th {
  bottom: 0;
  position: sticky;
  z-index: 11;
}.mds .mds-table.mds-table--footer-sticky tfoot th.mds-table__column--sticky,
.mds .mds-table.mds-table--footer-sticky tfoot td.mds-table__column--sticky {
  z-index: 12;
}.mds .mds-table th.mds-table__cell--text-center,
.mds .mds-table td.mds-table__cell--text-center {
  /*
  @name: mds-table__cell--text-center
  @category: Table
  @usage:
  Use mds-table__cell--text-center class to center-align text in table cells.
  @example:
  <td class="mds-table__cell--text-center">Centered Text</td>
  */
  text-align: center;
}.mds .mds-table th.mds-table__cell--text-right, .mds .mds-table th.mds-table__cell--number,
.mds .mds-table td.mds-table__cell--text-right,
.mds .mds-table td.mds-table__cell--number {
  /*
  @name: mds-table__cell--text-right
  @category: Table
  @usage:
  Use mds-table__cell--text-right class to right-align text in table cells.
  @example:
  <td class="mds-table__cell--text-right">Right Aligned Text</td>
  */
  text-align: right;
}.mds .mds-table th.mds-table__cell--tabular-figures, .mds .mds-table th.mds-table__cell--number,
.mds .mds-table td.mds-table__cell--tabular-figures,
.mds .mds-table td.mds-table__cell--number {
  /*
  @name: mds-table__cell--tabular-figures
  @category: Table
  @usage:
  Use mds-table__cell--tabular-figures class to apply tabular figures font feature to table cells.
  @example:
  <td class="mds-table__cell--tabular-figures">1234567890</td>
  */
  font-feature-settings: "tnum";
}.mds .mds-table th.mds-table__cell--number,
.mds .mds-table td.mds-table__cell--number {
  /*
  @name: mds-table__cell--number
  @category: Table
  @usage:
  Use mds-table__cell--number class to style table cells containing numbers.
  @example:
  <td class="mds-table__cell--number">12345</td>
  */
}.mds .mds-table th.mds-table__cell--content-top,
.mds .mds-table td.mds-table__cell--content-top {
  /*
  @name: mds-table__cell--content-top
  @category: Table
  @usage:
  Use mds-table__cell--content-top class to align content to the top of table cells.
  @example:
  <td class="mds-table__cell--content-top">Content aligned to the top</td>
  */
  vertical-align: top;
}.mds .mds-table th.mds-table__cell--content-center,
.mds .mds-table td.mds-table__cell--content-center {
  /*
  @name: mds-table__cell--content-center
  @category: Table
  @usage:
  Use mds-table__cell--content-center class to center-align content vertically in table cells.
  @example:
  <td class="mds-table__cell--content-center">Content centered vertically</td>
  */
  vertical-align: middle;
}.mds .mds-table th.mds-table__cell--content-bottom,
.mds .mds-table td.mds-table__cell--content-bottom {
  /*
  @name: mds-table__cell--content-bottom
  @category: Table
  @usage:
  Use mds-table__cell--content-bottom class to align content to the bottom of table cells.
  @example:
  <td class="mds-table__cell--content-bottom">Content aligned to the bottom</td>
  */
  vertical-align: bottom;
}.mds .mds-table {
  /** expanded row **/
}.mds .mds-table .mds-table__expanded-row {
  /*
  @name: mds-table__expanded-row
  @category: Table
  @usage:
  Use mds-table__expanded-row class to style expanded rows in a table.
  @example:
  <tr class="mds-table__expanded-row--visible">
    <td colspan="5">Expanded content here</td>
  </tr>
  <tr class="mds-table__expanded-row--hidden">
    <td colspan="5">Expanded content here</td>
  </tr>
  */
}.mds .mds-table .mds-table__expanded-row--hidden {
  display: none;
}.mds .mds-table .mds-table__expanded-row--visible {
  display: table-row;
}.mds .mds-table .mds-table__expanded-row--visible:last-of-type {
  border-top: var(--mds_foundations_table_border-width) var(--mds_foundations_table_border-style) var(--mds_foundations_table_border-color);
}.mds .mds-table.mds-table--medium {
  /*
  @name: mds-table--medium
  @category: Table
  @usage:
  Use mds-table--medium class to style tables with medium size.
  @example:
  <table class="mds-table mds-table--medium">...</table>
  */
}.mds .mds-table.mds-table--medium .mds-table__expanded-row.mds-table__expanded-row--no-padding td {
  padding: 0;
}.mds .mds-table.mds-table--medium .mds-table__expanded-row td {
  padding: var(--mds_foundations_table_medium_expanded-row_padding-top) var(--mds_foundations_table_medium_expanded-row_padding-right) var(--mds_foundations_table_medium_expanded-row_padding-bottom) var(--mds_foundations_table_medium_expanded-row_padding-left);
}.mds .mds-table .mds-table__expanded-row__trigger {
  /*
  @name: mds-table__expanded-row__trigger
  @category: Table
  @usage:
  Use mds-table__expanded-row__trigger class to style the trigger for expanded rows.
  @example:
  <td class="mds-table__expanded-row__trigger">
    <mc-button icon="chevron-down" variant="text"></mc-button>
  </td>
  */
}.mds .mds-table .mds-table__expanded-row__trigger::part(button) {
  margin: 0;
  width: auto;
}.mds .mds-table .mds-table__expanded-row__trigger::part(button):hover {
  background-color: transparent;
}.mds .mds-table .mds-table__expanded-row__trigger::part(icon) {
  transition: transform var(--mds_foundations_table_row-expander-trigger_transition-duration) ease-in-out;
}.mds .mds-table .mds-table__expanded-row__trigger--expanded::part(icon) {
  transform: rotate(-180deg);
}.mds {
  /** Table with caption **/
}.mds .mds-table-and-caption {
  /*
  @name: mds-table-and-caption
  @category: Table
  @usage:
  Use mds-table-and-caption class to style a table with a caption.
  @example:
  <div class="mds-table-and-caption">
    <div class="mds-table">
      <table>...</table>
    </div>
    <div class="mds-table-caption">Table Caption</div>
  </div>
  */
  margin: var(--mds_foundations_table_margin-top) 0 var(--mds_foundations_table_margin-top);
}.mds .mds-table-and-caption .mds-table {
  margin: 0;
}.mds {
  /** Caption **/
}.mds .mds-table-caption {
  /*
  @name: mds-table-caption
  @category: Table
  @usage:
  Use mds-table-caption class to style the caption of a table.
  @example:
  <div class="mds-table-caption">Table Caption</div>
  */
  color: var(--mds_foundations_table_caption_text-color);
  margin-bottom: var(--mds_foundations_table_medium_caption_margin-bottom);
}.mds .mds-table-caption.mds-table-caption--small {
  /*
  @name: mds-table-caption--small
  @category: Table
  @usage:
  Use mds-table-caption--small class to style small captions for tables.
  @example:
  <div class="mds-table-caption mds-table-caption--small">Small Table Caption</div>
  */
  margin-bottom: var(--mds_foundations_table_small_caption_margin-bottom);
}.mds .mds-table-caption.mds-table-caption--small {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_small_mobile_font-size);
  line-height: var(--mds_brand_typography_text_small_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-table-caption.mds-table-caption--small {
    font-size: var(--mds_brand_typography_text_small_desktop_font-size);
    line-height: var(--mds_brand_typography_text_small_desktop_line-height);
  }
}.mds .mds-table-caption.mds-table-caption--small {
  font-style: var(--mds_brand_typography_text_small_normal_font-style);
  font-weight: var(--mds_brand_typography_text_small_normal_font-weight);
}.mds .mds-table-caption.mds-table-caption--large {
  /*
  @name: mds-table-caption--large
  @category: Table
  @usage:
  Use mds-table-caption--large class to style large captions for tables.
  @example:
  <div class="mds-table-caption mds-table-caption--large">Large Table Caption</div>
  */
  margin-bottom: var(--mds_foundations_table_large_caption_margin-bottom);
}.mds .mds-table-caption {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_medium_mobile_font-size);
  line-height: var(--mds_brand_typography_text_medium_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds .mds-table-caption {
    font-size: var(--mds_brand_typography_text_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_text_medium_desktop_line-height);
  }
}.mds .mds-table-caption {
  font-style: var(--mds_brand_typography_text_medium_normal_font-style);
  font-weight: var(--mds_brand_typography_text_medium_normal_font-weight);
}.mds {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-size: var(--mds_brand_typography_text_medium_mobile_font-size);
  line-height: var(--mds_brand_typography_text_medium_mobile_line-height);
}@media screen and (min-width: 1025px) {
  .mds {
    font-size: var(--mds_brand_typography_text_medium_desktop_font-size);
    line-height: var(--mds_brand_typography_text_medium_desktop_line-height);
  }
}.mds {
  font-style: var(--mds_brand_typography_text_medium_normal_font-style);
  font-weight: var(--mds_brand_typography_text_medium_normal_font-weight);
}@container (max-width: 640px) {
  .mds .mds-xs-gap-50,
  .mds .mds-container .mds-xs-gap-50,
  .mds .mds-viewport .mds-xs-gap-50 {
    gap: 2px;
  }
  .mds .mds-xs-col-gap-50,
  .mds .mds-container .mds-xs-col-gap-50,
  .mds .mds-viewport .mds-xs-col-gap-50 {
    column-gap: 2px;
  }
  .mds .mds-xs-row-gap-50,
  .mds .mds-container .mds-xs-row-gap-50,
  .mds .mds-viewport .mds-xs-row-gap-50 {
    row-gap: 2px;
  }
  .mds .mds-xs-gap-100,
  .mds .mds-container .mds-xs-gap-100,
  .mds .mds-viewport .mds-xs-gap-100 {
    gap: 4px;
  }
  .mds .mds-xs-col-gap-100,
  .mds .mds-container .mds-xs-col-gap-100,
  .mds .mds-viewport .mds-xs-col-gap-100 {
    column-gap: 4px;
  }
  .mds .mds-xs-row-gap-100,
  .mds .mds-container .mds-xs-row-gap-100,
  .mds .mds-viewport .mds-xs-row-gap-100 {
    row-gap: 4px;
  }
  .mds .mds-xs-gap-150,
  .mds .mds-container .mds-xs-gap-150,
  .mds .mds-viewport .mds-xs-gap-150 {
    gap: 6px;
  }
  .mds .mds-xs-col-gap-150,
  .mds .mds-container .mds-xs-col-gap-150,
  .mds .mds-viewport .mds-xs-col-gap-150 {
    column-gap: 6px;
  }
  .mds .mds-xs-row-gap-150,
  .mds .mds-container .mds-xs-row-gap-150,
  .mds .mds-viewport .mds-xs-row-gap-150 {
    row-gap: 6px;
  }
  .mds .mds-xs-gap-200,
  .mds .mds-container .mds-xs-gap-200,
  .mds .mds-viewport .mds-xs-gap-200 {
    gap: 8px;
  }
  .mds .mds-xs-col-gap-200,
  .mds .mds-container .mds-xs-col-gap-200,
  .mds .mds-viewport .mds-xs-col-gap-200 {
    column-gap: 8px;
  }
  .mds .mds-xs-row-gap-200,
  .mds .mds-container .mds-xs-row-gap-200,
  .mds .mds-viewport .mds-xs-row-gap-200 {
    row-gap: 8px;
  }
  .mds .mds-xs-gap-300,
  .mds .mds-container .mds-xs-gap-300,
  .mds .mds-viewport .mds-xs-gap-300 {
    gap: 12px;
  }
  .mds .mds-xs-col-gap-300,
  .mds .mds-container .mds-xs-col-gap-300,
  .mds .mds-viewport .mds-xs-col-gap-300 {
    column-gap: 12px;
  }
  .mds .mds-xs-row-gap-300,
  .mds .mds-container .mds-xs-row-gap-300,
  .mds .mds-viewport .mds-xs-row-gap-300 {
    row-gap: 12px;
  }
  .mds .mds-xs-gap-400,
  .mds .mds-container .mds-xs-gap-400,
  .mds .mds-viewport .mds-xs-gap-400 {
    gap: 16px;
  }
  .mds .mds-xs-col-gap-400,
  .mds .mds-container .mds-xs-col-gap-400,
  .mds .mds-viewport .mds-xs-col-gap-400 {
    column-gap: 16px;
  }
  .mds .mds-xs-row-gap-400,
  .mds .mds-container .mds-xs-row-gap-400,
  .mds .mds-viewport .mds-xs-row-gap-400 {
    row-gap: 16px;
  }
  .mds .mds-xs-gap-500,
  .mds .mds-container .mds-xs-gap-500,
  .mds .mds-viewport .mds-xs-gap-500 {
    gap: 20px;
  }
  .mds .mds-xs-col-gap-500,
  .mds .mds-container .mds-xs-col-gap-500,
  .mds .mds-viewport .mds-xs-col-gap-500 {
    column-gap: 20px;
  }
  .mds .mds-xs-row-gap-500,
  .mds .mds-container .mds-xs-row-gap-500,
  .mds .mds-viewport .mds-xs-row-gap-500 {
    row-gap: 20px;
  }
  .mds .mds-xs-gap-600,
  .mds .mds-container .mds-xs-gap-600,
  .mds .mds-viewport .mds-xs-gap-600 {
    gap: 24px;
  }
  .mds .mds-xs-col-gap-600,
  .mds .mds-container .mds-xs-col-gap-600,
  .mds .mds-viewport .mds-xs-col-gap-600 {
    column-gap: 24px;
  }
  .mds .mds-xs-row-gap-600,
  .mds .mds-container .mds-xs-row-gap-600,
  .mds .mds-viewport .mds-xs-row-gap-600 {
    row-gap: 24px;
  }
  .mds .mds-xs-gap-700,
  .mds .mds-container .mds-xs-gap-700,
  .mds .mds-viewport .mds-xs-gap-700 {
    gap: 28px;
  }
  .mds .mds-xs-col-gap-700,
  .mds .mds-container .mds-xs-col-gap-700,
  .mds .mds-viewport .mds-xs-col-gap-700 {
    column-gap: 28px;
  }
  .mds .mds-xs-row-gap-700,
  .mds .mds-container .mds-xs-row-gap-700,
  .mds .mds-viewport .mds-xs-row-gap-700 {
    row-gap: 28px;
  }
  .mds .mds-xs-gap-800,
  .mds .mds-container .mds-xs-gap-800,
  .mds .mds-viewport .mds-xs-gap-800 {
    gap: 32px;
  }
  .mds .mds-xs-col-gap-800,
  .mds .mds-container .mds-xs-col-gap-800,
  .mds .mds-viewport .mds-xs-col-gap-800 {
    column-gap: 32px;
  }
  .mds .mds-xs-row-gap-800,
  .mds .mds-container .mds-xs-row-gap-800,
  .mds .mds-viewport .mds-xs-row-gap-800 {
    row-gap: 32px;
  }
  .mds .mds-xs-gap-900,
  .mds .mds-container .mds-xs-gap-900,
  .mds .mds-viewport .mds-xs-gap-900 {
    gap: 36px;
  }
  .mds .mds-xs-col-gap-900,
  .mds .mds-container .mds-xs-col-gap-900,
  .mds .mds-viewport .mds-xs-col-gap-900 {
    column-gap: 36px;
  }
  .mds .mds-xs-row-gap-900,
  .mds .mds-container .mds-xs-row-gap-900,
  .mds .mds-viewport .mds-xs-row-gap-900 {
    row-gap: 36px;
  }
  .mds .mds-xs-gap-1000,
  .mds .mds-container .mds-xs-gap-1000,
  .mds .mds-viewport .mds-xs-gap-1000 {
    gap: 40px;
  }
  .mds .mds-xs-col-gap-1000,
  .mds .mds-container .mds-xs-col-gap-1000,
  .mds .mds-viewport .mds-xs-col-gap-1000 {
    column-gap: 40px;
  }
  .mds .mds-xs-row-gap-1000,
  .mds .mds-container .mds-xs-row-gap-1000,
  .mds .mds-viewport .mds-xs-row-gap-1000 {
    row-gap: 40px;
  }
  .mds .mds-xs-gap-1200,
  .mds .mds-container .mds-xs-gap-1200,
  .mds .mds-viewport .mds-xs-gap-1200 {
    gap: 48px;
  }
  .mds .mds-xs-col-gap-1200,
  .mds .mds-container .mds-xs-col-gap-1200,
  .mds .mds-viewport .mds-xs-col-gap-1200 {
    column-gap: 48px;
  }
  .mds .mds-xs-row-gap-1200,
  .mds .mds-container .mds-xs-row-gap-1200,
  .mds .mds-viewport .mds-xs-row-gap-1200 {
    row-gap: 48px;
  }
  .mds .mds-xs-gap-1600,
  .mds .mds-container .mds-xs-gap-1600,
  .mds .mds-viewport .mds-xs-gap-1600 {
    gap: 64px;
  }
  .mds .mds-xs-col-gap-1600,
  .mds .mds-container .mds-xs-col-gap-1600,
  .mds .mds-viewport .mds-xs-col-gap-1600 {
    column-gap: 64px;
  }
  .mds .mds-xs-row-gap-1600,
  .mds .mds-container .mds-xs-row-gap-1600,
  .mds .mds-viewport .mds-xs-row-gap-1600 {
    row-gap: 64px;
  }
  .mds .mds-xs-gap-2000,
  .mds .mds-container .mds-xs-gap-2000,
  .mds .mds-viewport .mds-xs-gap-2000 {
    gap: 80px;
  }
  .mds .mds-xs-col-gap-2000,
  .mds .mds-container .mds-xs-col-gap-2000,
  .mds .mds-viewport .mds-xs-col-gap-2000 {
    column-gap: 80px;
  }
  .mds .mds-xs-row-gap-2000,
  .mds .mds-container .mds-xs-row-gap-2000,
  .mds .mds-viewport .mds-xs-row-gap-2000 {
    row-gap: 80px;
  }
  .mds .mds-xs-gap-2400,
  .mds .mds-container .mds-xs-gap-2400,
  .mds .mds-viewport .mds-xs-gap-2400 {
    gap: 96px;
  }
  .mds .mds-xs-col-gap-2400,
  .mds .mds-container .mds-xs-col-gap-2400,
  .mds .mds-viewport .mds-xs-col-gap-2400 {
    column-gap: 96px;
  }
  .mds .mds-xs-row-gap-2400,
  .mds .mds-container .mds-xs-row-gap-2400,
  .mds .mds-viewport .mds-xs-row-gap-2400 {
    row-gap: 96px;
  }
  .mds .mds-xs-gap-2800,
  .mds .mds-container .mds-xs-gap-2800,
  .mds .mds-viewport .mds-xs-gap-2800 {
    gap: 112px;
  }
  .mds .mds-xs-col-gap-2800,
  .mds .mds-container .mds-xs-col-gap-2800,
  .mds .mds-viewport .mds-xs-col-gap-2800 {
    column-gap: 112px;
  }
  .mds .mds-xs-row-gap-2800,
  .mds .mds-container .mds-xs-row-gap-2800,
  .mds .mds-viewport .mds-xs-row-gap-2800 {
    row-gap: 112px;
  }
  .mds .mds-xs-gap-3200,
  .mds .mds-container .mds-xs-gap-3200,
  .mds .mds-viewport .mds-xs-gap-3200 {
    gap: 128px;
  }
  .mds .mds-xs-col-gap-3200,
  .mds .mds-container .mds-xs-col-gap-3200,
  .mds .mds-viewport .mds-xs-col-gap-3200 {
    column-gap: 128px;
  }
  .mds .mds-xs-row-gap-3200,
  .mds .mds-container .mds-xs-row-gap-3200,
  .mds .mds-viewport .mds-xs-row-gap-3200 {
    row-gap: 128px;
  }
}@container (min-width: 641px) {
  .mds .mds-sm-gap-50,
  .mds .mds-container .mds-sm-gap-50,
  .mds .mds-viewport .mds-sm-gap-50 {
    gap: 2px;
  }
  .mds .mds-sm-col-gap-50,
  .mds .mds-container .mds-sm-col-gap-50,
  .mds .mds-viewport .mds-sm-col-gap-50 {
    column-gap: 2px;
  }
  .mds .mds-sm-row-gap-50,
  .mds .mds-container .mds-sm-row-gap-50,
  .mds .mds-viewport .mds-sm-row-gap-50 {
    row-gap: 2px;
  }
  .mds .mds-sm-gap-100,
  .mds .mds-container .mds-sm-gap-100,
  .mds .mds-viewport .mds-sm-gap-100 {
    gap: 4px;
  }
  .mds .mds-sm-col-gap-100,
  .mds .mds-container .mds-sm-col-gap-100,
  .mds .mds-viewport .mds-sm-col-gap-100 {
    column-gap: 4px;
  }
  .mds .mds-sm-row-gap-100,
  .mds .mds-container .mds-sm-row-gap-100,
  .mds .mds-viewport .mds-sm-row-gap-100 {
    row-gap: 4px;
  }
  .mds .mds-sm-gap-150,
  .mds .mds-container .mds-sm-gap-150,
  .mds .mds-viewport .mds-sm-gap-150 {
    gap: 6px;
  }
  .mds .mds-sm-col-gap-150,
  .mds .mds-container .mds-sm-col-gap-150,
  .mds .mds-viewport .mds-sm-col-gap-150 {
    column-gap: 6px;
  }
  .mds .mds-sm-row-gap-150,
  .mds .mds-container .mds-sm-row-gap-150,
  .mds .mds-viewport .mds-sm-row-gap-150 {
    row-gap: 6px;
  }
  .mds .mds-sm-gap-200,
  .mds .mds-container .mds-sm-gap-200,
  .mds .mds-viewport .mds-sm-gap-200 {
    gap: 8px;
  }
  .mds .mds-sm-col-gap-200,
  .mds .mds-container .mds-sm-col-gap-200,
  .mds .mds-viewport .mds-sm-col-gap-200 {
    column-gap: 8px;
  }
  .mds .mds-sm-row-gap-200,
  .mds .mds-container .mds-sm-row-gap-200,
  .mds .mds-viewport .mds-sm-row-gap-200 {
    row-gap: 8px;
  }
  .mds .mds-sm-gap-300,
  .mds .mds-container .mds-sm-gap-300,
  .mds .mds-viewport .mds-sm-gap-300 {
    gap: 12px;
  }
  .mds .mds-sm-col-gap-300,
  .mds .mds-container .mds-sm-col-gap-300,
  .mds .mds-viewport .mds-sm-col-gap-300 {
    column-gap: 12px;
  }
  .mds .mds-sm-row-gap-300,
  .mds .mds-container .mds-sm-row-gap-300,
  .mds .mds-viewport .mds-sm-row-gap-300 {
    row-gap: 12px;
  }
  .mds .mds-sm-gap-400,
  .mds .mds-container .mds-sm-gap-400,
  .mds .mds-viewport .mds-sm-gap-400 {
    gap: 16px;
  }
  .mds .mds-sm-col-gap-400,
  .mds .mds-container .mds-sm-col-gap-400,
  .mds .mds-viewport .mds-sm-col-gap-400 {
    column-gap: 16px;
  }
  .mds .mds-sm-row-gap-400,
  .mds .mds-container .mds-sm-row-gap-400,
  .mds .mds-viewport .mds-sm-row-gap-400 {
    row-gap: 16px;
  }
  .mds .mds-sm-gap-500,
  .mds .mds-container .mds-sm-gap-500,
  .mds .mds-viewport .mds-sm-gap-500 {
    gap: 20px;
  }
  .mds .mds-sm-col-gap-500,
  .mds .mds-container .mds-sm-col-gap-500,
  .mds .mds-viewport .mds-sm-col-gap-500 {
    column-gap: 20px;
  }
  .mds .mds-sm-row-gap-500,
  .mds .mds-container .mds-sm-row-gap-500,
  .mds .mds-viewport .mds-sm-row-gap-500 {
    row-gap: 20px;
  }
  .mds .mds-sm-gap-600,
  .mds .mds-container .mds-sm-gap-600,
  .mds .mds-viewport .mds-sm-gap-600 {
    gap: 24px;
  }
  .mds .mds-sm-col-gap-600,
  .mds .mds-container .mds-sm-col-gap-600,
  .mds .mds-viewport .mds-sm-col-gap-600 {
    column-gap: 24px;
  }
  .mds .mds-sm-row-gap-600,
  .mds .mds-container .mds-sm-row-gap-600,
  .mds .mds-viewport .mds-sm-row-gap-600 {
    row-gap: 24px;
  }
  .mds .mds-sm-gap-700,
  .mds .mds-container .mds-sm-gap-700,
  .mds .mds-viewport .mds-sm-gap-700 {
    gap: 28px;
  }
  .mds .mds-sm-col-gap-700,
  .mds .mds-container .mds-sm-col-gap-700,
  .mds .mds-viewport .mds-sm-col-gap-700 {
    column-gap: 28px;
  }
  .mds .mds-sm-row-gap-700,
  .mds .mds-container .mds-sm-row-gap-700,
  .mds .mds-viewport .mds-sm-row-gap-700 {
    row-gap: 28px;
  }
  .mds .mds-sm-gap-800,
  .mds .mds-container .mds-sm-gap-800,
  .mds .mds-viewport .mds-sm-gap-800 {
    gap: 32px;
  }
  .mds .mds-sm-col-gap-800,
  .mds .mds-container .mds-sm-col-gap-800,
  .mds .mds-viewport .mds-sm-col-gap-800 {
    column-gap: 32px;
  }
  .mds .mds-sm-row-gap-800,
  .mds .mds-container .mds-sm-row-gap-800,
  .mds .mds-viewport .mds-sm-row-gap-800 {
    row-gap: 32px;
  }
  .mds .mds-sm-gap-900,
  .mds .mds-container .mds-sm-gap-900,
  .mds .mds-viewport .mds-sm-gap-900 {
    gap: 36px;
  }
  .mds .mds-sm-col-gap-900,
  .mds .mds-container .mds-sm-col-gap-900,
  .mds .mds-viewport .mds-sm-col-gap-900 {
    column-gap: 36px;
  }
  .mds .mds-sm-row-gap-900,
  .mds .mds-container .mds-sm-row-gap-900,
  .mds .mds-viewport .mds-sm-row-gap-900 {
    row-gap: 36px;
  }
  .mds .mds-sm-gap-1000,
  .mds .mds-container .mds-sm-gap-1000,
  .mds .mds-viewport .mds-sm-gap-1000 {
    gap: 40px;
  }
  .mds .mds-sm-col-gap-1000,
  .mds .mds-container .mds-sm-col-gap-1000,
  .mds .mds-viewport .mds-sm-col-gap-1000 {
    column-gap: 40px;
  }
  .mds .mds-sm-row-gap-1000,
  .mds .mds-container .mds-sm-row-gap-1000,
  .mds .mds-viewport .mds-sm-row-gap-1000 {
    row-gap: 40px;
  }
  .mds .mds-sm-gap-1200,
  .mds .mds-container .mds-sm-gap-1200,
  .mds .mds-viewport .mds-sm-gap-1200 {
    gap: 48px;
  }
  .mds .mds-sm-col-gap-1200,
  .mds .mds-container .mds-sm-col-gap-1200,
  .mds .mds-viewport .mds-sm-col-gap-1200 {
    column-gap: 48px;
  }
  .mds .mds-sm-row-gap-1200,
  .mds .mds-container .mds-sm-row-gap-1200,
  .mds .mds-viewport .mds-sm-row-gap-1200 {
    row-gap: 48px;
  }
  .mds .mds-sm-gap-1600,
  .mds .mds-container .mds-sm-gap-1600,
  .mds .mds-viewport .mds-sm-gap-1600 {
    gap: 64px;
  }
  .mds .mds-sm-col-gap-1600,
  .mds .mds-container .mds-sm-col-gap-1600,
  .mds .mds-viewport .mds-sm-col-gap-1600 {
    column-gap: 64px;
  }
  .mds .mds-sm-row-gap-1600,
  .mds .mds-container .mds-sm-row-gap-1600,
  .mds .mds-viewport .mds-sm-row-gap-1600 {
    row-gap: 64px;
  }
  .mds .mds-sm-gap-2000,
  .mds .mds-container .mds-sm-gap-2000,
  .mds .mds-viewport .mds-sm-gap-2000 {
    gap: 80px;
  }
  .mds .mds-sm-col-gap-2000,
  .mds .mds-container .mds-sm-col-gap-2000,
  .mds .mds-viewport .mds-sm-col-gap-2000 {
    column-gap: 80px;
  }
  .mds .mds-sm-row-gap-2000,
  .mds .mds-container .mds-sm-row-gap-2000,
  .mds .mds-viewport .mds-sm-row-gap-2000 {
    row-gap: 80px;
  }
  .mds .mds-sm-gap-2400,
  .mds .mds-container .mds-sm-gap-2400,
  .mds .mds-viewport .mds-sm-gap-2400 {
    gap: 96px;
  }
  .mds .mds-sm-col-gap-2400,
  .mds .mds-container .mds-sm-col-gap-2400,
  .mds .mds-viewport .mds-sm-col-gap-2400 {
    column-gap: 96px;
  }
  .mds .mds-sm-row-gap-2400,
  .mds .mds-container .mds-sm-row-gap-2400,
  .mds .mds-viewport .mds-sm-row-gap-2400 {
    row-gap: 96px;
  }
  .mds .mds-sm-gap-2800,
  .mds .mds-container .mds-sm-gap-2800,
  .mds .mds-viewport .mds-sm-gap-2800 {
    gap: 112px;
  }
  .mds .mds-sm-col-gap-2800,
  .mds .mds-container .mds-sm-col-gap-2800,
  .mds .mds-viewport .mds-sm-col-gap-2800 {
    column-gap: 112px;
  }
  .mds .mds-sm-row-gap-2800,
  .mds .mds-container .mds-sm-row-gap-2800,
  .mds .mds-viewport .mds-sm-row-gap-2800 {
    row-gap: 112px;
  }
  .mds .mds-sm-gap-3200,
  .mds .mds-container .mds-sm-gap-3200,
  .mds .mds-viewport .mds-sm-gap-3200 {
    gap: 128px;
  }
  .mds .mds-sm-col-gap-3200,
  .mds .mds-container .mds-sm-col-gap-3200,
  .mds .mds-viewport .mds-sm-col-gap-3200 {
    column-gap: 128px;
  }
  .mds .mds-sm-row-gap-3200,
  .mds .mds-container .mds-sm-row-gap-3200,
  .mds .mds-viewport .mds-sm-row-gap-3200 {
    row-gap: 128px;
  }
}@container (min-width: 1025px) {
  .mds .mds-md-gap-50,
  .mds .mds-container .mds-md-gap-50,
  .mds .mds-viewport .mds-md-gap-50 {
    gap: 2px;
  }
  .mds .mds-md-col-gap-50,
  .mds .mds-container .mds-md-col-gap-50,
  .mds .mds-viewport .mds-md-col-gap-50 {
    column-gap: 2px;
  }
  .mds .mds-md-row-gap-50,
  .mds .mds-container .mds-md-row-gap-50,
  .mds .mds-viewport .mds-md-row-gap-50 {
    row-gap: 2px;
  }
  .mds .mds-md-gap-100,
  .mds .mds-container .mds-md-gap-100,
  .mds .mds-viewport .mds-md-gap-100 {
    gap: 4px;
  }
  .mds .mds-md-col-gap-100,
  .mds .mds-container .mds-md-col-gap-100,
  .mds .mds-viewport .mds-md-col-gap-100 {
    column-gap: 4px;
  }
  .mds .mds-md-row-gap-100,
  .mds .mds-container .mds-md-row-gap-100,
  .mds .mds-viewport .mds-md-row-gap-100 {
    row-gap: 4px;
  }
  .mds .mds-md-gap-150,
  .mds .mds-container .mds-md-gap-150,
  .mds .mds-viewport .mds-md-gap-150 {
    gap: 6px;
  }
  .mds .mds-md-col-gap-150,
  .mds .mds-container .mds-md-col-gap-150,
  .mds .mds-viewport .mds-md-col-gap-150 {
    column-gap: 6px;
  }
  .mds .mds-md-row-gap-150,
  .mds .mds-container .mds-md-row-gap-150,
  .mds .mds-viewport .mds-md-row-gap-150 {
    row-gap: 6px;
  }
  .mds .mds-md-gap-200,
  .mds .mds-container .mds-md-gap-200,
  .mds .mds-viewport .mds-md-gap-200 {
    gap: 8px;
  }
  .mds .mds-md-col-gap-200,
  .mds .mds-container .mds-md-col-gap-200,
  .mds .mds-viewport .mds-md-col-gap-200 {
    column-gap: 8px;
  }
  .mds .mds-md-row-gap-200,
  .mds .mds-container .mds-md-row-gap-200,
  .mds .mds-viewport .mds-md-row-gap-200 {
    row-gap: 8px;
  }
  .mds .mds-md-gap-300,
  .mds .mds-container .mds-md-gap-300,
  .mds .mds-viewport .mds-md-gap-300 {
    gap: 12px;
  }
  .mds .mds-md-col-gap-300,
  .mds .mds-container .mds-md-col-gap-300,
  .mds .mds-viewport .mds-md-col-gap-300 {
    column-gap: 12px;
  }
  .mds .mds-md-row-gap-300,
  .mds .mds-container .mds-md-row-gap-300,
  .mds .mds-viewport .mds-md-row-gap-300 {
    row-gap: 12px;
  }
  .mds .mds-md-gap-400,
  .mds .mds-container .mds-md-gap-400,
  .mds .mds-viewport .mds-md-gap-400 {
    gap: 16px;
  }
  .mds .mds-md-col-gap-400,
  .mds .mds-container .mds-md-col-gap-400,
  .mds .mds-viewport .mds-md-col-gap-400 {
    column-gap: 16px;
  }
  .mds .mds-md-row-gap-400,
  .mds .mds-container .mds-md-row-gap-400,
  .mds .mds-viewport .mds-md-row-gap-400 {
    row-gap: 16px;
  }
  .mds .mds-md-gap-500,
  .mds .mds-container .mds-md-gap-500,
  .mds .mds-viewport .mds-md-gap-500 {
    gap: 20px;
  }
  .mds .mds-md-col-gap-500,
  .mds .mds-container .mds-md-col-gap-500,
  .mds .mds-viewport .mds-md-col-gap-500 {
    column-gap: 20px;
  }
  .mds .mds-md-row-gap-500,
  .mds .mds-container .mds-md-row-gap-500,
  .mds .mds-viewport .mds-md-row-gap-500 {
    row-gap: 20px;
  }
  .mds .mds-md-gap-600,
  .mds .mds-container .mds-md-gap-600,
  .mds .mds-viewport .mds-md-gap-600 {
    gap: 24px;
  }
  .mds .mds-md-col-gap-600,
  .mds .mds-container .mds-md-col-gap-600,
  .mds .mds-viewport .mds-md-col-gap-600 {
    column-gap: 24px;
  }
  .mds .mds-md-row-gap-600,
  .mds .mds-container .mds-md-row-gap-600,
  .mds .mds-viewport .mds-md-row-gap-600 {
    row-gap: 24px;
  }
  .mds .mds-md-gap-700,
  .mds .mds-container .mds-md-gap-700,
  .mds .mds-viewport .mds-md-gap-700 {
    gap: 28px;
  }
  .mds .mds-md-col-gap-700,
  .mds .mds-container .mds-md-col-gap-700,
  .mds .mds-viewport .mds-md-col-gap-700 {
    column-gap: 28px;
  }
  .mds .mds-md-row-gap-700,
  .mds .mds-container .mds-md-row-gap-700,
  .mds .mds-viewport .mds-md-row-gap-700 {
    row-gap: 28px;
  }
  .mds .mds-md-gap-800,
  .mds .mds-container .mds-md-gap-800,
  .mds .mds-viewport .mds-md-gap-800 {
    gap: 32px;
  }
  .mds .mds-md-col-gap-800,
  .mds .mds-container .mds-md-col-gap-800,
  .mds .mds-viewport .mds-md-col-gap-800 {
    column-gap: 32px;
  }
  .mds .mds-md-row-gap-800,
  .mds .mds-container .mds-md-row-gap-800,
  .mds .mds-viewport .mds-md-row-gap-800 {
    row-gap: 32px;
  }
  .mds .mds-md-gap-900,
  .mds .mds-container .mds-md-gap-900,
  .mds .mds-viewport .mds-md-gap-900 {
    gap: 36px;
  }
  .mds .mds-md-col-gap-900,
  .mds .mds-container .mds-md-col-gap-900,
  .mds .mds-viewport .mds-md-col-gap-900 {
    column-gap: 36px;
  }
  .mds .mds-md-row-gap-900,
  .mds .mds-container .mds-md-row-gap-900,
  .mds .mds-viewport .mds-md-row-gap-900 {
    row-gap: 36px;
  }
  .mds .mds-md-gap-1000,
  .mds .mds-container .mds-md-gap-1000,
  .mds .mds-viewport .mds-md-gap-1000 {
    gap: 40px;
  }
  .mds .mds-md-col-gap-1000,
  .mds .mds-container .mds-md-col-gap-1000,
  .mds .mds-viewport .mds-md-col-gap-1000 {
    column-gap: 40px;
  }
  .mds .mds-md-row-gap-1000,
  .mds .mds-container .mds-md-row-gap-1000,
  .mds .mds-viewport .mds-md-row-gap-1000 {
    row-gap: 40px;
  }
  .mds .mds-md-gap-1200,
  .mds .mds-container .mds-md-gap-1200,
  .mds .mds-viewport .mds-md-gap-1200 {
    gap: 48px;
  }
  .mds .mds-md-col-gap-1200,
  .mds .mds-container .mds-md-col-gap-1200,
  .mds .mds-viewport .mds-md-col-gap-1200 {
    column-gap: 48px;
  }
  .mds .mds-md-row-gap-1200,
  .mds .mds-container .mds-md-row-gap-1200,
  .mds .mds-viewport .mds-md-row-gap-1200 {
    row-gap: 48px;
  }
  .mds .mds-md-gap-1600,
  .mds .mds-container .mds-md-gap-1600,
  .mds .mds-viewport .mds-md-gap-1600 {
    gap: 64px;
  }
  .mds .mds-md-col-gap-1600,
  .mds .mds-container .mds-md-col-gap-1600,
  .mds .mds-viewport .mds-md-col-gap-1600 {
    column-gap: 64px;
  }
  .mds .mds-md-row-gap-1600,
  .mds .mds-container .mds-md-row-gap-1600,
  .mds .mds-viewport .mds-md-row-gap-1600 {
    row-gap: 64px;
  }
  .mds .mds-md-gap-2000,
  .mds .mds-container .mds-md-gap-2000,
  .mds .mds-viewport .mds-md-gap-2000 {
    gap: 80px;
  }
  .mds .mds-md-col-gap-2000,
  .mds .mds-container .mds-md-col-gap-2000,
  .mds .mds-viewport .mds-md-col-gap-2000 {
    column-gap: 80px;
  }
  .mds .mds-md-row-gap-2000,
  .mds .mds-container .mds-md-row-gap-2000,
  .mds .mds-viewport .mds-md-row-gap-2000 {
    row-gap: 80px;
  }
  .mds .mds-md-gap-2400,
  .mds .mds-container .mds-md-gap-2400,
  .mds .mds-viewport .mds-md-gap-2400 {
    gap: 96px;
  }
  .mds .mds-md-col-gap-2400,
  .mds .mds-container .mds-md-col-gap-2400,
  .mds .mds-viewport .mds-md-col-gap-2400 {
    column-gap: 96px;
  }
  .mds .mds-md-row-gap-2400,
  .mds .mds-container .mds-md-row-gap-2400,
  .mds .mds-viewport .mds-md-row-gap-2400 {
    row-gap: 96px;
  }
  .mds .mds-md-gap-2800,
  .mds .mds-container .mds-md-gap-2800,
  .mds .mds-viewport .mds-md-gap-2800 {
    gap: 112px;
  }
  .mds .mds-md-col-gap-2800,
  .mds .mds-container .mds-md-col-gap-2800,
  .mds .mds-viewport .mds-md-col-gap-2800 {
    column-gap: 112px;
  }
  .mds .mds-md-row-gap-2800,
  .mds .mds-container .mds-md-row-gap-2800,
  .mds .mds-viewport .mds-md-row-gap-2800 {
    row-gap: 112px;
  }
  .mds .mds-md-gap-3200,
  .mds .mds-container .mds-md-gap-3200,
  .mds .mds-viewport .mds-md-gap-3200 {
    gap: 128px;
  }
  .mds .mds-md-col-gap-3200,
  .mds .mds-container .mds-md-col-gap-3200,
  .mds .mds-viewport .mds-md-col-gap-3200 {
    column-gap: 128px;
  }
  .mds .mds-md-row-gap-3200,
  .mds .mds-container .mds-md-row-gap-3200,
  .mds .mds-viewport .mds-md-row-gap-3200 {
    row-gap: 128px;
  }
}@container (min-width: 1441px) {
  .mds .mds-lg-gap-50,
  .mds .mds-container .mds-lg-gap-50,
  .mds .mds-viewport .mds-lg-gap-50 {
    gap: 2px;
  }
  .mds .mds-lg-col-gap-50,
  .mds .mds-container .mds-lg-col-gap-50,
  .mds .mds-viewport .mds-lg-col-gap-50 {
    column-gap: 2px;
  }
  .mds .mds-lg-row-gap-50,
  .mds .mds-container .mds-lg-row-gap-50,
  .mds .mds-viewport .mds-lg-row-gap-50 {
    row-gap: 2px;
  }
  .mds .mds-lg-gap-100,
  .mds .mds-container .mds-lg-gap-100,
  .mds .mds-viewport .mds-lg-gap-100 {
    gap: 4px;
  }
  .mds .mds-lg-col-gap-100,
  .mds .mds-container .mds-lg-col-gap-100,
  .mds .mds-viewport .mds-lg-col-gap-100 {
    column-gap: 4px;
  }
  .mds .mds-lg-row-gap-100,
  .mds .mds-container .mds-lg-row-gap-100,
  .mds .mds-viewport .mds-lg-row-gap-100 {
    row-gap: 4px;
  }
  .mds .mds-lg-gap-150,
  .mds .mds-container .mds-lg-gap-150,
  .mds .mds-viewport .mds-lg-gap-150 {
    gap: 6px;
  }
  .mds .mds-lg-col-gap-150,
  .mds .mds-container .mds-lg-col-gap-150,
  .mds .mds-viewport .mds-lg-col-gap-150 {
    column-gap: 6px;
  }
  .mds .mds-lg-row-gap-150,
  .mds .mds-container .mds-lg-row-gap-150,
  .mds .mds-viewport .mds-lg-row-gap-150 {
    row-gap: 6px;
  }
  .mds .mds-lg-gap-200,
  .mds .mds-container .mds-lg-gap-200,
  .mds .mds-viewport .mds-lg-gap-200 {
    gap: 8px;
  }
  .mds .mds-lg-col-gap-200,
  .mds .mds-container .mds-lg-col-gap-200,
  .mds .mds-viewport .mds-lg-col-gap-200 {
    column-gap: 8px;
  }
  .mds .mds-lg-row-gap-200,
  .mds .mds-container .mds-lg-row-gap-200,
  .mds .mds-viewport .mds-lg-row-gap-200 {
    row-gap: 8px;
  }
  .mds .mds-lg-gap-300,
  .mds .mds-container .mds-lg-gap-300,
  .mds .mds-viewport .mds-lg-gap-300 {
    gap: 12px;
  }
  .mds .mds-lg-col-gap-300,
  .mds .mds-container .mds-lg-col-gap-300,
  .mds .mds-viewport .mds-lg-col-gap-300 {
    column-gap: 12px;
  }
  .mds .mds-lg-row-gap-300,
  .mds .mds-container .mds-lg-row-gap-300,
  .mds .mds-viewport .mds-lg-row-gap-300 {
    row-gap: 12px;
  }
  .mds .mds-lg-gap-400,
  .mds .mds-container .mds-lg-gap-400,
  .mds .mds-viewport .mds-lg-gap-400 {
    gap: 16px;
  }
  .mds .mds-lg-col-gap-400,
  .mds .mds-container .mds-lg-col-gap-400,
  .mds .mds-viewport .mds-lg-col-gap-400 {
    column-gap: 16px;
  }
  .mds .mds-lg-row-gap-400,
  .mds .mds-container .mds-lg-row-gap-400,
  .mds .mds-viewport .mds-lg-row-gap-400 {
    row-gap: 16px;
  }
  .mds .mds-lg-gap-500,
  .mds .mds-container .mds-lg-gap-500,
  .mds .mds-viewport .mds-lg-gap-500 {
    gap: 20px;
  }
  .mds .mds-lg-col-gap-500,
  .mds .mds-container .mds-lg-col-gap-500,
  .mds .mds-viewport .mds-lg-col-gap-500 {
    column-gap: 20px;
  }
  .mds .mds-lg-row-gap-500,
  .mds .mds-container .mds-lg-row-gap-500,
  .mds .mds-viewport .mds-lg-row-gap-500 {
    row-gap: 20px;
  }
  .mds .mds-lg-gap-600,
  .mds .mds-container .mds-lg-gap-600,
  .mds .mds-viewport .mds-lg-gap-600 {
    gap: 24px;
  }
  .mds .mds-lg-col-gap-600,
  .mds .mds-container .mds-lg-col-gap-600,
  .mds .mds-viewport .mds-lg-col-gap-600 {
    column-gap: 24px;
  }
  .mds .mds-lg-row-gap-600,
  .mds .mds-container .mds-lg-row-gap-600,
  .mds .mds-viewport .mds-lg-row-gap-600 {
    row-gap: 24px;
  }
  .mds .mds-lg-gap-700,
  .mds .mds-container .mds-lg-gap-700,
  .mds .mds-viewport .mds-lg-gap-700 {
    gap: 28px;
  }
  .mds .mds-lg-col-gap-700,
  .mds .mds-container .mds-lg-col-gap-700,
  .mds .mds-viewport .mds-lg-col-gap-700 {
    column-gap: 28px;
  }
  .mds .mds-lg-row-gap-700,
  .mds .mds-container .mds-lg-row-gap-700,
  .mds .mds-viewport .mds-lg-row-gap-700 {
    row-gap: 28px;
  }
  .mds .mds-lg-gap-800,
  .mds .mds-container .mds-lg-gap-800,
  .mds .mds-viewport .mds-lg-gap-800 {
    gap: 32px;
  }
  .mds .mds-lg-col-gap-800,
  .mds .mds-container .mds-lg-col-gap-800,
  .mds .mds-viewport .mds-lg-col-gap-800 {
    column-gap: 32px;
  }
  .mds .mds-lg-row-gap-800,
  .mds .mds-container .mds-lg-row-gap-800,
  .mds .mds-viewport .mds-lg-row-gap-800 {
    row-gap: 32px;
  }
  .mds .mds-lg-gap-900,
  .mds .mds-container .mds-lg-gap-900,
  .mds .mds-viewport .mds-lg-gap-900 {
    gap: 36px;
  }
  .mds .mds-lg-col-gap-900,
  .mds .mds-container .mds-lg-col-gap-900,
  .mds .mds-viewport .mds-lg-col-gap-900 {
    column-gap: 36px;
  }
  .mds .mds-lg-row-gap-900,
  .mds .mds-container .mds-lg-row-gap-900,
  .mds .mds-viewport .mds-lg-row-gap-900 {
    row-gap: 36px;
  }
  .mds .mds-lg-gap-1000,
  .mds .mds-container .mds-lg-gap-1000,
  .mds .mds-viewport .mds-lg-gap-1000 {
    gap: 40px;
  }
  .mds .mds-lg-col-gap-1000,
  .mds .mds-container .mds-lg-col-gap-1000,
  .mds .mds-viewport .mds-lg-col-gap-1000 {
    column-gap: 40px;
  }
  .mds .mds-lg-row-gap-1000,
  .mds .mds-container .mds-lg-row-gap-1000,
  .mds .mds-viewport .mds-lg-row-gap-1000 {
    row-gap: 40px;
  }
  .mds .mds-lg-gap-1200,
  .mds .mds-container .mds-lg-gap-1200,
  .mds .mds-viewport .mds-lg-gap-1200 {
    gap: 48px;
  }
  .mds .mds-lg-col-gap-1200,
  .mds .mds-container .mds-lg-col-gap-1200,
  .mds .mds-viewport .mds-lg-col-gap-1200 {
    column-gap: 48px;
  }
  .mds .mds-lg-row-gap-1200,
  .mds .mds-container .mds-lg-row-gap-1200,
  .mds .mds-viewport .mds-lg-row-gap-1200 {
    row-gap: 48px;
  }
  .mds .mds-lg-gap-1600,
  .mds .mds-container .mds-lg-gap-1600,
  .mds .mds-viewport .mds-lg-gap-1600 {
    gap: 64px;
  }
  .mds .mds-lg-col-gap-1600,
  .mds .mds-container .mds-lg-col-gap-1600,
  .mds .mds-viewport .mds-lg-col-gap-1600 {
    column-gap: 64px;
  }
  .mds .mds-lg-row-gap-1600,
  .mds .mds-container .mds-lg-row-gap-1600,
  .mds .mds-viewport .mds-lg-row-gap-1600 {
    row-gap: 64px;
  }
  .mds .mds-lg-gap-2000,
  .mds .mds-container .mds-lg-gap-2000,
  .mds .mds-viewport .mds-lg-gap-2000 {
    gap: 80px;
  }
  .mds .mds-lg-col-gap-2000,
  .mds .mds-container .mds-lg-col-gap-2000,
  .mds .mds-viewport .mds-lg-col-gap-2000 {
    column-gap: 80px;
  }
  .mds .mds-lg-row-gap-2000,
  .mds .mds-container .mds-lg-row-gap-2000,
  .mds .mds-viewport .mds-lg-row-gap-2000 {
    row-gap: 80px;
  }
  .mds .mds-lg-gap-2400,
  .mds .mds-container .mds-lg-gap-2400,
  .mds .mds-viewport .mds-lg-gap-2400 {
    gap: 96px;
  }
  .mds .mds-lg-col-gap-2400,
  .mds .mds-container .mds-lg-col-gap-2400,
  .mds .mds-viewport .mds-lg-col-gap-2400 {
    column-gap: 96px;
  }
  .mds .mds-lg-row-gap-2400,
  .mds .mds-container .mds-lg-row-gap-2400,
  .mds .mds-viewport .mds-lg-row-gap-2400 {
    row-gap: 96px;
  }
  .mds .mds-lg-gap-2800,
  .mds .mds-container .mds-lg-gap-2800,
  .mds .mds-viewport .mds-lg-gap-2800 {
    gap: 112px;
  }
  .mds .mds-lg-col-gap-2800,
  .mds .mds-container .mds-lg-col-gap-2800,
  .mds .mds-viewport .mds-lg-col-gap-2800 {
    column-gap: 112px;
  }
  .mds .mds-lg-row-gap-2800,
  .mds .mds-container .mds-lg-row-gap-2800,
  .mds .mds-viewport .mds-lg-row-gap-2800 {
    row-gap: 112px;
  }
  .mds .mds-lg-gap-3200,
  .mds .mds-container .mds-lg-gap-3200,
  .mds .mds-viewport .mds-lg-gap-3200 {
    gap: 128px;
  }
  .mds .mds-lg-col-gap-3200,
  .mds .mds-container .mds-lg-col-gap-3200,
  .mds .mds-viewport .mds-lg-col-gap-3200 {
    column-gap: 128px;
  }
  .mds .mds-lg-row-gap-3200,
  .mds .mds-container .mds-lg-row-gap-3200,
  .mds .mds-viewport .mds-lg-row-gap-3200 {
    row-gap: 128px;
  }
}@container (min-width: 1921px) {
  .mds .mds-xl-gap-50,
  .mds .mds-container .mds-xl-gap-50,
  .mds .mds-viewport .mds-xl-gap-50 {
    gap: 2px;
  }
  .mds .mds-xl-col-gap-50,
  .mds .mds-container .mds-xl-col-gap-50,
  .mds .mds-viewport .mds-xl-col-gap-50 {
    column-gap: 2px;
  }
  .mds .mds-xl-row-gap-50,
  .mds .mds-container .mds-xl-row-gap-50,
  .mds .mds-viewport .mds-xl-row-gap-50 {
    row-gap: 2px;
  }
  .mds .mds-xl-gap-100,
  .mds .mds-container .mds-xl-gap-100,
  .mds .mds-viewport .mds-xl-gap-100 {
    gap: 4px;
  }
  .mds .mds-xl-col-gap-100,
  .mds .mds-container .mds-xl-col-gap-100,
  .mds .mds-viewport .mds-xl-col-gap-100 {
    column-gap: 4px;
  }
  .mds .mds-xl-row-gap-100,
  .mds .mds-container .mds-xl-row-gap-100,
  .mds .mds-viewport .mds-xl-row-gap-100 {
    row-gap: 4px;
  }
  .mds .mds-xl-gap-150,
  .mds .mds-container .mds-xl-gap-150,
  .mds .mds-viewport .mds-xl-gap-150 {
    gap: 6px;
  }
  .mds .mds-xl-col-gap-150,
  .mds .mds-container .mds-xl-col-gap-150,
  .mds .mds-viewport .mds-xl-col-gap-150 {
    column-gap: 6px;
  }
  .mds .mds-xl-row-gap-150,
  .mds .mds-container .mds-xl-row-gap-150,
  .mds .mds-viewport .mds-xl-row-gap-150 {
    row-gap: 6px;
  }
  .mds .mds-xl-gap-200,
  .mds .mds-container .mds-xl-gap-200,
  .mds .mds-viewport .mds-xl-gap-200 {
    gap: 8px;
  }
  .mds .mds-xl-col-gap-200,
  .mds .mds-container .mds-xl-col-gap-200,
  .mds .mds-viewport .mds-xl-col-gap-200 {
    column-gap: 8px;
  }
  .mds .mds-xl-row-gap-200,
  .mds .mds-container .mds-xl-row-gap-200,
  .mds .mds-viewport .mds-xl-row-gap-200 {
    row-gap: 8px;
  }
  .mds .mds-xl-gap-300,
  .mds .mds-container .mds-xl-gap-300,
  .mds .mds-viewport .mds-xl-gap-300 {
    gap: 12px;
  }
  .mds .mds-xl-col-gap-300,
  .mds .mds-container .mds-xl-col-gap-300,
  .mds .mds-viewport .mds-xl-col-gap-300 {
    column-gap: 12px;
  }
  .mds .mds-xl-row-gap-300,
  .mds .mds-container .mds-xl-row-gap-300,
  .mds .mds-viewport .mds-xl-row-gap-300 {
    row-gap: 12px;
  }
  .mds .mds-xl-gap-400,
  .mds .mds-container .mds-xl-gap-400,
  .mds .mds-viewport .mds-xl-gap-400 {
    gap: 16px;
  }
  .mds .mds-xl-col-gap-400,
  .mds .mds-container .mds-xl-col-gap-400,
  .mds .mds-viewport .mds-xl-col-gap-400 {
    column-gap: 16px;
  }
  .mds .mds-xl-row-gap-400,
  .mds .mds-container .mds-xl-row-gap-400,
  .mds .mds-viewport .mds-xl-row-gap-400 {
    row-gap: 16px;
  }
  .mds .mds-xl-gap-500,
  .mds .mds-container .mds-xl-gap-500,
  .mds .mds-viewport .mds-xl-gap-500 {
    gap: 20px;
  }
  .mds .mds-xl-col-gap-500,
  .mds .mds-container .mds-xl-col-gap-500,
  .mds .mds-viewport .mds-xl-col-gap-500 {
    column-gap: 20px;
  }
  .mds .mds-xl-row-gap-500,
  .mds .mds-container .mds-xl-row-gap-500,
  .mds .mds-viewport .mds-xl-row-gap-500 {
    row-gap: 20px;
  }
  .mds .mds-xl-gap-600,
  .mds .mds-container .mds-xl-gap-600,
  .mds .mds-viewport .mds-xl-gap-600 {
    gap: 24px;
  }
  .mds .mds-xl-col-gap-600,
  .mds .mds-container .mds-xl-col-gap-600,
  .mds .mds-viewport .mds-xl-col-gap-600 {
    column-gap: 24px;
  }
  .mds .mds-xl-row-gap-600,
  .mds .mds-container .mds-xl-row-gap-600,
  .mds .mds-viewport .mds-xl-row-gap-600 {
    row-gap: 24px;
  }
  .mds .mds-xl-gap-700,
  .mds .mds-container .mds-xl-gap-700,
  .mds .mds-viewport .mds-xl-gap-700 {
    gap: 28px;
  }
  .mds .mds-xl-col-gap-700,
  .mds .mds-container .mds-xl-col-gap-700,
  .mds .mds-viewport .mds-xl-col-gap-700 {
    column-gap: 28px;
  }
  .mds .mds-xl-row-gap-700,
  .mds .mds-container .mds-xl-row-gap-700,
  .mds .mds-viewport .mds-xl-row-gap-700 {
    row-gap: 28px;
  }
  .mds .mds-xl-gap-800,
  .mds .mds-container .mds-xl-gap-800,
  .mds .mds-viewport .mds-xl-gap-800 {
    gap: 32px;
  }
  .mds .mds-xl-col-gap-800,
  .mds .mds-container .mds-xl-col-gap-800,
  .mds .mds-viewport .mds-xl-col-gap-800 {
    column-gap: 32px;
  }
  .mds .mds-xl-row-gap-800,
  .mds .mds-container .mds-xl-row-gap-800,
  .mds .mds-viewport .mds-xl-row-gap-800 {
    row-gap: 32px;
  }
  .mds .mds-xl-gap-900,
  .mds .mds-container .mds-xl-gap-900,
  .mds .mds-viewport .mds-xl-gap-900 {
    gap: 36px;
  }
  .mds .mds-xl-col-gap-900,
  .mds .mds-container .mds-xl-col-gap-900,
  .mds .mds-viewport .mds-xl-col-gap-900 {
    column-gap: 36px;
  }
  .mds .mds-xl-row-gap-900,
  .mds .mds-container .mds-xl-row-gap-900,
  .mds .mds-viewport .mds-xl-row-gap-900 {
    row-gap: 36px;
  }
  .mds .mds-xl-gap-1000,
  .mds .mds-container .mds-xl-gap-1000,
  .mds .mds-viewport .mds-xl-gap-1000 {
    gap: 40px;
  }
  .mds .mds-xl-col-gap-1000,
  .mds .mds-container .mds-xl-col-gap-1000,
  .mds .mds-viewport .mds-xl-col-gap-1000 {
    column-gap: 40px;
  }
  .mds .mds-xl-row-gap-1000,
  .mds .mds-container .mds-xl-row-gap-1000,
  .mds .mds-viewport .mds-xl-row-gap-1000 {
    row-gap: 40px;
  }
  .mds .mds-xl-gap-1200,
  .mds .mds-container .mds-xl-gap-1200,
  .mds .mds-viewport .mds-xl-gap-1200 {
    gap: 48px;
  }
  .mds .mds-xl-col-gap-1200,
  .mds .mds-container .mds-xl-col-gap-1200,
  .mds .mds-viewport .mds-xl-col-gap-1200 {
    column-gap: 48px;
  }
  .mds .mds-xl-row-gap-1200,
  .mds .mds-container .mds-xl-row-gap-1200,
  .mds .mds-viewport .mds-xl-row-gap-1200 {
    row-gap: 48px;
  }
  .mds .mds-xl-gap-1600,
  .mds .mds-container .mds-xl-gap-1600,
  .mds .mds-viewport .mds-xl-gap-1600 {
    gap: 64px;
  }
  .mds .mds-xl-col-gap-1600,
  .mds .mds-container .mds-xl-col-gap-1600,
  .mds .mds-viewport .mds-xl-col-gap-1600 {
    column-gap: 64px;
  }
  .mds .mds-xl-row-gap-1600,
  .mds .mds-container .mds-xl-row-gap-1600,
  .mds .mds-viewport .mds-xl-row-gap-1600 {
    row-gap: 64px;
  }
  .mds .mds-xl-gap-2000,
  .mds .mds-container .mds-xl-gap-2000,
  .mds .mds-viewport .mds-xl-gap-2000 {
    gap: 80px;
  }
  .mds .mds-xl-col-gap-2000,
  .mds .mds-container .mds-xl-col-gap-2000,
  .mds .mds-viewport .mds-xl-col-gap-2000 {
    column-gap: 80px;
  }
  .mds .mds-xl-row-gap-2000,
  .mds .mds-container .mds-xl-row-gap-2000,
  .mds .mds-viewport .mds-xl-row-gap-2000 {
    row-gap: 80px;
  }
  .mds .mds-xl-gap-2400,
  .mds .mds-container .mds-xl-gap-2400,
  .mds .mds-viewport .mds-xl-gap-2400 {
    gap: 96px;
  }
  .mds .mds-xl-col-gap-2400,
  .mds .mds-container .mds-xl-col-gap-2400,
  .mds .mds-viewport .mds-xl-col-gap-2400 {
    column-gap: 96px;
  }
  .mds .mds-xl-row-gap-2400,
  .mds .mds-container .mds-xl-row-gap-2400,
  .mds .mds-viewport .mds-xl-row-gap-2400 {
    row-gap: 96px;
  }
  .mds .mds-xl-gap-2800,
  .mds .mds-container .mds-xl-gap-2800,
  .mds .mds-viewport .mds-xl-gap-2800 {
    gap: 112px;
  }
  .mds .mds-xl-col-gap-2800,
  .mds .mds-container .mds-xl-col-gap-2800,
  .mds .mds-viewport .mds-xl-col-gap-2800 {
    column-gap: 112px;
  }
  .mds .mds-xl-row-gap-2800,
  .mds .mds-container .mds-xl-row-gap-2800,
  .mds .mds-viewport .mds-xl-row-gap-2800 {
    row-gap: 112px;
  }
  .mds .mds-xl-gap-3200,
  .mds .mds-container .mds-xl-gap-3200,
  .mds .mds-viewport .mds-xl-gap-3200 {
    gap: 128px;
  }
  .mds .mds-xl-col-gap-3200,
  .mds .mds-container .mds-xl-col-gap-3200,
  .mds .mds-viewport .mds-xl-col-gap-3200 {
    column-gap: 128px;
  }
  .mds .mds-xl-row-gap-3200,
  .mds .mds-container .mds-xl-row-gap-3200,
  .mds .mds-viewport .mds-xl-row-gap-3200 {
    row-gap: 128px;
  }
}.mds-content {
  /*
  @description: 
  Default styling for body text, headings, lists, paragraphs, strong, em tag and horizontal rule when using the mds css class. 
  - By placing "mds" on a parent element, you will get Maersk styled text without any paddings or margins.
  - By placing "mds-content" on a parent element, you will get Maersk styled text with paddings and margins.

  @basicExample:
  <div class="mds">
    <article class="mds-content">
      <h1>Heading 1</h1>
    </article>
  </div>

  @advancedExample:
  <div class="mds">
    <p>This paragraph has no paddings or margins, as it's not wrapped with "mds-content" class</p>
    <article class="mds-content">
      <h1>Heading 1</h1>
      <p>This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>    
    </article>
  </div>
  */
}.mds-content h1 {
  margin: var(--mds_foundations_typography_heading-1_margin-top) 0 var(--mds_foundations_typography_heading-1_margin-bottom);
}.mds-content h2 {
  margin: var(--mds_foundations_typography_heading-2_margin-top) 0 var(--mds_foundations_typography_heading-2_margin-bottom);
}.mds-content h3 {
  margin: var(--mds_foundations_typography_heading-3_margin-top) 0 var(--mds_foundations_typography_heading-3_margin-bottom);
}.mds-content h4 {
  margin: var(--mds_foundations_typography_heading-4_margin-top) 0 var(--mds_foundations_typography_heading-4_margin-bottom);
}.mds-content h5,
.mds-content h6 {
  margin: var(--mds_foundations_typography_heading-4_margin-top) 0 var(--mds_foundations_typography_heading-4_margin-bottom);
}.mds-content p {
  margin: var(--mds_foundations_typography_paragraph_margin-top) 0 var(--mds_foundations_typography_paragraph_margin-bottom);
  padding: 0;
}.mds-content hr {
  margin: var(--mds_foundations_horizontal-rule_margin-top) 0 var(--mds_foundations_horizontal-rule_margin-bottom) 0;
}.mds-content ul,
.mds-content ol {
  margin: var(--mds_foundations_list_margin-top) var(--mds_foundations_list_margin-bottom);
  padding: 0 0 0 var(--mds_foundations_list_vertical_padding-left);
}.mds-content ul li,
.mds-content ol li {
  padding-left: var(--mds_foundations_list_item_padding-left);
}body.mds {
  margin: 0;
  padding: 0;
}:root {  --mds_global_border_width: 1px;  --mds_global_border_style: solid;  --mds_global_breakpoint_xs_min-width: 0px;  --mds_global_breakpoint_xs_max-width: 640px;  --mds_global_breakpoint_sm_min-width: 641px;  --mds_global_breakpoint_sm_max-width: 1024px;  --mds_global_breakpoint_md_min-width: 1025px;  --mds_global_breakpoint_md_max-width: 1440px;  --mds_global_breakpoint_lg_min-width: 1441px;  --mds_global_breakpoint_lg_max-width: 1920px;  --mds_global_breakpoint_xl_min-width: 1921px;  --mds_global_link_inline_text-decoration: underline;  --mds_global_link_inline_hover_text-decoration: none;  --mds_global_link_stand-alone_text-decoration: none;  --mds_global_link_stand-alone_hover_text-decoration: underline;  --mds_global_transition_slow_duration: 0.75s;  --mds_global_transition_slow_timing: ease-in-out;  --mds_global_transition_medium_duration: 0.5s;  --mds_global_transition_medium_timing: ease-in-out;  --mds_global_transition_fast_duration: 0.2s;  --mds_global_transition_fast_timing: ease-in-out;  --mds_brand_border_x-small_radius: 2px;  --mds_brand_border_small_radius: 4px;  --mds_brand_border_medium_radius: 6px;  --mds_brand_border_large_radius: 8px;  --mds_brand_border_x-large_radius: 12px;  --mds_brand_border_2x-large_radius: 16px;  --mds_brand_typography_headline_font-family: Maersk Headline;  --mds_brand_typography_headline_x-small_font-style: normal;  --mds_brand_typography_headline_x-small_font-weight: 400;  --mds_brand_typography_headline_x-small_text-transform: none;  --mds_brand_typography_headline_x-small_desktop_font-size: 20px;  --mds_brand_typography_headline_x-small_desktop_line-height: 24px;  --mds_brand_typography_headline_x-small_mobile_font-size: 20px;  --mds_brand_typography_headline_x-small_mobile_line-height: 24px;  --mds_brand_typography_headline_small_font-style: normal;  --mds_brand_typography_headline_small_font-weight: 400;  --mds_brand_typography_headline_small_text-transform: none;  --mds_brand_typography_headline_small_desktop_font-size: 26px;  --mds_brand_typography_headline_small_desktop_line-height: 32px;  --mds_brand_typography_headline_small_mobile_font-size: 22px;  --mds_brand_typography_headline_small_mobile_line-height: 26px;  --mds_brand_typography_headline_medium_font-style: normal;  --mds_brand_typography_headline_medium_font-weight: 300;  --mds_brand_typography_headline_medium_text-transform: none;  --mds_brand_typography_headline_medium_desktop_font-size: 40px;  --mds_brand_typography_headline_medium_desktop_line-height: 40px;  --mds_brand_typography_headline_medium_mobile_font-size: 26px;  --mds_brand_typography_headline_medium_mobile_line-height: 32px;  --mds_brand_typography_headline_large_font-style: normal;  --mds_brand_typography_headline_large_font-weight: 300;  --mds_brand_typography_headline_large_text-transform: none;  --mds_brand_typography_headline_large_desktop_font-size: 50px;  --mds_brand_typography_headline_large_desktop_line-height: 56px;  --mds_brand_typography_headline_large_mobile_font-size: 38px;  --mds_brand_typography_headline_large_mobile_line-height: 38px;  --mds_brand_typography_headline_x-large_font-style: normal;  --mds_brand_typography_headline_x-large_font-weight: 300;  --mds_brand_typography_headline_x-large_text-transform: none;  --mds_brand_typography_headline_x-large_desktop_font-size: 80px;  --mds_brand_typography_headline_x-large_desktop_line-height: 80px;  --mds_brand_typography_headline_x-large_mobile_font-size: 56px;  --mds_brand_typography_headline_x-large_mobile_line-height: 56px;  --mds_brand_typography_text_font-family: Maersk Text;  --mds_brand_typography_text_x-small_desktop_font-size: 12px;  --mds_brand_typography_text_x-small_desktop_line-height: 16px;  --mds_brand_typography_text_x-small_mobile_font-size: 12px;  --mds_brand_typography_text_x-small_mobile_line-height: 16px;  --mds_brand_typography_text_x-small_normal_font-style: normal;  --mds_brand_typography_text_x-small_normal_font-weight: 400;  --mds_brand_typography_text_x-small_medium_font-style: normal;  --mds_brand_typography_text_x-small_medium_font-weight: 500;  --mds_brand_typography_text_x-small_bold_font-style: normal;  --mds_brand_typography_text_x-small_bold_font-weight: 700;  --mds_brand_typography_text_x-small_italic_font-style: italic;  --mds_brand_typography_text_x-small_italic_font-weight: 400;  --mds_brand_typography_text_x-small_mediumitalic_font-style: italic;  --mds_brand_typography_text_x-small_mediumitalic_font-weight: 500;  --mds_brand_typography_text_x-small_bolditalic_font-style: italic;  --mds_brand_typography_text_x-small_bolditalic_font-weight: 700;  --mds_brand_typography_text_small_desktop_font-size: 14px;  --mds_brand_typography_text_small_desktop_line-height: 20px;  --mds_brand_typography_text_small_mobile_font-size: 14px;  --mds_brand_typography_text_small_mobile_line-height: 20px;  --mds_brand_typography_text_small_normal_font-style: normal;  --mds_brand_typography_text_small_normal_font-weight: 400;  --mds_brand_typography_text_small_medium_font-style: normal;  --mds_brand_typography_text_small_medium_font-weight: 500;  --mds_brand_typography_text_small_bold_font-style: normal;  --mds_brand_typography_text_small_bold_font-weight: 700;  --mds_brand_typography_text_small_italic_font-style: italic;  --mds_brand_typography_text_small_italic_font-weight: 400;  --mds_brand_typography_text_small_mediumitalic_font-style: italic;  --mds_brand_typography_text_small_mediumitalic_font-weight: 500;  --mds_brand_typography_text_small_bolditalic_font-style: italic;  --mds_brand_typography_text_small_bolditalic_font-weight: 700;  --mds_brand_typography_text_medium_desktop_font-size: 16px;  --mds_brand_typography_text_medium_desktop_line-height: 24px;  --mds_brand_typography_text_medium_mobile_font-size: 16px;  --mds_brand_typography_text_medium_mobile_line-height: 24px;  --mds_brand_typography_text_medium_normal_font-style: normal;  --mds_brand_typography_text_medium_normal_font-weight: 400;  --mds_brand_typography_text_medium_medium_font-style: normal;  --mds_brand_typography_text_medium_medium_font-weight: 500;  --mds_brand_typography_text_medium_bold_font-style: normal;  --mds_brand_typography_text_medium_bold_font-weight: 700;  --mds_brand_typography_text_medium_italic_font-style: italic;  --mds_brand_typography_text_medium_italic_font-weight: 400;  --mds_brand_typography_text_medium_mediumitalic_font-style: italic;  --mds_brand_typography_text_medium_mediumitalic_font-weight: 500;  --mds_brand_typography_text_medium_bolditalic_font-style: italic;  --mds_brand_typography_text_medium_bolditalic_font-weight: 700;  --mds_brand_typography_text_large_desktop_font-size: 18px;  --mds_brand_typography_text_large_desktop_line-height: 28px;  --mds_brand_typography_text_large_mobile_font-size: 18px;  --mds_brand_typography_text_large_mobile_line-height: 28px;  --mds_brand_typography_text_large_normal_font-style: normal;  --mds_brand_typography_text_large_normal_font-weight: 400;  --mds_brand_typography_text_large_medium_font-style: normal;  --mds_brand_typography_text_large_medium_font-weight: 500;  --mds_brand_typography_text_large_bold_font-style: normal;  --mds_brand_typography_text_large_bold_font-weight: 700;  --mds_brand_typography_text_large_italic_font-style: italic;  --mds_brand_typography_text_large_italic_font-weight: 400;  --mds_brand_typography_text_large_mediumitalic_font-style: italic;  --mds_brand_typography_text_large_mediumitalic_font-weight: 500;  --mds_brand_typography_text_large_bolditalic_font-style: italic;  --mds_brand_typography_text_large_bolditalic_font-weight: 700;  --mds_brand_appearance_neutral_default_text-color: rgb(20,20,20);  --mds_brand_appearance_neutral_default_background-color: rgb(255,255,255);  --mds_brand_appearance_neutral_default_on-background-color: rgb(20,20,20);  --mds_brand_appearance_neutral_default_border-color: rgb(212,212,212);  --mds_brand_appearance_neutral_default_opacity_border-color: rgba(20,20,20,0.18);  --mds_brand_appearance_neutral_weakest_text-color: rgb(106,106,106);  --mds_brand_appearance_neutral_weakest_background-color: rgb(247,247,247);  --mds_brand_appearance_neutral_weakest_on-background-color: rgb(20, 20, 20);  --mds_brand_appearance_neutral_weak_text-color: rgb(76,76,76);  --mds_brand_appearance_neutral_weak_background-color: rgb(240,240,240);  --mds_brand_appearance_neutral_weak_on-background-color: rgb(20,20,20);  --mds_brand_appearance_neutral_weak_border-color: rgb(226,226,226);  --mds_brand_appearance_neutral_weak_opacity_background-color: rgba(20,20,20,0.06);  --mds_brand_appearance_neutral_strong_background-color: rgb(226,226,226);  --mds_brand_appearance_neutral_strong_on-background-color: rgb(20,20,20);  --mds_brand_appearance_neutral_strongest_background-color: rgb(179,179,179);  --mds_brand_appearance_neutral_strongest_on-background-color: rgb(20,20,20);  --mds_brand_appearance_neutral_inverse_text-color: rgb(255,255,255);  --mds_brand_appearance_neutral_inverse_background-color: rgb(20,20,20);  --mds_brand_appearance_neutral_inverse_on-background-color: rgb(255,255,255);  --mds_brand_appearance_neutral_inverse_border-color: rgb(255,255,255);  --mds_brand_appearance_primary_default_text-color: rgb(20,20,20);  --mds_brand_appearance_primary_default_background-color: rgb(20,20,20);  --mds_brand_appearance_primary_default_on-background-color: rgb(255,255,255);  --mds_brand_appearance_primary_default_border-color: rgb(20,20,20);  --mds_brand_appearance_primary_default_link-color: rgb(0, 119, 178);  --mds_brand_appearance_primary_weak_background-color: rgb(240,240,240);  --mds_brand_appearance_primary_weak_on-background-color: rgb(20,20,20);  --mds_brand_appearance_primary_weak_border-color: rgb(212,212,212);  --mds_brand_appearance_secondary_default_text-color: rgb(0, 119, 178);  --mds_brand_appearance_secondary_default_background-color: rgb(66,176,213);  --mds_brand_appearance_secondary_default_on-background-color: rgb(20,20,20);  --mds_brand_appearance_secondary_default_border-color: rgb(66,176,213);  --mds_brand_appearance_secondary_weak_background-color: rgb(226,243,249);  --mds_brand_appearance_secondary_weak_on-background-color: rgb(20,20,20);  --mds_brand_appearance_secondary_weak_border-color: rgb(158,215,234);  --mds_brand_appearance_success_default_text-color: rgb(50,133,41);  --mds_brand_appearance_success_default_background-color: rgb(64,171,53);  --mds_brand_appearance_success_default_on-background-color: rgb(20,20,20);  --mds_brand_appearance_success_default_border-color: rgb(64,171,53);  --mds_brand_appearance_success_weak_background-color: rgb(220,246,217);  --mds_brand_appearance_success_weak_on-background-color: rgb(19,51,16);  --mds_brand_appearance_success_weak_border-color: rgb(197,229,194);  --mds_brand_appearance_warning_default_text-color: rgb(128,104,20);  --mds_brand_appearance_warning_default_background-color: rgb(255,208,41);  --mds_brand_appearance_warning_default_on-background-color: rgb(20,20,20);  --mds_brand_appearance_warning_default_border-color: rgb(255,208,41);  --mds_brand_appearance_warning_weak_background-color: rgb(255,241,194);  --mds_brand_appearance_warning_weak_on-background-color: rgb(77,62,12);  --mds_brand_appearance_warning_weak_border-color: rgb(255,235,168);  --mds_brand_appearance_error_default_text-color: rgb(184,0,18);  --mds_brand_appearance_error_default_background-color: rgb(184,0,18);  --mds_brand_appearance_error_default_on-background-color: rgb(255,255,255);  --mds_brand_appearance_error_default_border-color: rgb(184,0,18);  --mds_brand_appearance_error_weak_background-color: rgb(252,221,224);  --mds_brand_appearance_error_weak_on-background-color: rgb(55,0,5);  --mds_brand_appearance_error_weak_border-color: rgb(233,178,183);  --mds_brand_appearance_info_default_text-color: rgb(0,89,134);  --mds_brand_appearance_info_default_background-color: rgb(0,89,134);  --mds_brand_appearance_info_default_on-background-color: rgb(255,255,255);  --mds_brand_appearance_info_default_border-color: rgb(0,89,134);  --mds_brand_appearance_info_weak_background-color: rgb(226,243,251);  --mds_brand_appearance_info_weak_on-background-color: rgb(0,36,61);  --mds_brand_appearance_info_weak_border-color: rgb(161,209,232);  --mds_brand_appearance_static_dark: rgb(20,20,20);  --mds_brand_appearance_static_light: rgb(255,255,255);  --mds_brand_appearance_static_brand: rgb(66,176,213);  --mds_brand_appearance_static_logo_url: url("data:image/svg+xml,<svg width='121' height='26' viewBox='0 0 121 26' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M107.844 18.7029V6.92578H110.649V11.6357L115.993 6.92578H119.791L113.417 12.3962L120.02 18.7029H116.088L110.649 13.3465V18.7029H107.844Z' fill='black' /><path fill-rule='evenodd' clip-rule='evenodd' d='M96.639 18.702H95.7023C94.4794 18.702 93.8906 17.9985 93.8906 16.9741V15.4361H96.639V16.3475H102.479V13.9369H95.7804C94.7111 13.9369 93.9406 13.2208 93.9406 12.228V8.73146C93.9406 7.67355 94.7792 6.92578 95.7986 6.92578H103.457C104.492 6.92578 105.208 7.69435 105.208 8.80651V10.2116H102.479V9.2803H96.639V11.6005H103.319C104.305 11.6005 105.208 12.2497 105.208 13.4993V16.8602C105.208 18.0058 104.57 18.702 103.376 18.702H96.639Z' fill='black' /><path fill-rule='evenodd' clip-rule='evenodd' d='M82.98 12.3214H88.9156V9.26885H82.98V12.3214ZM80.2109 18.6921V6.91406H89.6655C90.9284 6.91406 91.6625 7.64194 91.6625 8.88973V12.8456C91.6625 13.757 90.853 14.5789 89.2821 14.5789C89.193 14.5843 89.1031 14.5789 89.0095 14.5789L91.7615 18.6921H88.7242L86.1148 14.6648H82.9793V18.6921H80.2109Z' fill='black' /><path fill-rule='evenodd' clip-rule='evenodd' d='M66.6953 18.6912V6.91406H77.9933V9.26858H69.4237V11.6077H76.7713V13.9062H69.4237V16.3358H78.0142V18.6912H66.6953Z' fill='black' /><path fill-rule='evenodd' clip-rule='evenodd' d='M60.4729 14.1301L58.3006 9.13803L56.1782 14.1301H60.4729ZM54.2334 18.6912H51.1797L56.4294 6.91406H60.1881L65.4751 18.6912H62.4604L61.4201 16.3448H55.2419L54.2334 18.6912Z' fill='black' /><path fill-rule='evenodd' clip-rule='evenodd' d='M35.9375 18.6912V6.91406H39.0857L43.0761 15.7146L47.0075 6.91406H50.0239V18.6912H47.4272V11.8401L44.4308 18.6912H41.6633L38.6287 11.8772V18.6912H35.9375Z' fill='black' /><path fill-rule='evenodd' clip-rule='evenodd' d='M24.0975 22.8161C24.0975 24.4177 22.7995 25.7156 21.1988 25.7156H2.89951C1.29794 25.7156 0 24.4177 0 22.8161V3.1855C0 1.58395 1.29794 0.285156 2.89951 0.285156H21.1988C22.7995 0.285156 24.0975 1.58395 24.0975 3.1855V22.8161Z' fill='%2342B0D5' /><path fill-rule='evenodd' clip-rule='evenodd' d='M15.8302 12.6624L20.51 6.68381L20.4956 6.66484L13.7327 9.98225L12.0619 2.52734H12.0382L10.3682 9.98225L3.60525 6.66484L3.59002 6.68381L8.27074 12.6624L1.50781 15.9807L1.51289 16.004H9.01898L7.34899 23.4597L7.37015 23.4701L12.05 17.4915L16.7299 23.4701L16.7511 23.4589L15.0819 16.004H22.588L22.5931 15.9807L15.8302 12.6624Z' fill='white' /></svg>");  --mds_brand_appearance_static_logo_width: 121px;  --mds_brand_appearance_static_logo-short_url: url("data:image/svg+xml,<svg width='25' height='26' viewBox='0 0 25 26' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M24.6371 23.0356C24.6371 24.673 23.3101 26 21.6736 26H2.96444C1.32701 26 0 24.673 0 23.0356V2.9653C0 1.32788 1.32701 0 2.96444 0H21.6736C23.3101 0 24.6371 1.32788 24.6371 2.9653V23.0356Z' fill='%2342B0D5'/><path fill-rule='evenodd' clip-rule='evenodd' d='M16.1836 12.656L20.9683 6.5435L20.9536 6.5241L14.0392 9.91581L12.331 2.29395H12.3067L10.5993 9.91581L3.68494 6.5241L3.66936 6.5435L8.45492 12.656L1.54053 16.0486L1.54572 16.0724H9.21992L7.51252 23.6951L7.53415 23.7057L12.3188 17.5932L17.1035 23.7057L17.1252 23.6942L15.4186 16.0724H23.0928L23.098 16.0486L16.1836 12.656Z' fill='white'/></svg>");  --mds_brand_appearance_static_logo-short_width: 25px;  --mds_brand_appearance_opacity_default_10: rgba(255, 255, 255, 0.1);  --mds_brand_appearance_opacity_default_30: rgba(255, 255, 255, 0.3);  --mds_brand_appearance_opacity_default_50: rgba(255, 255, 255, 0.5);  --mds_brand_appearance_opacity_default_70: rgba(255, 255, 255, 0.7);  --mds_brand_appearance_opacity_default_90: rgba(255, 255, 255, 0.9);  --mds_brand_appearance_opacity_inverse_10: rgba(20, 20, 20, 0.1);  --mds_brand_appearance_opacity_inverse_30: rgba(20, 20, 20, 0.3);  --mds_brand_appearance_opacity_inverse_50: rgba(20, 20, 20, 0.5);  --mds_brand_appearance_opacity_inverse_70: rgba(20, 20, 20, 0.7);  --mds_brand_appearance_opacity_inverse_90: rgba(20, 20, 20, 0.9);  --mds_brand_appearance_shadow_low_first-layer_color: rgba(0, 0, 0, 0.04);  --mds_brand_appearance_shadow_low_first-layer_offset-x: 0px;  --mds_brand_appearance_shadow_low_first-layer_offset-y: 3px;  --mds_brand_appearance_shadow_low_first-layer_blur-radius: 5px;  --mds_brand_appearance_shadow_low_first-layer_spread-radius: -1px;  --mds_brand_appearance_shadow_low_second-layer_color: rgba(0, 0, 0, 0.03);  --mds_brand_appearance_shadow_low_second-layer_offset-x: 0px;  --mds_brand_appearance_shadow_low_second-layer_offset-y: 1px;  --mds_brand_appearance_shadow_low_second-layer_blur-radius: 18px;  --mds_brand_appearance_shadow_low_second-layer_spread-radius: 0px;  --mds_brand_appearance_shadow_low_third-layer_color: rgba(0, 0, 0, 0.03);  --mds_brand_appearance_shadow_low_third-layer_offset-x: 0px;  --mds_brand_appearance_shadow_low_third-layer_offset-y: 6px;  --mds_brand_appearance_shadow_low_third-layer_blur-radius: 10px;  --mds_brand_appearance_shadow_low_third-layer_spread-radius: 0px;  --mds_brand_appearance_shadow_medium_first-layer_color: rgba(0, 0, 0, 0.04);  --mds_brand_appearance_shadow_medium_first-layer_offset-x: 0px;  --mds_brand_appearance_shadow_medium_first-layer_offset-y: 3px;  --mds_brand_appearance_shadow_medium_first-layer_blur-radius: 5px;  --mds_brand_appearance_shadow_medium_first-layer_spread-radius: -1px;  --mds_brand_appearance_shadow_medium_second-layer_color: rgba(0, 0, 0, 0.03);  --mds_brand_appearance_shadow_medium_second-layer_offset-x: 0px;  --mds_brand_appearance_shadow_medium_second-layer_offset-y: 1px;  --mds_brand_appearance_shadow_medium_second-layer_blur-radius: 18px;  --mds_brand_appearance_shadow_medium_second-layer_spread-radius: 2px;  --mds_brand_appearance_shadow_medium_third-layer_color: rgba(0, 0, 0, 0.03);  --mds_brand_appearance_shadow_medium_third-layer_offset-x: 0px;  --mds_brand_appearance_shadow_medium_third-layer_offset-y: 6px;  --mds_brand_appearance_shadow_medium_third-layer_blur-radius: 10px;  --mds_brand_appearance_shadow_medium_third-layer_spread-radius: 4px;  --mds_brand_appearance_shadow_high_first-layer_color: rgba(0, 0, 0, 0.04);  --mds_brand_appearance_shadow_high_first-layer_offset-x: 0px;  --mds_brand_appearance_shadow_high_first-layer_offset-y: 3px;  --mds_brand_appearance_shadow_high_first-layer_blur-radius: 5px;  --mds_brand_appearance_shadow_high_first-layer_spread-radius: -1px;  --mds_brand_appearance_shadow_high_second-layer_color: rgba(0, 0, 0, 0.03);  --mds_brand_appearance_shadow_high_second-layer_offset-x: 0px;  --mds_brand_appearance_shadow_high_second-layer_offset-y: 1px;  --mds_brand_appearance_shadow_high_second-layer_blur-radius: 18px;  --mds_brand_appearance_shadow_high_second-layer_spread-radius: 4px;  --mds_brand_appearance_shadow_high_third-layer_color: rgba(0, 0, 0, 0.03);  --mds_brand_appearance_shadow_high_third-layer_offset-x: 0px;  --mds_brand_appearance_shadow_high_third-layer_offset-y: 6px;  --mds_brand_appearance_shadow_high_third-layer_blur-radius: 10px;  --mds_brand_appearance_shadow_high_third-layer_spread-radius: 8px;  --mds_brand_appearance_state_neutral_default_hover_background-color: rgb(240,240,240);  --mds_brand_appearance_state_neutral_default_hover_border-color: rgb(138,138,138);  --mds_brand_appearance_state_neutral_default_active_background-color: rgb(226,226,226);  --mds_brand_appearance_state_neutral_default_active_border-color: rgb(76,76,76);  --mds_brand_appearance_state_neutral_weakest_opacity_hover_background-color: rgba(20,20,20,0.06);  --mds_brand_appearance_state_neutral_weakest_opacity_active_background-color: rgba(20,20,20,0.12);  --mds_brand_appearance_state_neutral_weak_opacity_hover_background-color: rgba(20,20,20,0.12);  --mds_brand_appearance_state_neutral_weak_opacity_active_background-color: rgba(20,20,20,0.18);  --mds_brand_appearance_state_neutral_strongest_hover_background-color: rgb(138,138,138);  --mds_brand_appearance_state_neutral_strongest_active_background-color: rgb(106,106,106);  --mds_brand_appearance_state_neutral_inverse_opacity_hover_background-color: rgba(255,255,255,0.12);  --mds_brand_appearance_state_neutral_inverse_opacity_active_background-color: rgba(255,255,255,0.2);  --mds_brand_appearance_state_primary_default_hover_background-color: rgb(54,54,54);  --mds_brand_appearance_state_primary_default_hover_border-color: rgb(54,54,54);  --mds_brand_appearance_state_primary_default_active_background-color: rgb(76,76,76);  --mds_brand_appearance_state_primary_default_active_border-color: rgb(76,76,76);  --mds_brand_appearance_state_primary_weakest_opacity_hover_background-color: rgba(20,20,20,0.06);  --mds_brand_appearance_state_primary_weakest_opacity_active_background-color: rgba(20,20,20,0.12);  --mds_brand_appearance_state_secondary_default_hover_background-color: rgb(96,189,220);  --mds_brand_appearance_state_secondary_default_active_background-color: rgb(120,200,226);  --mds_brand_appearance_state_secondary_weakest_opacity_hover_background-color: rgba(66,176,213,0.12);  --mds_brand_appearance_state_secondary_weakest_opacity_active_background-color: rgba(66,176,213,0.24);  --mds_brand_appearance_state_success_default_hover_background-color: rgb(58, 154, 48);  --mds_brand_appearance_state_success_default_active_background-color: rgb(50, 133, 41);  --mds_brand_appearance_state_warning_default_hover_background-color: rgb(230, 187, 37);  --mds_brand_appearance_state_warning_default_active_background-color: rgb(179, 146, 29);  --mds_brand_appearance_state_error_default_hover_background-color: rgb(166, 0, 16);  --mds_brand_appearance_state_error_default_active_background-color: rgb(129, 0, 13);  --mds_brand_appearance_state_error_weakest_opacity_hover_background-color: rgba(184, 0, 18, 0.06);  --mds_brand_appearance_state_error_weakest_opacity_active_background-color: rgba(184, 0, 18, 0.1);  --mds_brand_appearance_state_info_default_hover_background-color: rgb(0,62,98);  --mds_brand_appearance_state_info_default_active_background-color: rgb(0,36,61);  --mds_brand_appearance_state_focus_border-color: rgb(66,176,213);  --mds_brand_appearance_state_focus_default_shadow_offset-x: 0px;  --mds_brand_appearance_state_focus_default_shadow_offset-y: 0px;  --mds_brand_appearance_state_focus_default_shadow_blur-radius: 0px;  --mds_brand_appearance_state_focus_default_shadow_spread-radius: 3px;  --mds_brand_appearance_state_focus_default_shadow_color: rgb(209,236,245);  --mds_brand_appearance_state_focus_vanity_shadow_offset-x: 0px;  --mds_brand_appearance_state_focus_vanity_shadow_offset-y: 3px;  --mds_brand_appearance_state_focus_vanity_shadow_blur-radius: 0px;  --mds_brand_appearance_state_focus_vanity_shadow_spread-radius: 0px;  --mds_brand_appearance_state_focus_vanity_shadow_color: rgb(209,236,245);  --mds_brand_appearance_state_disabled_opacity: 0.5;  --mds_foundations_body_background-color: var(--mds_brand_appearance_neutral_default_background-color);  --mds_foundations_body_text-color: var(--mds_brand_appearance_neutral_default_text-color);  --mds_foundations_breadcrumb_item_text-color: var(--mds_brand_appearance_neutral_weak_text-color);  --mds_foundations_breadcrumb_item_padding: 6px;  --mds_foundations_breadcrumb_separator_text-color: var(--mds_brand_appearance_neutral_weakest_text-color);  --mds_foundations_breadcrumb_collapsed_padding: 3px;  --mds_foundations_breadcrumb_truncated_item_padding: 20px;  --mds_foundations_grid_xs_columns: 2;  --mds_foundations_grid_xs_column-gap: 16px;  --mds_foundations_grid_xs_row-gap: 16px;  --mds_foundations_grid_sm_columns: 6;  --mds_foundations_grid_sm_column-gap: 24px;  --mds_foundations_grid_sm_row-gap: 24px;  --mds_foundations_grid_md_columns: 12;  --mds_foundations_grid_md_column-gap: 24px;  --mds_foundations_grid_md_row-gap: 24px;  --mds_foundations_horizontal-rule_margin-top: 40px;  --mds_foundations_horizontal-rule_margin-bottom: 40px;  --mds_foundations_horizontal-rule_border-width: var(--mds_global_border_width);  --mds_foundations_horizontal-rule_border-style: var(--mds_global_border_style);  --mds_foundations_horizontal-rule_border-color: var(--mds_brand_appearance_neutral_default_border-color);  --mds_foundations_link_transition-properties: all;  --mds_foundations_link_transition-duration: var(--mds_global_transition_fast_duration);  --mds_foundations_link_transition-timing: var(--mds_global_transition_fast_timing);  --mds_foundations_link_focus_border-radius: var(--mds_brand_border_medium_radius);  --mds_foundations_link_inline_text-decoration: var(--mds_global_link_inline_text-decoration);  --mds_foundations_link_inline_hover_text-decoration: var(--mds_global_link_inline_hover_text-decoration);  --mds_foundations_link_stand-alone_text-decoration: var(--mds_global_link_stand-alone_text-decoration);  --mds_foundations_link_stand-alone_hover_text-decoration: var(--mds_global_link_stand-alone_hover_text-decoration);  --mds_foundations_link_external_icon_width: 20px;  --mds_foundations_link_external_icon_height: 20px;  --mds_foundations_link_default_text-color: var(--mds_brand_appearance_primary_default_link-color);  --mds_foundations_list_margin-top: 24px;  --mds_foundations_list_margin-bottom: 24px;  --mds_foundations_list_item_padding-left: 8px;  --mds_foundations_list_vertical_padding-left: 24px;  --mds_foundations_list_vertical_item_gap: 4px;  --mds_foundations_list_horizontal_item_gap: 40px;  --mds_foundations_list_unordered_list-style: outside circle;  --mds_foundations_list_ordered_list-style: outside decimal;  --mds_foundations_modal_background-color: var(--mds_brand_appearance_neutral_default_background-color);  --mds_foundations_modal_body_padding-top: 12px;  --mds_foundations_modal_body_padding-right: 24px;  --mds_foundations_modal_body_padding-left: 24px;  --mds_foundations_modal_body_padding-bottom: 24px;  --mds_foundations_modal_close_background-color: var(--mds_brand_appearance_opacity_default_50);  --mds_foundations_modal_close_hover_background-color: transparent;  --mds_foundations_modal_close_active_background-color: transparent;  --mds_foundations_modal_footer_background-color: var(--mds_brand_appearance_neutral_weakest_background-color);  --mds_foundations_modal_footer_gap: 12px;  --mds_foundations_modal_footer_padding-top: 12px;  --mds_foundations_modal_footer_padding-right: 24px;  --mds_foundations_modal_footer_padding-left: 24px;  --mds_foundations_modal_footer_padding-bottom: 12px;  --mds_foundations_modal_heading_padding-top: 20px;  --mds_foundations_modal_heading_padding-right: 24px;  --mds_foundations_modal_heading_padding-left: 24px;  --mds_foundations_modal_heading_padding-bottom: 12px;  --mds_foundations_modal_heading_title_margin-top: 4px;  --mds_foundations_modal_z-index: 9999;  --mds_foundations_slot_gap: 4px;  --mds_foundations_table_border-width: var(--mds_global_border_width);  --mds_foundations_table_border-radius: var(--mds_brand_border_large_radius);  --mds_foundations_table_border-style: var(--mds_global_border_style);  --mds_foundations_table_border-color: var(--mds_brand_appearance_neutral_default_border-color);  --mds_foundations_table_row-selector_margin-top: -3px;  --mds_foundations_table_row-expander_margin-top: -3px;  --mds_foundations_table_row-expander-trigger_transition-duration: 350ms;  --mds_foundations_table_cell_background-color: var(--mds_brand_appearance_neutral_default_background-color);  --mds_foundations_table_cell_text-color: var(--mds_brand_appearance_neutral_default_on-background-color);  --mds_foundations_table_cell_hover_background-color: var(--mds_brand_appearance_state_neutral_default_hover_background-color);  --mds_foundations_table_cell_hover_text-color: var(--mds_brand_appearance_neutral_default_on-background-color);  --mds_foundations_table_cell_selected_background-color: var(--mds_brand_appearance_primary_weak_background-color);  --mds_foundations_table_cell_selected_text-color: var(--mds_brand_appearance_primary_weak_on-background-color);  --mds_foundations_table_header-cell_sort-button_font-weight: var(--mds_brand_typography_text_medium_bold_font-weight);  --mds_foundations_table_header-cell_background-color: var(--mds_brand_appearance_neutral_weakest_background-color);  --mds_foundations_table_header-cell_text-color: var(--mds_brand_appearance_neutral_weakest_on-background-color);  --mds_foundations_table_header-cell_sort_hover_background-color: var(--mds_brand_appearance_state_neutral_default_hover_background-color);  --mds_foundations_table_header-cell_sort_active_background-color: var(--mds_brand_appearance_state_neutral_default_active_background-color);  --mds_foundations_table_zebra-stripe_background-color: var(--mds_brand_appearance_neutral_weakest_background-color);  --mds_foundations_table_zebra-stripe_text-color: var(--mds_brand_appearance_neutral_weakest_on-background-color);  --mds_foundations_table_caption_text-color: var(--mds_brand_appearance_neutral_default_on-background-color);  --mds_foundations_table_subtext_text-color: var(--mds_brand_appearance_neutral_weak_text-color);  --mds_foundations_table_subtext_font-weight: var(--mds_brand_typography_text_medium_normal_font-weight);  --mds_foundations_table_small_caption_margin-bottom: 12px;  --mds_foundations_table_small_cell_padding-top: 6px;  --mds_foundations_table_small_cell_padding-right: 12px;  --mds_foundations_table_small_cell_padding-bottom: 6px;  --mds_foundations_table_small_cell_padding-left: 12px;  --mds_foundations_table_small_header-cell_sortable_padding-top: 5px;  --mds_foundations_table_small_header-cell_sortable_padding-bottom: 5px;  --mds_foundations_table_small_expanded-row_padding-top: 12px;  --mds_foundations_table_small_expanded-row_padding-right: 12px;  --mds_foundations_table_small_expanded-row_padding-bottom: 20px;  --mds_foundations_table_small_expanded-row_padding-left: 12px;  --mds_foundations_table_medium_caption_margin-bottom: 16px;  --mds_foundations_table_medium_cell_padding-top: 8px;  --mds_foundations_table_medium_cell_padding-right: 16px;  --mds_foundations_table_medium_cell_padding-bottom: 8px;  --mds_foundations_table_medium_cell_padding-left: 16px;  --mds_foundations_table_medium_header-cell_sortable_padding-top: 7px;  --mds_foundations_table_medium_header-cell_sortable_padding-bottom: 7px;  --mds_foundations_table_medium_expanded-row_padding-top: 16px;  --mds_foundations_table_medium_expanded-row_padding-right: 16px;  --mds_foundations_table_medium_expanded-row_padding-bottom: 24px;  --mds_foundations_table_medium_expanded-row_padding-left: 16px;  --mds_foundations_table_large_caption_margin-bottom: 24px;  --mds_foundations_table_large_cell_padding-top: 12px;  --mds_foundations_table_large_cell_padding-right: 24px;  --mds_foundations_table_large_cell_padding-bottom: 12px;  --mds_foundations_table_large_cell_padding-left: 24px;  --mds_foundations_table_large_header-cell_sortable_padding-top: 11px;  --mds_foundations_table_large_header-cell_sortable_padding-bottom: 11px;  --mds_foundations_table_large_expanded-row_padding-top: 24px;  --mds_foundations_table_large_expanded-row_padding-right: 24px;  --mds_foundations_table_large_expanded-row_padding-bottom: 32px;  --mds_foundations_table_large_expanded-row_padding-left: 24px;  --mds_foundations_toast_padding: 16px;  --mds_foundations_toast_gap: 16px;  --mds_foundations_toast_min-width: 280px;  --mds_foundations_toast_max-width: 600px;  --mds_foundations_toast_width: 480px;  --mds_foundations_toast_transition-properties: box-shadow;  --mds_foundations_toast_transition-duration: var(--mds_global_transition_fast_duration);  --mds_foundations_toast_transition-timing: var(--mds_global_transition_fast_timing);  --mds_foundations_typography_heading-1_margin-top: 48px;  --mds_foundations_typography_heading-1_margin-bottom: 24px;  --mds_foundations_typography_heading-2_margin-top: 48px;  --mds_foundations_typography_heading-2_margin-bottom: 24px;  --mds_foundations_typography_heading-3_margin-top: 48px;  --mds_foundations_typography_heading-3_margin-bottom: 16px;  --mds_foundations_typography_heading-4_margin-top: 24px;  --mds_foundations_typography_heading-4_margin-bottom: 16px;  --mds_foundations_typography_heading-5_margin-top: 24px;  --mds_foundations_typography_heading-5_margin-bottom: 16px;  --mds_foundations_typography_heading-6_margin-top: 24px;  --mds_foundations_typography_heading-6_margin-bottom: 16px;  --mds_foundations_typography_paragraph_margin-top: 24px;  --mds_foundations_typography_paragraph_margin-bottom: 24px;  --mds_brand_typography_headline_font-family-fallback: Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Apple SD Gothic Neo,Malgun Gothic,PingFang TC,Microsoft JhengHei,PingFang SC,Microsoft YaHei,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;  --mds_brand_typography_text_font-family-fallback: Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Apple SD Gothic Neo,Malgun Gothic,PingFang TC,Microsoft JhengHei,PingFang SC,Microsoft YaHei,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;}[lang=en]{--mds_brand_typography_headline_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont;--mds_brand_typography_text_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont;}[lang=es]{--mds_brand_typography_headline_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont;--mds_brand_typography_text_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont;}[lang=fr]{--mds_brand_typography_headline_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont;--mds_brand_typography_text_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont;}[lang=de]{--mds_brand_typography_headline_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont;--mds_brand_typography_text_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont;}[lang=it]{--mds_brand_typography_headline_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont;--mds_brand_typography_text_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont;}[lang=pt]{--mds_brand_typography_headline_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont;--mds_brand_typography_text_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont;}[lang=tr]{--mds_brand_typography_headline_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont;--mds_brand_typography_text_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont;}[lang=ru]{--mds_brand_typography_headline_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;--mds_brand_typography_text_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;}[lang=zh-hans]{--mds_brand_typography_headline_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei";--mds_brand_typography_text_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei";}[lang=zh-hant]{--mds_brand_typography_headline_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei";--mds_brand_typography_text_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei";}[lang=ko]{--mds_brand_typography_headline_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic";--mds_brand_typography_text_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic";}[lang=ja]{--mds_brand_typography_headline_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo;--mds_brand_typography_text_font-family-fallback: Arial, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo;}.page-content .new_lcl_tab[data-v-6bb30f96] {
  left: 3px;
  position: relative;
  top: -12px;
}
.page-content .title[data-v-6bb30f96] {
  margin-bottom: 20px;
  margin-top: 12px;
}
.page-content[data-v-6bb30f96] {
  padding: 86px 8px 56px 8px;
  max-width: 1312px;
  margin: 0 auto;
}
@media (min-width: 700px) {
.page-content[data-v-6bb30f96] {
    padding: 86px 16px 56px 16px;
}
}
@media (min-width: 1000px) {
.page-content[data-v-6bb30f96] {
    padding-top: 110px;
}
}body .mds fieldset {
  margin-bottom: 12px;
}
body .mds fieldset legend {
  width: 100%;
  background-image: linear-gradient(0deg, var(--mds_brand_appearance_neutral_default_border-color), var(--mds_brand_appearance_neutral_default_border-color));
  background-size: auto 1px;
  background-repeat: no-repeat;
  background-position: 0 12px;
  margin: 0 0 12px;
}
body .mds fieldset legend span {
  background-color: var(--mds_brand_appearance_neutral_default_background-color);
  padding-right: 24px;
}
body .mds fieldset :has(.toolip-container) {
  background-position: 120px 12px;
}
body .mds fieldset .toolip-container {
  display: flex;
  align-items: center;
}
body .mds fieldset .toolip-container .tt_label {
  padding-right: 8px;
}
body .mds fieldset .add-button::part(button) {
  color: var(--mds_brand_appearance_info_default_text-color);
  text-decoration: underline;
}
body .mds fieldset .add-button::part(icon) {
  fill: var(--mds_brand_appearance_info_default_text-color);
}

.grid-container {
  display: grid;
}