section.block.block-design-system .logos .logo .preview {
  background-color: var(--wp--preset--color--background-light);
  padding: 20px 15px;
  border-radius: 5px;
  float: none;
}
section.block.block-design-system .logos .logo .preview img {
  max-height: 100px;
}
section.block.block-design-system .colors .group {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--wp--preset--spacing--s);
  width: 100%;
  margin-bottom: var(--wp--preset--spacing--l);
}
section.block.block-design-system .colors .group .color-block {
  height: 100px;
  background-color: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  border-radius: 5px;
  cursor: pointer;
}
section.block.block-design-system .atoms {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--2-xl);
}
section.block.block-design-system .atoms .atom {
  padding-bottom: var(--wp--preset--spacing--2-xl);
  border-bottom: 1px solid black;
}
section.block.block-design-system .atoms .atom > h3 {
  margin-top: 0px;
}
section.block.block-design-system .atoms .atom > h4 {
  margin-bottom: var(--wp--preset--spacing--s);
}
section.block.block-design-system .atoms .atom .preview {
  background-color: var(--wp--preset--color--background-light);
  padding: 20px 15px;
  border-radius: 5px;
  float: none;
}
section.block.block-design-system .code {
  position: relative;
}
section.block.block-design-system .code:hover div.copy {
  top: 22px;
  right: 12px;
  opacity: 1;
}
section.block.block-design-system .code pre {
  padding: 0px;
  margin: 0px;
}
section.block.block-design-system .code .tooltip {
  position: absolute;
  top: 33%;
  right: 40px;
  font-size: 12px;
  font-family: var(--wp--preset--font-family--content);
}
section.block.block-design-system .code div.copy {
  content: "";
  position: absolute;
  top: 33%;
  right: 15px;
  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20MIT.%20Made%20by%20Lucide%20Contributors%3A%20https%3A%2F%2Flucide.dev%2F%20--%3E%3Csvg%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2224%22%20%20height%3D%2224%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22%23000000%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%2213%22%20height%3D%2213%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%3Cpath%20d%3D%22M5%2015H4a2%202%200%2001-2-2V4a2%202%200%20012-2h9a2%202%200%20012%202v1%22%20%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
  opacity: 0.75;
  transition: all 0.1s;
  cursor: pointer;
}
section.block.block-design-system code {
  background-color: var(--wp--preset--color--background-light);
  padding: 20px 15px;
  border-radius: 5px;
  font-size: 16px;
  display: block;
  position: relative;
  cursor: text;
}