.sample {
  padding: 1rem;
  max-width: 75ch;
  margin-inline: auto;
}
.sample img { margin: 0; }

.sample_01 {
  display: flex;
  justify-content: center;
  gap: 8px;
  color-scheme: light dark;
  background-color: Canvas;
}

.sample_02 {
  margin-bottom: 24px;
  line-height: 1.3;
}
.sample_02 div {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px;
  background-color: Canvas;
  color: CanvasText;
  padding: 8px;
  align-items: center;
}
.sample_02 div img { width: 32px; }
.sample_02 div:nth-of-type(1) { color-scheme: light dark; }
.sample_02 div:nth-of-type(2) { color-scheme: light; }
.sample_02 div:nth-of-type(2) img { color-scheme: light; }
.sample_02 div:nth-of-type(3) { color-scheme: dark; }
.sample_02 div:nth-of-type(3) img { color-scheme: dark; }

.sample_03 div {
  background-color: Canvas;
  padding: 8px;
}
.sample_03 div:nth-of-type(1) { color-scheme: light; }
.sample_03 div:nth-of-type(2) { color-scheme: dark; }