.style-guide {
  overflow-y: hidden; /* Contain floating images. */
  position: relative; /* Reference for img.align-* */
}
.style-guide img {
  height: auto;
  max-width: 80%;
  display: block;
}
.style-guide img.align-left,
.style-guide img.align-right {
  margin-bottom: 1em;
  max-height: 24em;
  max-width: 25%;
}
.style-guide img.align-left {
  clear: left;
  float: left;
  margin-right: 1em;
}
.style-guide img.align-right {
  clear: right;
  float: right;
  margin-left: 1em;
}
.style-guide table {
  margin-bottom: 1em;
}
.style-guide td,
.style-guide th {
  border: 1px solid #B3B3B3;
  padding: .5em;
}
.style-guide .swatch {
  display: inline-block;
  line-height: 1;
  width: 0.9em;
  height: 0.9em;
  background-color: currentColor;
  border: 1px solid #565656;
  border-radius: 2px;
}

.style-guide .palette-overview {
  display: grid;
  grid-gap: 0.5em;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .style-guide .palette-overview { grid-template-columns: repeat(3, 1fr); } }
.style-guide .palette-overview > * { padding: 1em; }
.style-guide .palette-overview > .dark { color: #fff; }
.style-guide .palette-overview > .light { color: #000; }
.style-guide .palette-overview > .bordered { border: 1px solid #0004; }