@container css-chart (40rem <= width) and (width < 70rem){
  #x-axis css-text:nth-child(2n+1) { display: none; }
}
@container css-chart (width < 40rem){
  #x-axis css-text:not(:nth-child(4n)) { display: none; }
  #x-axis css-text { rotate: 0deg; }
}

.bar {
  --x1: calc(var(--offset) - .5);
  --y1: var(--max-y);
  --x2: calc(var(--offset) + .5);
  --y2: var(--min-y);
  &:nth-child(4n + 1), &:nth-child(4n + 2){
    background-color: #004d9106;
  }
  .top, .median, .bottom {
    --x: .5;
    --r: .5rem;
  }
  .connector {
    --x1: .5;
    --y1: var(--top);
    --x2: .5;
    --y2: var(--bottom);
    width: .4rem;
    background: linear-gradient(
      var(--top-color) 0%,
      white calc((var(--top) - var(--median)) / (var(--top) - var(--bottom)) * 100%),
      var(--bottom-color) 100%
    );
  }
  .top {
    --y: var(--top);
    background-color: var(--top-color);
  }
  .median {
    --y: var(--median);
    --r: .25rem;
    background-color: white;
    border: 2px solid var(--median-color);
    border-radius: 50%;
  }
  .bottom {
    --y: var(--bottom);
    background-color: var(--bottom-color);
  }
  .top-label, .bottom-label {
    --x: .5;
    color: #12324b;
    opacity: 0;
    transition: opacity .2s, translate .2s;
  }
  .top-label {
    --y: var(--top);
    translate: -50% calc(-100% - .2rem);
  }
  .bottom-label {
    --y: var(--bottom);
    translate: -50% .2rem;
  }
  &:hover {
    .top-label, .bottom-label { opacity: 1; }
    .top-label { translate: -50% calc(-100% - .6rem); }
    .bottom-label { translate: -50% .6rem; }
  }
}