.dui-grid {
  --dui-grid-tmp-cols: 1;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(var(--dui-grid-tmp-cols, 1), 1fr);
}
.dui-grid--xxs-1 {
  --dui-grid-tmp-cols: 1;
}
.dui-grid--xxs-2 {
  --dui-grid-tmp-cols: 2;
}
.dui-grid--xxs-3 {
  --dui-grid-tmp-cols: 3;
}
.dui-grid--xxs-4 {
  --dui-grid-tmp-cols: 4;
}
.dui-grid--xxs-5 {
  --dui-grid-tmp-cols: 5;
}
.dui-grid--xxs-6 {
  --dui-grid-tmp-cols: 6;
}
.dui-grid--xxs-7 {
  --dui-grid-tmp-cols: 7;
}
.dui-grid--xxs-8 {
  --dui-grid-tmp-cols: 8;
}
.dui-grid--xxs-9 {
  --dui-grid-tmp-cols: 9;
}
.dui-grid--xxs-10 {
  --dui-grid-tmp-cols: 10;
}
.dui-grid--xxs-11 {
  --dui-grid-tmp-cols: 11;
}
.dui-grid--xxs-12 {
  --dui-grid-tmp-cols: 12;
}
@media (min-width: 368px) {
  .dui-grid--xs-1 {
    --dui-grid-tmp-cols: 1;
  }
}
@media (min-width: 368px) {
  .dui-grid--xs-2 {
    --dui-grid-tmp-cols: 2;
  }
}
@media (min-width: 368px) {
  .dui-grid--xs-3 {
    --dui-grid-tmp-cols: 3;
  }
}
@media (min-width: 368px) {
  .dui-grid--xs-4 {
    --dui-grid-tmp-cols: 4;
  }
}
@media (min-width: 368px) {
  .dui-grid--xs-5 {
    --dui-grid-tmp-cols: 5;
  }
}
@media (min-width: 368px) {
  .dui-grid--xs-6 {
    --dui-grid-tmp-cols: 6;
  }
}
@media (min-width: 368px) {
  .dui-grid--xs-7 {
    --dui-grid-tmp-cols: 7;
  }
}
@media (min-width: 368px) {
  .dui-grid--xs-8 {
    --dui-grid-tmp-cols: 8;
  }
}
@media (min-width: 368px) {
  .dui-grid--xs-9 {
    --dui-grid-tmp-cols: 9;
  }
}
@media (min-width: 368px) {
  .dui-grid--xs-10 {
    --dui-grid-tmp-cols: 10;
  }
}
@media (min-width: 368px) {
  .dui-grid--xs-11 {
    --dui-grid-tmp-cols: 11;
  }
}
@media (min-width: 368px) {
  .dui-grid--xs-12 {
    --dui-grid-tmp-cols: 12;
  }
}
@media (min-width: 576px) {
  .dui-grid--s-1 {
    --dui-grid-tmp-cols: 1;
  }
}
@media (min-width: 576px) {
  .dui-grid--s-2 {
    --dui-grid-tmp-cols: 2;
  }
}
@media (min-width: 576px) {
  .dui-grid--s-3 {
    --dui-grid-tmp-cols: 3;
  }
}
@media (min-width: 576px) {
  .dui-grid--s-4 {
    --dui-grid-tmp-cols: 4;
  }
}
@media (min-width: 576px) {
  .dui-grid--s-5 {
    --dui-grid-tmp-cols: 5;
  }
}
@media (min-width: 576px) {
  .dui-grid--s-6 {
    --dui-grid-tmp-cols: 6;
  }
}
@media (min-width: 576px) {
  .dui-grid--s-7 {
    --dui-grid-tmp-cols: 7;
  }
}
@media (min-width: 576px) {
  .dui-grid--s-8 {
    --dui-grid-tmp-cols: 8;
  }
}
@media (min-width: 576px) {
  .dui-grid--s-9 {
    --dui-grid-tmp-cols: 9;
  }
}
@media (min-width: 576px) {
  .dui-grid--s-10 {
    --dui-grid-tmp-cols: 10;
  }
}
@media (min-width: 576px) {
  .dui-grid--s-11 {
    --dui-grid-tmp-cols: 11;
  }
}
@media (min-width: 576px) {
  .dui-grid--s-12 {
    --dui-grid-tmp-cols: 12;
  }
}
@media (min-width: 768px) {
  .dui-grid--m-1 {
    --dui-grid-tmp-cols: 1;
  }
}
@media (min-width: 768px) {
  .dui-grid--m-2 {
    --dui-grid-tmp-cols: 2;
  }
}
@media (min-width: 768px) {
  .dui-grid--m-3 {
    --dui-grid-tmp-cols: 3;
  }
}
@media (min-width: 768px) {
  .dui-grid--m-4 {
    --dui-grid-tmp-cols: 4;
  }
}
@media (min-width: 768px) {
  .dui-grid--m-5 {
    --dui-grid-tmp-cols: 5;
  }
}
@media (min-width: 768px) {
  .dui-grid--m-6 {
    --dui-grid-tmp-cols: 6;
  }
}
@media (min-width: 768px) {
  .dui-grid--m-7 {
    --dui-grid-tmp-cols: 7;
  }
}
@media (min-width: 768px) {
  .dui-grid--m-8 {
    --dui-grid-tmp-cols: 8;
  }
}
@media (min-width: 768px) {
  .dui-grid--m-9 {
    --dui-grid-tmp-cols: 9;
  }
}
@media (min-width: 768px) {
  .dui-grid--m-10 {
    --dui-grid-tmp-cols: 10;
  }
}
@media (min-width: 768px) {
  .dui-grid--m-11 {
    --dui-grid-tmp-cols: 11;
  }
}
@media (min-width: 768px) {
  .dui-grid--m-12 {
    --dui-grid-tmp-cols: 12;
  }
}
@media (min-width: 992px) {
  .dui-grid--l-1 {
    --dui-grid-tmp-cols: 1;
  }
}
@media (min-width: 992px) {
  .dui-grid--l-2 {
    --dui-grid-tmp-cols: 2;
  }
}
@media (min-width: 992px) {
  .dui-grid--l-3 {
    --dui-grid-tmp-cols: 3;
  }
}
@media (min-width: 992px) {
  .dui-grid--l-4 {
    --dui-grid-tmp-cols: 4;
  }
}
@media (min-width: 992px) {
  .dui-grid--l-5 {
    --dui-grid-tmp-cols: 5;
  }
}
@media (min-width: 992px) {
  .dui-grid--l-6 {
    --dui-grid-tmp-cols: 6;
  }
}
@media (min-width: 992px) {
  .dui-grid--l-7 {
    --dui-grid-tmp-cols: 7;
  }
}
@media (min-width: 992px) {
  .dui-grid--l-8 {
    --dui-grid-tmp-cols: 8;
  }
}
@media (min-width: 992px) {
  .dui-grid--l-9 {
    --dui-grid-tmp-cols: 9;
  }
}
@media (min-width: 992px) {
  .dui-grid--l-10 {
    --dui-grid-tmp-cols: 10;
  }
}
@media (min-width: 992px) {
  .dui-grid--l-11 {
    --dui-grid-tmp-cols: 11;
  }
}
@media (min-width: 992px) {
  .dui-grid--l-12 {
    --dui-grid-tmp-cols: 12;
  }
}
@media (min-width: 1280px) {
  .dui-grid--xl-1 {
    --dui-grid-tmp-cols: 1;
  }
}
@media (min-width: 1280px) {
  .dui-grid--xl-2 {
    --dui-grid-tmp-cols: 2;
  }
}
@media (min-width: 1280px) {
  .dui-grid--xl-3 {
    --dui-grid-tmp-cols: 3;
  }
}
@media (min-width: 1280px) {
  .dui-grid--xl-4 {
    --dui-grid-tmp-cols: 4;
  }
}
@media (min-width: 1280px) {
  .dui-grid--xl-5 {
    --dui-grid-tmp-cols: 5;
  }
}
@media (min-width: 1280px) {
  .dui-grid--xl-6 {
    --dui-grid-tmp-cols: 6;
  }
}
@media (min-width: 1280px) {
  .dui-grid--xl-7 {
    --dui-grid-tmp-cols: 7;
  }
}
@media (min-width: 1280px) {
  .dui-grid--xl-8 {
    --dui-grid-tmp-cols: 8;
  }
}
@media (min-width: 1280px) {
  .dui-grid--xl-9 {
    --dui-grid-tmp-cols: 9;
  }
}
@media (min-width: 1280px) {
  .dui-grid--xl-10 {
    --dui-grid-tmp-cols: 10;
  }
}
@media (min-width: 1280px) {
  .dui-grid--xl-11 {
    --dui-grid-tmp-cols: 11;
  }
}
@media (min-width: 1280px) {
  .dui-grid--xl-12 {
    --dui-grid-tmp-cols: 12;
  }
}
@media (min-width: 1440px) {
  .dui-grid--xxl-1 {
    --dui-grid-tmp-cols: 1;
  }
}
@media (min-width: 1440px) {
  .dui-grid--xxl-2 {
    --dui-grid-tmp-cols: 2;
  }
}
@media (min-width: 1440px) {
  .dui-grid--xxl-3 {
    --dui-grid-tmp-cols: 3;
  }
}
@media (min-width: 1440px) {
  .dui-grid--xxl-4 {
    --dui-grid-tmp-cols: 4;
  }
}
@media (min-width: 1440px) {
  .dui-grid--xxl-5 {
    --dui-grid-tmp-cols: 5;
  }
}
@media (min-width: 1440px) {
  .dui-grid--xxl-6 {
    --dui-grid-tmp-cols: 6;
  }
}
@media (min-width: 1440px) {
  .dui-grid--xxl-7 {
    --dui-grid-tmp-cols: 7;
  }
}
@media (min-width: 1440px) {
  .dui-grid--xxl-8 {
    --dui-grid-tmp-cols: 8;
  }
}
@media (min-width: 1440px) {
  .dui-grid--xxl-9 {
    --dui-grid-tmp-cols: 9;
  }
}
@media (min-width: 1440px) {
  .dui-grid--xxl-10 {
    --dui-grid-tmp-cols: 10;
  }
}
@media (min-width: 1440px) {
  .dui-grid--xxl-11 {
    --dui-grid-tmp-cols: 11;
  }
}
@media (min-width: 1440px) {
  .dui-grid--xxl-12 {
    --dui-grid-tmp-cols: 12;
  }
}