[data-animation=sieve] {
  --base-unit: 10px;
  --height: calc(20 * var(--base-unit));
  position: relative;
  background: var(--background-color);
  height: var(--height);
  width: 100%;
}
[data-animation=sieve] [data-sieve] {
  position: absolute;
  left: 50%;
  height: 100%;
  width: 1px;
  background-color: var(--color);
}
[data-animation=sieve] [data-opening] {
  position: absolute;
  z-index: 2;
  height: calc(0.3 * var(--height));
  background-color: var(--background-color);
  left: 50%;
  width: 3px;
  top: 50%;
  transform: translateY(-50%);
}
[data-animation=sieve] [data-molecule] {
  display: block;
  position: absolute;
  border-radius: 100%;
  width: 6em;
  height: 6em;
  border: 1px solid;
}

.barchart {
  margin: var(--gutter4x) 0;
  display: block;
  --max-bar-height: 160px;
}
@media (max-width: 500px) {
  .barchart {
    font-size: var(--h4-font-size);
  }
}
.barchart [data-area] {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin: var(--paragraph-gap) 0;
}
.barchart [data-value] {
  flex: 0 0 33.33%;
  display: flex;
  flex-direction: column;
}
.barchart [data-label] {
  border-top: 1px solid;
  text-align: center;
  padding-top: var(--gutter-half);
}
.barchart [data-bar] {
  width: var(--gutter2x);
  background-color: var(--color);
  margin: 0 auto;
}
.barchart [data-number] {
  text-align: center;
  padding-bottom: var(--gutter-half);
}
.barchart [data-imperial] {
  display: none;
}
.barchart figcaption {
  text-align: center;
}

.barchart-horizontal {
  --bar-height: 23.8px;
  --max-bar-width: 140px;
  position: relative;
}
.barchart-horizontal figcaption {
  margin-bottom: var(--gutter2x);
}
.barchart-horizontal [data-area] {
  border-left: 1px solid;
  padding: var(--gutter2x) 0;
}
.barchart-horizontal [data-area] [data-value] {
  position: relative;
  margin-bottom: var(--bar-height);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
}
.barchart-horizontal [data-area] [data-value]:last-child {
  margin-bottom: 0;
}
.barchart-horizontal [data-area] [data-value] [data-imperial] {
  display: none;
}
.barchart-horizontal [data-area] [data-value] .bar {
  height: var(--bar-height);
  background-color: var(--color);
  display: block;
}
.barchart-horizontal [data-area] [data-value] .number {
  display: inline-block;
  padding-left: var(--gutter-half);
  padding-right: var(--gutter-half);
}
.barchart-horizontal [data-area] [data-value] .label {
  padding-left: var(--gutter-third);
}
@media (min-width: 980px) {
  .barchart-horizontal [data-area] [data-value] .number {
    padding-left: var(--gutter);
  }
}

.animation {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid;
}
.animation [data-element] {
  position: absolute;
}
.animation [data-element=o1],
.animation [data-element=c],
.animation [data-element=o2] {
  top: 15%;
}
.animation [data-element=o1] {
  left: 5%;
}
.animation [data-element=c] {
  left: 16%;
}
.animation [data-element=o2] {
  left: 27%;
}
.animation [data-element=bond1] {
  height: 1px;
  width: 5%;
  top: 15%;
  background-color: var(--color);
}
.animation [data-element=o3],
.animation [data-element=h1],
.animation [data-element=h2] {
  top: 45%;
}
.animation [data-element=h1] {
  left: 5%;
}
.animation [data-element=o3] {
  left: 16%;
}
.animation [data-element=h2] {
  left: 27%;
}
.animation [data-element=o4] {
  bottom: 15%;
}
.animation [data-element=h3],
.animation [data-element=h4] {
  bottom: 10%;
}
.animation [data-element=h3] {
  left: 5%;
}
.animation [data-element=o4] {
  left: 16%;
}
.animation [data-element=h4] {
  left: 27%;
}