/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
.iui-layouts-grid{
  --_iui-grid-column-count-mobile:12;
  --_iui-grid-column-count-tablet:12;
  --_iui-grid-column-count-small-monitor:12;
  --_iui-grid-column-count-monitor:12;
  display:grid;
  grid-template-columns:repeat(var(--_iui-grid-column-count-monitor), 1fr);
  grid-gap:var(--iui-size-l);
}
@media (max-width: 93.75rem){
  .iui-layouts-grid{
    grid-template-columns:repeat(var(--_iui-grid-column-count-small-monitor), 1fr);
    grid-gap:var(--iui-size-l);
  }
}
@media (max-width: 68.75rem){
  .iui-layouts-grid{
    grid-template-columns:repeat(var(--_iui-grid-column-count-tablet), 1fr);
    grid-gap:var(--iui-size-m);
  }
}
@media (max-width: 31.25rem){
  .iui-layouts-grid{
    grid-template-columns:repeat(var(--_iui-grid-column-count-mobile), 1fr);
    grid-gap:var(--iui-size-m);
  }
}

.iui-layouts-grid-item{
  --_iui-grid-item-column-span-mobile:span 1;
  --_iui-grid-item-column-span-tablet:span 1;
  --_iui-grid-item-column-span-small-monitor:span 1;
  --_iui-grid-item-column-span-monitor:span 1;
  --_iui-grid-item-column-start-mobile:auto;
  --_iui-grid-item-column-start-tablet:auto;
  --_iui-grid-item-column-start-small-monitor:auto;
  --_iui-grid-item-column-start-monitor:auto;
  max-width:100%;
  grid-column:var(--_iui-grid-item-column-start-monitor)/var(--_iui-grid-item-column-span-monitor);
}
@media (max-width: 93.75rem){
  .iui-layouts-grid-item{
    grid-column:var(--_iui-grid-item-column-start-small-monitor)/var(--_iui-grid-item-column-span-small-monitor);
  }
}
@media (max-width: 68.75rem){
  .iui-layouts-grid-item{
    grid-column:var(--_iui-grid-item-column-start-tablet)/var(--_iui-grid-item-column-span-tablet);
  }
}
@media (max-width: 31.25rem){
  .iui-layouts-grid-item{
    grid-column:var(--_iui-grid-item-column-start-mobile)/var(--_iui-grid-item-column-span-mobile);
  }
}