body {
  background: #0f2a3d;
  font-family: 'Public Sans', sans-serif;
  padding: 24px;
}

.docs-outer-grid {
  margin-left: 0 !important;
  margin-top: 32px !important;
  padding: 0 !important;
  border-style: dotted;
}

.docs-inverse-container {
  background: #e5e7e6;
  padding: 24px;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #0f2a3d;
  }
}

/* not required for container queries -> just for coloring the example */
.docs-container-inline-size {
  container-type: inline-size;
  margin-top: 16px;
}

/* GRID STYLES */
@container (min-width: 0) and (max-width: 319px) {
  .docs-grid-colored-grid-container {
    background-color: #7c6674;
  }
}

@container (min-width: 320px) and (max-width: 703px) {
  .docs-grid-colored-grid-container {
    background-color: #735304;
  }
}

@container (min-width: 704px) and (max-width: 991px) {
  .docs-grid-colored-grid-container {
    background-color: #26722e;
  }
}

@container (min-width: 992px) and (max-width: 1279px) {
  .docs-grid-colored-grid-container {
    background-color: #104455;
  }
}

@container (min-width: 1280px) and (max-width: 1471px) {
  .docs-grid-colored-grid-container {
    background-color: #735304;
  }
}

@container (min-width: 1472px) and (max-width: 1759px) {
  .docs-grid-colored-grid-container {
    background-color: #6d3a10;
  }
}

@container (min-width: 1760px) {
  .docs-grid-colored-grid-container {
    background-color: #221825;
  }
}
