.dui-footer {
  --dui-color-body: var(--dui-footer-text-color, var(--dui-color-white, #ffffff));
  padding: 2.5rem 0;
  background-color: var(--dui-footer-bg-color, #111827);
}
.dui-footer__container {
  display: grid;
  gap: 1rem;
}
.dui-footer__region--1 {
  grid-area: r1;
}
.dui-footer__region--2 {
  grid-area: r2;
}
.dui-footer__region--3 {
  grid-area: r3;
}
.dui-footer__region--4 {
  grid-area: r4;
}
@media (min-width: 0) {
  .dui-footer__container {
    grid-template-areas: "r1" "r2" "r4" "r3";
  }
}
@media (min-width: 576px) {
  .dui-footer__container {
    grid-template-areas: "r1 r2" "r3 r4";
  }
}
@media (min-width: 768px) {
  .dui-footer__container {
    grid-template-areas: "r1 r2" "r3 r4";
  }
}