@cds/core/styles/module.layout.css

Clarity Design System - common components, themes, and utilties

@charset "UTF-8";
/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
:root,
:host {
  --δ1: var(--cds-global-layout-space-xxxs, calc(2 * 1rem / var(--cds-global-base, 20)));
  --δ2: var(--cds-global-layout-space-xxs, calc(4 * 1rem / var(--cds-global-base, 20)));
  --δ3: var(--cds-global-layout-space-xs, calc(8 * 1rem / var(--cds-global-base, 20)));
  --δ4: var(--cds-global-layout-space-sm, calc(12 * 1rem / var(--cds-global-base, 20)));
  --δ5: var(--cds-global-layout-space-md, calc(16 * 1rem / var(--cds-global-base, 20)));
  --δ6: var(--cds-global-layout-space-lg, calc(24 * 1rem / var(--cds-global-base, 20)));
  --δ7: var(--cds-global-layout-space-xl, calc(32 * 1rem / var(--cds-global-base, 20)));
  --δ8: var(--cds-global-layout-space-xxl, calc(48 * 1rem / var(--cds-global-base, 20)));
  --δ9: var(--cds-global-layout-space-xxxl, calc(64 * 1rem / var(--cds-global-base, 20)));
}

/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
[cds-layout*="align:fill"] > * {
  flex-grow: 1 !important;
  flex-basis: 0 !important;
}

[cds-layout~="wrap:none"] {
  flex-wrap: nowrap !important;
}

[cds-layout*="align:stretch"] {
  flex-grow: 1 !important;
}

[cds-layout*="align:shrink"] {
  flex-shrink: 1 !important;
  flex-grow: 0 !important;
}

@media (min-width: 576px) {
  [cds-layout*="align@xs:fill"] > * {
    flex-grow: 1 !important;
    flex-basis: 0 !important;
  }

  [cds-layout~="wrap@xs:none"] {
    flex-wrap: nowrap !important;
  }

  [cds-layout*="align@xs:stretch"] {
    flex-grow: 1 !important;
  }

  [cds-layout*="align@xs:shrink"] {
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
  }
}
@media (min-width: 768px) {
  [cds-layout*="align@sm:fill"] > * {
    flex-grow: 1 !important;
    flex-basis: 0 !important;
  }

  [cds-layout~="wrap@sm:none"] {
    flex-wrap: nowrap !important;
  }

  [cds-layout*="align@sm:stretch"] {
    flex-grow: 1 !important;
  }

  [cds-layout*="align@sm:shrink"] {
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
  }
}
@media (min-width: 992px) {
  [cds-layout*="align@md:fill"] > * {
    flex-grow: 1 !important;
    flex-basis: 0 !important;
  }

  [cds-layout~="wrap@md:none"] {
    flex-wrap: nowrap !important;
  }

  [cds-layout*="align@md:stretch"] {
    flex-grow: 1 !important;
  }

  [cds-layout*="align@md:shrink"] {
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
  }
}
@media (min-width: 1200px) {
  [cds-layout*="align@lg:fill"] > * {
    flex-grow: 1 !important;
    flex-basis: 0 !important;
  }

  [cds-layout~="wrap@lg:none"] {
    flex-wrap: nowrap !important;
  }

  [cds-layout*="align@lg:stretch"] {
    flex-grow: 1 !important;
  }

  [cds-layout*="align@lg:shrink"] {
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
  }
}
@media (min-width: 1440px) {
  [cds-layout*="align@xl:fill"] > * {
    flex-grow: 1 !important;
    flex-basis: 0 !important;
  }

  [cds-layout~="wrap@xl:none"] {
    flex-wrap: nowrap !important;
  }

  [cds-layout*="align@xl:stretch"] {
    flex-grow: 1 !important;
  }

  [cds-layout*="align@xl:shrink"] {
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
  }
}
/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
[cds-layout~=horizontal] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-items: flex-start;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  min-height: 0;
}
[cds-layout~=horizontal] > [cds-layout~=horizontal],
[cds-layout~=horizontal] > [cds-layout~=vertical],
[cds-layout~=horizontal] > [cds-text] {
  width: initial !important;
}

[cds-layout~=horizontal][cds-layout*="align:top"] {
  align-items: flex-start;
}
[cds-layout~=horizontal][cds-layout*="align:bottom"] {
  align-items: flex-end;
}
[cds-layout~=horizontal][cds-layout*="align:left"] {
  justify-content: flex-start;
}
[cds-layout~=horizontal][cds-layout*="align:right"] {
  justify-content: flex-end;
}
[cds-layout~=horizontal][cds-layout*="align:vertical-center"] {
  align-items: center;
  align-content: center;
}
[cds-layout~=horizontal][cds-layout*="align:horizontal-center"] {
  justify-content: center;
}
[cds-layout~=horizontal][cds-layout*="align:center"] {
  align-items: center;
  align-content: center;
  justify-content: center;
}

[cds-layout~=horizontal][cds-layout*="order:reverse"] {
  flex-direction: row-reverse;
}

[cds-layout~=horizontal][cds-layout*="align:vertical-stretch"] {
  align-items: stretch;
  align-content: stretch;
  flex-grow: 1;
}
[cds-layout~=horizontal][cds-layout*="align:horizontal-stretch"] {
  justify-content: stretch;
  flex-grow: 1;
}
[cds-layout~=horizontal][cds-layout*="align:horizontal-stretch"] > * {
  flex-grow: 1;
}
[cds-layout~=horizontal][cds-layout*="align:stretch"] {
  align-items: stretch;
  align-content: stretch;
  flex-grow: 1;
}
[cds-layout~=horizontal][cds-layout*="align:stretch"] > * {
  flex-grow: 1;
}

[cds-layout~=horizontal] > [cds-layout*="align:center"], [cds-layout~=horizontal] > [cds-layout*="align:vertical-center"] {
  align-self: center;
}
[cds-layout~=horizontal] > [cds-layout*="align:center"], [cds-layout~=horizontal] > [cds-layout*="align:horizontal-center"] {
  margin-left: auto !important;
  margin-right: auto !important;
}
[cds-layout~=horizontal] > [cds-layout*="align:top"] {
  align-self: flex-start;
}
[cds-layout~=horizontal] > [cds-layout*="align:bottom"] {
  align-self: flex-end;
}
[cds-layout~=horizontal] > [cds-layout*="align:right"] {
  margin-left: auto !important;
}
[cds-layout~=horizontal] > [cds-layout*="align:left"] {
  margin-right: auto !important;
}

@media (min-width: 576px) {
  [cds-layout~=horizontal][cds-layout*="align@xs:top"] {
    align-items: flex-start;
  }
  [cds-layout~=horizontal][cds-layout*="align@xs:bottom"] {
    align-items: flex-end;
  }
  [cds-layout~=horizontal][cds-layout*="align@xs:left"] {
    justify-content: flex-start;
  }
  [cds-layout~=horizontal][cds-layout*="align@xs:right"] {
    justify-content: flex-end;
  }
  [cds-layout~=horizontal][cds-layout*="align@xs:vertical-center"] {
    align-items: center;
    align-content: center;
  }
  [cds-layout~=horizontal][cds-layout*="align@xs:horizontal-center"] {
    justify-content: center;
  }
  [cds-layout~=horizontal][cds-layout*="align@xs:center"] {
    align-items: center;
    align-content: center;
    justify-content: center;
  }

  [cds-layout~=horizontal][cds-layout*="order@xs:reverse"] {
    flex-direction: row-reverse;
  }

  [cds-layout~=horizontal][cds-layout*="align@xs:vertical-stretch"] {
    align-items: stretch;
    align-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@xs:horizontal-stretch"] {
    justify-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@xs:horizontal-stretch"] > * {
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@xs:stretch"] {
    align-items: stretch;
    align-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@xs:stretch"] > * {
    flex-grow: 1;
  }

  [cds-layout~=horizontal] > [cds-layout*="align@xs:center"], [cds-layout~=horizontal] > [cds-layout*="align@xs:vertical-center"] {
    align-self: center;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@xs:center"], [cds-layout~=horizontal] > [cds-layout*="align@xs:horizontal-center"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@xs:top"] {
    align-self: flex-start;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@xs:bottom"] {
    align-self: flex-end;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@xs:right"] {
    margin-left: auto !important;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@xs:left"] {
    margin-right: auto !important;
  }
}
@media (min-width: 768px) {
  [cds-layout~=horizontal][cds-layout*="align@sm:top"] {
    align-items: flex-start;
  }
  [cds-layout~=horizontal][cds-layout*="align@sm:bottom"] {
    align-items: flex-end;
  }
  [cds-layout~=horizontal][cds-layout*="align@sm:left"] {
    justify-content: flex-start;
  }
  [cds-layout~=horizontal][cds-layout*="align@sm:right"] {
    justify-content: flex-end;
  }
  [cds-layout~=horizontal][cds-layout*="align@sm:vertical-center"] {
    align-items: center;
    align-content: center;
  }
  [cds-layout~=horizontal][cds-layout*="align@sm:horizontal-center"] {
    justify-content: center;
  }
  [cds-layout~=horizontal][cds-layout*="align@sm:center"] {
    align-items: center;
    align-content: center;
    justify-content: center;
  }

  [cds-layout~=horizontal][cds-layout*="order@sm:reverse"] {
    flex-direction: row-reverse;
  }

  [cds-layout~=horizontal][cds-layout*="align@sm:vertical-stretch"] {
    align-items: stretch;
    align-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@sm:horizontal-stretch"] {
    justify-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@sm:horizontal-stretch"] > * {
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@sm:stretch"] {
    align-items: stretch;
    align-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@sm:stretch"] > * {
    flex-grow: 1;
  }

  [cds-layout~=horizontal] > [cds-layout*="align@sm:center"], [cds-layout~=horizontal] > [cds-layout*="align@sm:vertical-center"] {
    align-self: center;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@sm:center"], [cds-layout~=horizontal] > [cds-layout*="align@sm:horizontal-center"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@sm:top"] {
    align-self: flex-start;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@sm:bottom"] {
    align-self: flex-end;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@sm:right"] {
    margin-left: auto !important;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@sm:left"] {
    margin-right: auto !important;
  }
}
@media (min-width: 992px) {
  [cds-layout~=horizontal][cds-layout*="align@md:top"] {
    align-items: flex-start;
  }
  [cds-layout~=horizontal][cds-layout*="align@md:bottom"] {
    align-items: flex-end;
  }
  [cds-layout~=horizontal][cds-layout*="align@md:left"] {
    justify-content: flex-start;
  }
  [cds-layout~=horizontal][cds-layout*="align@md:right"] {
    justify-content: flex-end;
  }
  [cds-layout~=horizontal][cds-layout*="align@md:vertical-center"] {
    align-items: center;
    align-content: center;
  }
  [cds-layout~=horizontal][cds-layout*="align@md:horizontal-center"] {
    justify-content: center;
  }
  [cds-layout~=horizontal][cds-layout*="align@md:center"] {
    align-items: center;
    align-content: center;
    justify-content: center;
  }

  [cds-layout~=horizontal][cds-layout*="order@md:reverse"] {
    flex-direction: row-reverse;
  }

  [cds-layout~=horizontal][cds-layout*="align@md:vertical-stretch"] {
    align-items: stretch;
    align-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@md:horizontal-stretch"] {
    justify-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@md:horizontal-stretch"] > * {
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@md:stretch"] {
    align-items: stretch;
    align-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@md:stretch"] > * {
    flex-grow: 1;
  }

  [cds-layout~=horizontal] > [cds-layout*="align@md:center"], [cds-layout~=horizontal] > [cds-layout*="align@md:vertical-center"] {
    align-self: center;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@md:center"], [cds-layout~=horizontal] > [cds-layout*="align@md:horizontal-center"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@md:top"] {
    align-self: flex-start;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@md:bottom"] {
    align-self: flex-end;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@md:right"] {
    margin-left: auto !important;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@md:left"] {
    margin-right: auto !important;
  }
}
@media (min-width: 1200px) {
  [cds-layout~=horizontal][cds-layout*="align@lg:top"] {
    align-items: flex-start;
  }
  [cds-layout~=horizontal][cds-layout*="align@lg:bottom"] {
    align-items: flex-end;
  }
  [cds-layout~=horizontal][cds-layout*="align@lg:left"] {
    justify-content: flex-start;
  }
  [cds-layout~=horizontal][cds-layout*="align@lg:right"] {
    justify-content: flex-end;
  }
  [cds-layout~=horizontal][cds-layout*="align@lg:vertical-center"] {
    align-items: center;
    align-content: center;
  }
  [cds-layout~=horizontal][cds-layout*="align@lg:horizontal-center"] {
    justify-content: center;
  }
  [cds-layout~=horizontal][cds-layout*="align@lg:center"] {
    align-items: center;
    align-content: center;
    justify-content: center;
  }

  [cds-layout~=horizontal][cds-layout*="order@lg:reverse"] {
    flex-direction: row-reverse;
  }

  [cds-layout~=horizontal][cds-layout*="align@lg:vertical-stretch"] {
    align-items: stretch;
    align-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@lg:horizontal-stretch"] {
    justify-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@lg:horizontal-stretch"] > * {
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@lg:stretch"] {
    align-items: stretch;
    align-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@lg:stretch"] > * {
    flex-grow: 1;
  }

  [cds-layout~=horizontal] > [cds-layout*="align@lg:center"], [cds-layout~=horizontal] > [cds-layout*="align@lg:vertical-center"] {
    align-self: center;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@lg:center"], [cds-layout~=horizontal] > [cds-layout*="align@lg:horizontal-center"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@lg:top"] {
    align-self: flex-start;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@lg:bottom"] {
    align-self: flex-end;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@lg:right"] {
    margin-left: auto !important;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@lg:left"] {
    margin-right: auto !important;
  }
}
@media (min-width: 1440px) {
  [cds-layout~=horizontal][cds-layout*="align@xl:top"] {
    align-items: flex-start;
  }
  [cds-layout~=horizontal][cds-layout*="align@xl:bottom"] {
    align-items: flex-end;
  }
  [cds-layout~=horizontal][cds-layout*="align@xl:left"] {
    justify-content: flex-start;
  }
  [cds-layout~=horizontal][cds-layout*="align@xl:right"] {
    justify-content: flex-end;
  }
  [cds-layout~=horizontal][cds-layout*="align@xl:vertical-center"] {
    align-items: center;
    align-content: center;
  }
  [cds-layout~=horizontal][cds-layout*="align@xl:horizontal-center"] {
    justify-content: center;
  }
  [cds-layout~=horizontal][cds-layout*="align@xl:center"] {
    align-items: center;
    align-content: center;
    justify-content: center;
  }

  [cds-layout~=horizontal][cds-layout*="order@xl:reverse"] {
    flex-direction: row-reverse;
  }

  [cds-layout~=horizontal][cds-layout*="align@xl:vertical-stretch"] {
    align-items: stretch;
    align-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@xl:horizontal-stretch"] {
    justify-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@xl:horizontal-stretch"] > * {
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@xl:stretch"] {
    align-items: stretch;
    align-content: stretch;
    flex-grow: 1;
  }
  [cds-layout~=horizontal][cds-layout*="align@xl:stretch"] > * {
    flex-grow: 1;
  }

  [cds-layout~=horizontal] > [cds-layout*="align@xl:center"], [cds-layout~=horizontal] > [cds-layout*="align@xl:vertical-center"] {
    align-self: center;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@xl:center"], [cds-layout~=horizontal] > [cds-layout*="align@xl:horizontal-center"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@xl:top"] {
    align-self: flex-start;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@xl:bottom"] {
    align-self: flex-end;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@xl:right"] {
    margin-left: auto !important;
  }
  [cds-layout~=horizontal] > [cds-layout*="align@xl:left"] {
    margin-right: auto !important;
  }
}
/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
[cds-layout~=vertical] {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

[cds-layout~=vertical][cds-layout*="align:top"] {
  justify-content: flex-start;
}
[cds-layout~=vertical][cds-layout*="align:bottom"] {
  justify-content: flex-end;
}
[cds-layout~=vertical][cds-layout*="align:left"] {
  align-items: flex-start;
}
[cds-layout~=vertical][cds-layout*="align:right"] {
  align-items: flex-end;
}
[cds-layout~=vertical][cds-layout*="align:vertical-center"] {
  justify-content: center;
}
[cds-layout~=vertical][cds-layout*="align:horizontal-center"] {
  align-items: center;
}
[cds-layout~=vertical][cds-layout*="align:center"] {
  align-items: center;
  justify-content: center;
}

[cds-layout~=vertical][cds-layout*="order:reverse"] {
  flex-direction: column-reverse;
}

[cds-layout~=vertical][cds-layout*="align:vertical-stretch"] {
  justify-content: stretch;
}
[cds-layout~=vertical][cds-layout*="align:vertical-stretch"] > * {
  flex-grow: 1;
}
[cds-layout~=vertical][cds-layout*="align:horizontal-stretch"] {
  align-items: stretch;
}
[cds-layout~=vertical][cds-layout*="align:stretch"] {
  align-items: stretch;
  justify-content: stretch;
}
[cds-layout~=vertical][cds-layout*="align:stretch"] > * {
  flex-grow: 1;
}

[cds-layout~=vertical] > [cds-layout*="align:center"], [cds-layout~=vertical] > [cds-layout*="align:vertical-center"] {
  margin-top: auto;
  margin-bottom: auto;
}
[cds-layout~=vertical] > [cds-layout*="align:center"], [cds-layout~=vertical] > [cds-layout*="align:horizontal-center"] {
  align-self: center;
}
[cds-layout~=vertical] > [cds-layout*="align:top"] {
  margin-bottom: auto !important;
}
[cds-layout~=vertical] > [cds-layout*="align:bottom"] {
  margin-top: auto !important;
}
[cds-layout~=vertical] > [cds-layout*="align:right"] {
  margin-left: auto;
}
[cds-layout~=vertical] > [cds-layout*="align:left"] {
  margin-right: auto;
}

@media (min-width: 576px) {
  [cds-layout~=vertical][cds-layout*="align@xs:top"] {
    justify-content: flex-start;
  }
  [cds-layout~=vertical][cds-layout*="align@xs:bottom"] {
    justify-content: flex-end;
  }
  [cds-layout~=vertical][cds-layout*="align@xs:left"] {
    align-items: flex-start;
  }
  [cds-layout~=vertical][cds-layout*="align@xs:right"] {
    align-items: flex-end;
  }
  [cds-layout~=vertical][cds-layout*="align@xs:vertical-center"] {
    justify-content: center;
  }
  [cds-layout~=vertical][cds-layout*="align@xs:horizontal-center"] {
    align-items: center;
  }
  [cds-layout~=vertical][cds-layout*="align@xs:center"] {
    align-items: center;
    justify-content: center;
  }

  [cds-layout~=vertical][cds-layout*="order@xs:reverse"] {
    flex-direction: column-reverse;
  }

  [cds-layout~=vertical][cds-layout*="align@xs:vertical-stretch"] {
    justify-content: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@xs:vertical-stretch"] > * {
    flex-grow: 1;
  }
  [cds-layout~=vertical][cds-layout*="align@xs:horizontal-stretch"] {
    align-items: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@xs:stretch"] {
    align-items: stretch;
    justify-content: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@xs:stretch"] > * {
    flex-grow: 1;
  }

  [cds-layout~=vertical] > [cds-layout*="align@xs:center"], [cds-layout~=vertical] > [cds-layout*="align@xs:vertical-center"] {
    margin-top: auto;
    margin-bottom: auto;
  }
  [cds-layout~=vertical] > [cds-layout*="align@xs:center"], [cds-layout~=vertical] > [cds-layout*="align@xs:horizontal-center"] {
    align-self: center;
  }
  [cds-layout~=vertical] > [cds-layout*="align@xs:top"] {
    margin-bottom: auto !important;
  }
  [cds-layout~=vertical] > [cds-layout*="align@xs:bottom"] {
    margin-top: auto !important;
  }
  [cds-layout~=vertical] > [cds-layout*="align@xs:right"] {
    margin-left: auto;
  }
  [cds-layout~=vertical] > [cds-layout*="align@xs:left"] {
    margin-right: auto;
  }
}
@media (min-width: 768px) {
  [cds-layout~=vertical][cds-layout*="align@sm:top"] {
    justify-content: flex-start;
  }
  [cds-layout~=vertical][cds-layout*="align@sm:bottom"] {
    justify-content: flex-end;
  }
  [cds-layout~=vertical][cds-layout*="align@sm:left"] {
    align-items: flex-start;
  }
  [cds-layout~=vertical][cds-layout*="align@sm:right"] {
    align-items: flex-end;
  }
  [cds-layout~=vertical][cds-layout*="align@sm:vertical-center"] {
    justify-content: center;
  }
  [cds-layout~=vertical][cds-layout*="align@sm:horizontal-center"] {
    align-items: center;
  }
  [cds-layout~=vertical][cds-layout*="align@sm:center"] {
    align-items: center;
    justify-content: center;
  }

  [cds-layout~=vertical][cds-layout*="order@sm:reverse"] {
    flex-direction: column-reverse;
  }

  [cds-layout~=vertical][cds-layout*="align@sm:vertical-stretch"] {
    justify-content: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@sm:vertical-stretch"] > * {
    flex-grow: 1;
  }
  [cds-layout~=vertical][cds-layout*="align@sm:horizontal-stretch"] {
    align-items: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@sm:stretch"] {
    align-items: stretch;
    justify-content: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@sm:stretch"] > * {
    flex-grow: 1;
  }

  [cds-layout~=vertical] > [cds-layout*="align@sm:center"], [cds-layout~=vertical] > [cds-layout*="align@sm:vertical-center"] {
    margin-top: auto;
    margin-bottom: auto;
  }
  [cds-layout~=vertical] > [cds-layout*="align@sm:center"], [cds-layout~=vertical] > [cds-layout*="align@sm:horizontal-center"] {
    align-self: center;
  }
  [cds-layout~=vertical] > [cds-layout*="align@sm:top"] {
    margin-bottom: auto !important;
  }
  [cds-layout~=vertical] > [cds-layout*="align@sm:bottom"] {
    margin-top: auto !important;
  }
  [cds-layout~=vertical] > [cds-layout*="align@sm:right"] {
    margin-left: auto;
  }
  [cds-layout~=vertical] > [cds-layout*="align@sm:left"] {
    margin-right: auto;
  }
}
@media (min-width: 992px) {
  [cds-layout~=vertical][cds-layout*="align@md:top"] {
    justify-content: flex-start;
  }
  [cds-layout~=vertical][cds-layout*="align@md:bottom"] {
    justify-content: flex-end;
  }
  [cds-layout~=vertical][cds-layout*="align@md:left"] {
    align-items: flex-start;
  }
  [cds-layout~=vertical][cds-layout*="align@md:right"] {
    align-items: flex-end;
  }
  [cds-layout~=vertical][cds-layout*="align@md:vertical-center"] {
    justify-content: center;
  }
  [cds-layout~=vertical][cds-layout*="align@md:horizontal-center"] {
    align-items: center;
  }
  [cds-layout~=vertical][cds-layout*="align@md:center"] {
    align-items: center;
    justify-content: center;
  }

  [cds-layout~=vertical][cds-layout*="order@md:reverse"] {
    flex-direction: column-reverse;
  }

  [cds-layout~=vertical][cds-layout*="align@md:vertical-stretch"] {
    justify-content: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@md:vertical-stretch"] > * {
    flex-grow: 1;
  }
  [cds-layout~=vertical][cds-layout*="align@md:horizontal-stretch"] {
    align-items: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@md:stretch"] {
    align-items: stretch;
    justify-content: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@md:stretch"] > * {
    flex-grow: 1;
  }

  [cds-layout~=vertical] > [cds-layout*="align@md:center"], [cds-layout~=vertical] > [cds-layout*="align@md:vertical-center"] {
    margin-top: auto;
    margin-bottom: auto;
  }
  [cds-layout~=vertical] > [cds-layout*="align@md:center"], [cds-layout~=vertical] > [cds-layout*="align@md:horizontal-center"] {
    align-self: center;
  }
  [cds-layout~=vertical] > [cds-layout*="align@md:top"] {
    margin-bottom: auto !important;
  }
  [cds-layout~=vertical] > [cds-layout*="align@md:bottom"] {
    margin-top: auto !important;
  }
  [cds-layout~=vertical] > [cds-layout*="align@md:right"] {
    margin-left: auto;
  }
  [cds-layout~=vertical] > [cds-layout*="align@md:left"] {
    margin-right: auto;
  }
}
@media (min-width: 1200px) {
  [cds-layout~=vertical][cds-layout*="align@lg:top"] {
    justify-content: flex-start;
  }
  [cds-layout~=vertical][cds-layout*="align@lg:bottom"] {
    justify-content: flex-end;
  }
  [cds-layout~=vertical][cds-layout*="align@lg:left"] {
    align-items: flex-start;
  }
  [cds-layout~=vertical][cds-layout*="align@lg:right"] {
    align-items: flex-end;
  }
  [cds-layout~=vertical][cds-layout*="align@lg:vertical-center"] {
    justify-content: center;
  }
  [cds-layout~=vertical][cds-layout*="align@lg:horizontal-center"] {
    align-items: center;
  }
  [cds-layout~=vertical][cds-layout*="align@lg:center"] {
    align-items: center;
    justify-content: center;
  }

  [cds-layout~=vertical][cds-layout*="order@lg:reverse"] {
    flex-direction: column-reverse;
  }

  [cds-layout~=vertical][cds-layout*="align@lg:vertical-stretch"] {
    justify-content: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@lg:vertical-stretch"] > * {
    flex-grow: 1;
  }
  [cds-layout~=vertical][cds-layout*="align@lg:horizontal-stretch"] {
    align-items: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@lg:stretch"] {
    align-items: stretch;
    justify-content: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@lg:stretch"] > * {
    flex-grow: 1;
  }

  [cds-layout~=vertical] > [cds-layout*="align@lg:center"], [cds-layout~=vertical] > [cds-layout*="align@lg:vertical-center"] {
    margin-top: auto;
    margin-bottom: auto;
  }
  [cds-layout~=vertical] > [cds-layout*="align@lg:center"], [cds-layout~=vertical] > [cds-layout*="align@lg:horizontal-center"] {
    align-self: center;
  }
  [cds-layout~=vertical] > [cds-layout*="align@lg:top"] {
    margin-bottom: auto !important;
  }
  [cds-layout~=vertical] > [cds-layout*="align@lg:bottom"] {
    margin-top: auto !important;
  }
  [cds-layout~=vertical] > [cds-layout*="align@lg:right"] {
    margin-left: auto;
  }
  [cds-layout~=vertical] > [cds-layout*="align@lg:left"] {
    margin-right: auto;
  }
}
@media (min-width: 1440px) {
  [cds-layout~=vertical][cds-layout*="align@xl:top"] {
    justify-content: flex-start;
  }
  [cds-layout~=vertical][cds-layout*="align@xl:bottom"] {
    justify-content: flex-end;
  }
  [cds-layout~=vertical][cds-layout*="align@xl:left"] {
    align-items: flex-start;
  }
  [cds-layout~=vertical][cds-layout*="align@xl:right"] {
    align-items: flex-end;
  }
  [cds-layout~=vertical][cds-layout*="align@xl:vertical-center"] {
    justify-content: center;
  }
  [cds-layout~=vertical][cds-layout*="align@xl:horizontal-center"] {
    align-items: center;
  }
  [cds-layout~=vertical][cds-layout*="align@xl:center"] {
    align-items: center;
    justify-content: center;
  }

  [cds-layout~=vertical][cds-layout*="order@xl:reverse"] {
    flex-direction: column-reverse;
  }

  [cds-layout~=vertical][cds-layout*="align@xl:vertical-stretch"] {
    justify-content: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@xl:vertical-stretch"] > * {
    flex-grow: 1;
  }
  [cds-layout~=vertical][cds-layout*="align@xl:horizontal-stretch"] {
    align-items: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@xl:stretch"] {
    align-items: stretch;
    justify-content: stretch;
  }
  [cds-layout~=vertical][cds-layout*="align@xl:stretch"] > * {
    flex-grow: 1;
  }

  [cds-layout~=vertical] > [cds-layout*="align@xl:center"], [cds-layout~=vertical] > [cds-layout*="align@xl:vertical-center"] {
    margin-top: auto;
    margin-bottom: auto;
  }
  [cds-layout~=vertical] > [cds-layout*="align@xl:center"], [cds-layout~=vertical] > [cds-layout*="align@xl:horizontal-center"] {
    align-self: center;
  }
  [cds-layout~=vertical] > [cds-layout*="align@xl:top"] {
    margin-bottom: auto !important;
  }
  [cds-layout~=vertical] > [cds-layout*="align@xl:bottom"] {
    margin-top: auto !important;
  }
  [cds-layout~=vertical] > [cds-layout*="align@xl:right"] {
    margin-left: auto;
  }
  [cds-layout~=vertical] > [cds-layout*="align@xl:left"] {
    margin-right: auto;
  }
}
/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
[cds-layout~=grid] {
  display: grid;
  align-items: start;
  align-content: start;
  grid-template-columns: repeat(var(--cds-global-layout-grid-cols, 12), 1fr);
  width: 100%;
}
[cds-layout~=grid][cds-layout*=rows] {
  grid-template-rows: repeat(12, auto);
}
[cds-layout~=grid] > [cds-layout*=row] {
  align-self: stretch;
}
[cds-layout~=grid][cds-layout*="cols:auto"] {
  grid-auto-flow: column;
  grid-template-columns: initial;
}

[cds-layout*="cols@"] > * {
  grid-column: span var(--cds-global-layout-grid-cols, 12);
}

[cds-layout*="col@"] {
  grid-column: span 12;
}

[cds-layout*="cols:1"] > * {
  grid-column: span 1/span 1;
}

[cds-layout*="rows:1"] > * {
  grid-row: span 1/span 1;
}

[cds-layout*="cols:2"] > * {
  grid-column: span 2/span 2;
}

[cds-layout*="rows:2"] > * {
  grid-row: span 2/span 2;
}

[cds-layout*="cols:3"] > * {
  grid-column: span 3/span 3;
}

[cds-layout*="rows:3"] > * {
  grid-row: span 3/span 3;
}

[cds-layout*="cols:4"] > * {
  grid-column: span 4/span 4;
}

[cds-layout*="rows:4"] > * {
  grid-row: span 4/span 4;
}

[cds-layout*="cols:5"] > * {
  grid-column: span 5/span 5;
}

[cds-layout*="rows:5"] > * {
  grid-row: span 5/span 5;
}

[cds-layout*="cols:6"] > * {
  grid-column: span 6/span 6;
}

[cds-layout*="rows:6"] > * {
  grid-row: span 6/span 6;
}

[cds-layout*="cols:7"] > * {
  grid-column: span 7/span 7;
}

[cds-layout*="rows:7"] > * {
  grid-row: span 7/span 7;
}

[cds-layout*="cols:8"] > * {
  grid-column: span 8/span 8;
}

[cds-layout*="rows:8"] > * {
  grid-row: span 8/span 8;
}

[cds-layout*="cols:9"] > * {
  grid-column: span 9/span 9;
}

[cds-layout*="rows:9"] > * {
  grid-row: span 9/span 9;
}

[cds-layout*="cols:10"] > * {
  grid-column: span 10/span 10;
}

[cds-layout*="rows:10"] > * {
  grid-row: span 10/span 10;
}

[cds-layout*="cols:11"] > * {
  grid-column: span 11/span 11;
}

[cds-layout*="rows:11"] > * {
  grid-row: span 11/span 11;
}

[cds-layout*="cols:12"] > * {
  grid-column: span 12/span 12;
}

[cds-layout*="rows:12"] > * {
  grid-row: span 12/span 12;
}

[cds-layout*="col:1"] {
  grid-column: span 1/span 1 !important;
}

[cds-layout*="row:1"] {
  grid-row: span 1/span 1 !important;
}

[cds-layout*="col:2"] {
  grid-column: span 2/span 2 !important;
}

[cds-layout*="row:2"] {
  grid-row: span 2/span 2 !important;
}

[cds-layout*="col:3"] {
  grid-column: span 3/span 3 !important;
}

[cds-layout*="row:3"] {
  grid-row: span 3/span 3 !important;
}

[cds-layout*="col:4"] {
  grid-column: span 4/span 4 !important;
}

[cds-layout*="row:4"] {
  grid-row: span 4/span 4 !important;
}

[cds-layout*="col:5"] {
  grid-column: span 5/span 5 !important;
}

[cds-layout*="row:5"] {
  grid-row: span 5/span 5 !important;
}

[cds-layout*="col:6"] {
  grid-column: span 6/span 6 !important;
}

[cds-layout*="row:6"] {
  grid-row: span 6/span 6 !important;
}

[cds-layout*="col:7"] {
  grid-column: span 7/span 7 !important;
}

[cds-layout*="row:7"] {
  grid-row: span 7/span 7 !important;
}

[cds-layout*="col:8"] {
  grid-column: span 8/span 8 !important;
}

[cds-layout*="row:8"] {
  grid-row: span 8/span 8 !important;
}

[cds-layout*="col:9"] {
  grid-column: span 9/span 9 !important;
}

[cds-layout*="row:9"] {
  grid-row: span 9/span 9 !important;
}

[cds-layout*="col:10"] {
  grid-column: span 10/span 10 !important;
}

[cds-layout*="row:10"] {
  grid-row: span 10/span 10 !important;
}

[cds-layout*="col:11"] {
  grid-column: span 11/span 11 !important;
}

[cds-layout*="row:11"] {
  grid-row: span 11/span 11 !important;
}

[cds-layout*="col:12"] {
  grid-column: span 12/span 12 !important;
}

[cds-layout*="row:12"] {
  grid-row: span 12/span 12 !important;
}

[cds-layout*="col:start-1"] {
  grid-column-start: 1 !important;
}

[cds-layout*="col:end-1"] {
  grid-column-end: 1 !important;
}

[cds-layout*="row:start-1"] {
  grid-row-start: 1 !important;
}

[cds-layout*="row:end-1"] {
  grid-row-end: 1 !important;
}

[cds-layout*="col:start-2"] {
  grid-column-start: 2 !important;
}

[cds-layout*="col:end-2"] {
  grid-column-end: 2 !important;
}

[cds-layout*="row:start-2"] {
  grid-row-start: 2 !important;
}

[cds-layout*="row:end-2"] {
  grid-row-end: 2 !important;
}

[cds-layout*="col:start-3"] {
  grid-column-start: 3 !important;
}

[cds-layout*="col:end-3"] {
  grid-column-end: 3 !important;
}

[cds-layout*="row:start-3"] {
  grid-row-start: 3 !important;
}

[cds-layout*="row:end-3"] {
  grid-row-end: 3 !important;
}

[cds-layout*="col:start-4"] {
  grid-column-start: 4 !important;
}

[cds-layout*="col:end-4"] {
  grid-column-end: 4 !important;
}

[cds-layout*="row:start-4"] {
  grid-row-start: 4 !important;
}

[cds-layout*="row:end-4"] {
  grid-row-end: 4 !important;
}

[cds-layout*="col:start-5"] {
  grid-column-start: 5 !important;
}

[cds-layout*="col:end-5"] {
  grid-column-end: 5 !important;
}

[cds-layout*="row:start-5"] {
  grid-row-start: 5 !important;
}

[cds-layout*="row:end-5"] {
  grid-row-end: 5 !important;
}

[cds-layout*="col:start-6"] {
  grid-column-start: 6 !important;
}

[cds-layout*="col:end-6"] {
  grid-column-end: 6 !important;
}

[cds-layout*="row:start-6"] {
  grid-row-start: 6 !important;
}

[cds-layout*="row:end-6"] {
  grid-row-end: 6 !important;
}

[cds-layout*="col:start-7"] {
  grid-column-start: 7 !important;
}

[cds-layout*="col:end-7"] {
  grid-column-end: 7 !important;
}

[cds-layout*="row:start-7"] {
  grid-row-start: 7 !important;
}

[cds-layout*="row:end-7"] {
  grid-row-end: 7 !important;
}

[cds-layout*="col:start-8"] {
  grid-column-start: 8 !important;
}

[cds-layout*="col:end-8"] {
  grid-column-end: 8 !important;
}

[cds-layout*="row:start-8"] {
  grid-row-start: 8 !important;
}

[cds-layout*="row:end-8"] {
  grid-row-end: 8 !important;
}

[cds-layout*="col:start-9"] {
  grid-column-start: 9 !important;
}

[cds-layout*="col:end-9"] {
  grid-column-end: 9 !important;
}

[cds-layout*="row:start-9"] {
  grid-row-start: 9 !important;
}

[cds-layout*="row:end-9"] {
  grid-row-end: 9 !important;
}

[cds-layout*="col:start-10"] {
  grid-column-start: 10 !important;
}

[cds-layout*="col:end-10"] {
  grid-column-end: 10 !important;
}

[cds-layout*="row:start-10"] {
  grid-row-start: 10 !important;
}

[cds-layout*="row:end-10"] {
  grid-row-end: 10 !important;
}

[cds-layout*="col:start-11"] {
  grid-column-start: 11 !important;
}

[cds-layout*="col:end-11"] {
  grid-column-end: 11 !important;
}

[cds-layout*="row:start-11"] {
  grid-row-start: 11 !important;
}

[cds-layout*="row:end-11"] {
  grid-row-end: 11 !important;
}

[cds-layout*="col:start-12"] {
  grid-column-start: 12 !important;
}

[cds-layout*="col:end-12"] {
  grid-column-end: 12 !important;
}

[cds-layout*="row:start-12"] {
  grid-row-start: 12 !important;
}

[cds-layout*="row:end-12"] {
  grid-row-end: 12 !important;
}

[cds-layout*="col:start-13"] {
  grid-column-start: 13 !important;
}

[cds-layout*="col:end-13"] {
  grid-column-end: 13 !important;
}

[cds-layout*="row:start-13"] {
  grid-row-start: 13 !important;
}

[cds-layout*="row:end-13"] {
  grid-row-end: 13 !important;
}

[cds-layout~=grid][cds-layout*="align:top"] {
  align-content: start;
}
[cds-layout~=grid][cds-layout*="align:right"] {
  justify-content: end;
}
[cds-layout~=grid][cds-layout*="align:bottom"] {
  align-content: end;
}
[cds-layout~=grid][cds-layout*="align:left"] {
  justify-content: start;
}
[cds-layout~=grid][cds-layout*="align:vertical-stretch"] {
  align-items: stretch;
  align-content: stretch;
}
[cds-layout~=grid][cds-layout*="align:horizontal-stretch"] {
  justify-items: stretch;
  justify-content: stretch;
}
[cds-layout~=grid][cds-layout*="align:stretch"] {
  align-items: stretch;
  align-content: stretch;
  justify-items: stretch;
  justify-content: stretch;
}
[cds-layout~=grid][cds-layout*="align:vertical-center"] {
  align-items: center;
  align-content: center;
}
[cds-layout~=grid][cds-layout*="align:horizontal-center"] {
  justify-items: center;
  justify-content: center;
}
[cds-layout~=grid][cds-layout*="align:center"] {
  align-items: center;
  align-content: center;
  justify-items: center;
  justify-content: center;
}

@media (min-width: 576px) {
  [cds-layout*="cols@xs:1"] > * {
    grid-column: span 1/span 1;
  }

  [cds-layout*="rows@xs:1"] > * {
    grid-row: span 1/span 1;
  }

  [cds-layout*="cols@xs:2"] > * {
    grid-column: span 2/span 2;
  }

  [cds-layout*="rows@xs:2"] > * {
    grid-row: span 2/span 2;
  }

  [cds-layout*="cols@xs:3"] > * {
    grid-column: span 3/span 3;
  }

  [cds-layout*="rows@xs:3"] > * {
    grid-row: span 3/span 3;
  }

  [cds-layout*="cols@xs:4"] > * {
    grid-column: span 4/span 4;
  }

  [cds-layout*="rows@xs:4"] > * {
    grid-row: span 4/span 4;
  }

  [cds-layout*="cols@xs:5"] > * {
    grid-column: span 5/span 5;
  }

  [cds-layout*="rows@xs:5"] > * {
    grid-row: span 5/span 5;
  }

  [cds-layout*="cols@xs:6"] > * {
    grid-column: span 6/span 6;
  }

  [cds-layout*="rows@xs:6"] > * {
    grid-row: span 6/span 6;
  }

  [cds-layout*="cols@xs:7"] > * {
    grid-column: span 7/span 7;
  }

  [cds-layout*="rows@xs:7"] > * {
    grid-row: span 7/span 7;
  }

  [cds-layout*="cols@xs:8"] > * {
    grid-column: span 8/span 8;
  }

  [cds-layout*="rows@xs:8"] > * {
    grid-row: span 8/span 8;
  }

  [cds-layout*="cols@xs:9"] > * {
    grid-column: span 9/span 9;
  }

  [cds-layout*="rows@xs:9"] > * {
    grid-row: span 9/span 9;
  }

  [cds-layout*="cols@xs:10"] > * {
    grid-column: span 10/span 10;
  }

  [cds-layout*="rows@xs:10"] > * {
    grid-row: span 10/span 10;
  }

  [cds-layout*="cols@xs:11"] > * {
    grid-column: span 11/span 11;
  }

  [cds-layout*="rows@xs:11"] > * {
    grid-row: span 11/span 11;
  }

  [cds-layout*="cols@xs:12"] > * {
    grid-column: span 12/span 12;
  }

  [cds-layout*="rows@xs:12"] > * {
    grid-row: span 12/span 12;
  }
}
@media (min-width: 768px) {
  [cds-layout*="cols@sm:1"] > * {
    grid-column: span 1/span 1;
  }

  [cds-layout*="rows@sm:1"] > * {
    grid-row: span 1/span 1;
  }

  [cds-layout*="cols@sm:2"] > * {
    grid-column: span 2/span 2;
  }

  [cds-layout*="rows@sm:2"] > * {
    grid-row: span 2/span 2;
  }

  [cds-layout*="cols@sm:3"] > * {
    grid-column: span 3/span 3;
  }

  [cds-layout*="rows@sm:3"] > * {
    grid-row: span 3/span 3;
  }

  [cds-layout*="cols@sm:4"] > * {
    grid-column: span 4/span 4;
  }

  [cds-layout*="rows@sm:4"] > * {
    grid-row: span 4/span 4;
  }

  [cds-layout*="cols@sm:5"] > * {
    grid-column: span 5/span 5;
  }

  [cds-layout*="rows@sm:5"] > * {
    grid-row: span 5/span 5;
  }

  [cds-layout*="cols@sm:6"] > * {
    grid-column: span 6/span 6;
  }

  [cds-layout*="rows@sm:6"] > * {
    grid-row: span 6/span 6;
  }

  [cds-layout*="cols@sm:7"] > * {
    grid-column: span 7/span 7;
  }

  [cds-layout*="rows@sm:7"] > * {
    grid-row: span 7/span 7;
  }

  [cds-layout*="cols@sm:8"] > * {
    grid-column: span 8/span 8;
  }

  [cds-layout*="rows@sm:8"] > * {
    grid-row: span 8/span 8;
  }

  [cds-layout*="cols@sm:9"] > * {
    grid-column: span 9/span 9;
  }

  [cds-layout*="rows@sm:9"] > * {
    grid-row: span 9/span 9;
  }

  [cds-layout*="cols@sm:10"] > * {
    grid-column: span 10/span 10;
  }

  [cds-layout*="rows@sm:10"] > * {
    grid-row: span 10/span 10;
  }

  [cds-layout*="cols@sm:11"] > * {
    grid-column: span 11/span 11;
  }

  [cds-layout*="rows@sm:11"] > * {
    grid-row: span 11/span 11;
  }

  [cds-layout*="cols@sm:12"] > * {
    grid-column: span 12/span 12;
  }

  [cds-layout*="rows@sm:12"] > * {
    grid-row: span 12/span 12;
  }
}
@media (min-width: 992px) {
  [cds-layout*="cols@md:1"] > * {
    grid-column: span 1/span 1;
  }

  [cds-layout*="rows@md:1"] > * {
    grid-row: span 1/span 1;
  }

  [cds-layout*="cols@md:2"] > * {
    grid-column: span 2/span 2;
  }

  [cds-layout*="rows@md:2"] > * {
    grid-row: span 2/span 2;
  }

  [cds-layout*="cols@md:3"] > * {
    grid-column: span 3/span 3;
  }

  [cds-layout*="rows@md:3"] > * {
    grid-row: span 3/span 3;
  }

  [cds-layout*="cols@md:4"] > * {
    grid-column: span 4/span 4;
  }

  [cds-layout*="rows@md:4"] > * {
    grid-row: span 4/span 4;
  }

  [cds-layout*="cols@md:5"] > * {
    grid-column: span 5/span 5;
  }

  [cds-layout*="rows@md:5"] > * {
    grid-row: span 5/span 5;
  }

  [cds-layout*="cols@md:6"] > * {
    grid-column: span 6/span 6;
  }

  [cds-layout*="rows@md:6"] > * {
    grid-row: span 6/span 6;
  }

  [cds-layout*="cols@md:7"] > * {
    grid-column: span 7/span 7;
  }

  [cds-layout*="rows@md:7"] > * {
    grid-row: span 7/span 7;
  }

  [cds-layout*="cols@md:8"] > * {
    grid-column: span 8/span 8;
  }

  [cds-layout*="rows@md:8"] > * {
    grid-row: span 8/span 8;
  }

  [cds-layout*="cols@md:9"] > * {
    grid-column: span 9/span 9;
  }

  [cds-layout*="rows@md:9"] > * {
    grid-row: span 9/span 9;
  }

  [cds-layout*="cols@md:10"] > * {
    grid-column: span 10/span 10;
  }

  [cds-layout*="rows@md:10"] > * {
    grid-row: span 10/span 10;
  }

  [cds-layout*="cols@md:11"] > * {
    grid-column: span 11/span 11;
  }

  [cds-layout*="rows@md:11"] > * {
    grid-row: span 11/span 11;
  }

  [cds-layout*="cols@md:12"] > * {
    grid-column: span 12/span 12;
  }

  [cds-layout*="rows@md:12"] > * {
    grid-row: span 12/span 12;
  }
}
@media (min-width: 1200px) {
  [cds-layout*="cols@lg:1"] > * {
    grid-column: span 1/span 1;
  }

  [cds-layout*="rows@lg:1"] > * {
    grid-row: span 1/span 1;
  }

  [cds-layout*="cols@lg:2"] > * {
    grid-column: span 2/span 2;
  }

  [cds-layout*="rows@lg:2"] > * {
    grid-row: span 2/span 2;
  }

  [cds-layout*="cols@lg:3"] > * {
    grid-column: span 3/span 3;
  }

  [cds-layout*="rows@lg:3"] > * {
    grid-row: span 3/span 3;
  }

  [cds-layout*="cols@lg:4"] > * {
    grid-column: span 4/span 4;
  }

  [cds-layout*="rows@lg:4"] > * {
    grid-row: span 4/span 4;
  }

  [cds-layout*="cols@lg:5"] > * {
    grid-column: span 5/span 5;
  }

  [cds-layout*="rows@lg:5"] > * {
    grid-row: span 5/span 5;
  }

  [cds-layout*="cols@lg:6"] > * {
    grid-column: span 6/span 6;
  }

  [cds-layout*="rows@lg:6"] > * {
    grid-row: span 6/span 6;
  }

  [cds-layout*="cols@lg:7"] > * {
    grid-column: span 7/span 7;
  }

  [cds-layout*="rows@lg:7"] > * {
    grid-row: span 7/span 7;
  }

  [cds-layout*="cols@lg:8"] > * {
    grid-column: span 8/span 8;
  }

  [cds-layout*="rows@lg:8"] > * {
    grid-row: span 8/span 8;
  }

  [cds-layout*="cols@lg:9"] > * {
    grid-column: span 9/span 9;
  }

  [cds-layout*="rows@lg:9"] > * {
    grid-row: span 9/span 9;
  }

  [cds-layout*="cols@lg:10"] > * {
    grid-column: span 10/span 10;
  }

  [cds-layout*="rows@lg:10"] > * {
    grid-row: span 10/span 10;
  }

  [cds-layout*="cols@lg:11"] > * {
    grid-column: span 11/span 11;
  }

  [cds-layout*="rows@lg:11"] > * {
    grid-row: span 11/span 11;
  }

  [cds-layout*="cols@lg:12"] > * {
    grid-column: span 12/span 12;
  }

  [cds-layout*="rows@lg:12"] > * {
    grid-row: span 12/span 12;
  }
}
@media (min-width: 1440px) {
  [cds-layout*="cols@xl:1"] > * {
    grid-column: span 1/span 1;
  }

  [cds-layout*="rows@xl:1"] > * {
    grid-row: span 1/span 1;
  }

  [cds-layout*="cols@xl:2"] > * {
    grid-column: span 2/span 2;
  }

  [cds-layout*="rows@xl:2"] > * {
    grid-row: span 2/span 2;
  }

  [cds-layout*="cols@xl:3"] > * {
    grid-column: span 3/span 3;
  }

  [cds-layout*="rows@xl:3"] > * {
    grid-row: span 3/span 3;
  }

  [cds-layout*="cols@xl:4"] > * {
    grid-column: span 4/span 4;
  }

  [cds-layout*="rows@xl:4"] > * {
    grid-row: span 4/span 4;
  }

  [cds-layout*="cols@xl:5"] > * {
    grid-column: span 5/span 5;
  }

  [cds-layout*="rows@xl:5"] > * {
    grid-row: span 5/span 5;
  }

  [cds-layout*="cols@xl:6"] > * {
    grid-column: span 6/span 6;
  }

  [cds-layout*="rows@xl:6"] > * {
    grid-row: span 6/span 6;
  }

  [cds-layout*="cols@xl:7"] > * {
    grid-column: span 7/span 7;
  }

  [cds-layout*="rows@xl:7"] > * {
    grid-row: span 7/span 7;
  }

  [cds-layout*="cols@xl:8"] > * {
    grid-column: span 8/span 8;
  }

  [cds-layout*="rows@xl:8"] > * {
    grid-row: span 8/span 8;
  }

  [cds-layout*="cols@xl:9"] > * {
    grid-column: span 9/span 9;
  }

  [cds-layout*="rows@xl:9"] > * {
    grid-row: span 9/span 9;
  }

  [cds-layout*="cols@xl:10"] > * {
    grid-column: span 10/span 10;
  }

  [cds-layout*="rows@xl:10"] > * {
    grid-row: span 10/span 10;
  }

  [cds-layout*="cols@xl:11"] > * {
    grid-column: span 11/span 11;
  }

  [cds-layout*="rows@xl:11"] > * {
    grid-row: span 11/span 11;
  }

  [cds-layout*="cols@xl:12"] > * {
    grid-column: span 12/span 12;
  }

  [cds-layout*="rows@xl:12"] > * {
    grid-row: span 12/span 12;
  }
}
@media (min-width: 576px) {
  [cds-layout*="col@xs:1"] {
    grid-column: span 1/span 1 !important;
  }

  [cds-layout*="row@xs:1"] {
    grid-row: span 1/span 1 !important;
  }

  [cds-layout*="col@xs:2"] {
    grid-column: span 2/span 2 !important;
  }

  [cds-layout*="row@xs:2"] {
    grid-row: span 2/span 2 !important;
  }

  [cds-layout*="col@xs:3"] {
    grid-column: span 3/span 3 !important;
  }

  [cds-layout*="row@xs:3"] {
    grid-row: span 3/span 3 !important;
  }

  [cds-layout*="col@xs:4"] {
    grid-column: span 4/span 4 !important;
  }

  [cds-layout*="row@xs:4"] {
    grid-row: span 4/span 4 !important;
  }

  [cds-layout*="col@xs:5"] {
    grid-column: span 5/span 5 !important;
  }

  [cds-layout*="row@xs:5"] {
    grid-row: span 5/span 5 !important;
  }

  [cds-layout*="col@xs:6"] {
    grid-column: span 6/span 6 !important;
  }

  [cds-layout*="row@xs:6"] {
    grid-row: span 6/span 6 !important;
  }

  [cds-layout*="col@xs:7"] {
    grid-column: span 7/span 7 !important;
  }

  [cds-layout*="row@xs:7"] {
    grid-row: span 7/span 7 !important;
  }

  [cds-layout*="col@xs:8"] {
    grid-column: span 8/span 8 !important;
  }

  [cds-layout*="row@xs:8"] {
    grid-row: span 8/span 8 !important;
  }

  [cds-layout*="col@xs:9"] {
    grid-column: span 9/span 9 !important;
  }

  [cds-layout*="row@xs:9"] {
    grid-row: span 9/span 9 !important;
  }

  [cds-layout*="col@xs:10"] {
    grid-column: span 10/span 10 !important;
  }

  [cds-layout*="row@xs:10"] {
    grid-row: span 10/span 10 !important;
  }

  [cds-layout*="col@xs:11"] {
    grid-column: span 11/span 11 !important;
  }

  [cds-layout*="row@xs:11"] {
    grid-row: span 11/span 11 !important;
  }

  [cds-layout*="col@xs:12"] {
    grid-column: span 12/span 12 !important;
  }

  [cds-layout*="row@xs:12"] {
    grid-row: span 12/span 12 !important;
  }
}
@media (min-width: 768px) {
  [cds-layout*="col@sm:1"] {
    grid-column: span 1/span 1 !important;
  }

  [cds-layout*="row@sm:1"] {
    grid-row: span 1/span 1 !important;
  }

  [cds-layout*="col@sm:2"] {
    grid-column: span 2/span 2 !important;
  }

  [cds-layout*="row@sm:2"] {
    grid-row: span 2/span 2 !important;
  }

  [cds-layout*="col@sm:3"] {
    grid-column: span 3/span 3 !important;
  }

  [cds-layout*="row@sm:3"] {
    grid-row: span 3/span 3 !important;
  }

  [cds-layout*="col@sm:4"] {
    grid-column: span 4/span 4 !important;
  }

  [cds-layout*="row@sm:4"] {
    grid-row: span 4/span 4 !important;
  }

  [cds-layout*="col@sm:5"] {
    grid-column: span 5/span 5 !important;
  }

  [cds-layout*="row@sm:5"] {
    grid-row: span 5/span 5 !important;
  }

  [cds-layout*="col@sm:6"] {
    grid-column: span 6/span 6 !important;
  }

  [cds-layout*="row@sm:6"] {
    grid-row: span 6/span 6 !important;
  }

  [cds-layout*="col@sm:7"] {
    grid-column: span 7/span 7 !important;
  }

  [cds-layout*="row@sm:7"] {
    grid-row: span 7/span 7 !important;
  }

  [cds-layout*="col@sm:8"] {
    grid-column: span 8/span 8 !important;
  }

  [cds-layout*="row@sm:8"] {
    grid-row: span 8/span 8 !important;
  }

  [cds-layout*="col@sm:9"] {
    grid-