/* Keep the bars the same width and bring their inner edges closer together. */
@media (min-width: 768px) {
  body.ui-study .revenue-chart {
    grid-template-columns: 3fr 6fr 6fr 6fr 3fr;
  }

  body.ui-study .revenue-difference > div {
    padding-inline: 0;
  }

  body.ui-study .difference-rule {
    min-height: 8px;
  }
}

/* The mobile delta occupies the space above the 75%-height market bar.
   Put its 90px measurement rule beside the label, from 21% up to 28%. */
@media (max-width: 767px) {
  body.ui-study .revenue-difference {
    justify-content: center;
    padding-inline-end: 20px;
  }

  body.ui-study .revenue-difference > div {
    width: 100%;
    padding: 6px 0;
  }

  body.ui-study .revenue-difference .difference-rule-top {
    display: block;
    position: absolute;
    top: 0;
    right: 6px;
    bottom: 0;
    left: auto;
    width: 1px;
    height: auto;
    min-height: 0;
    flex: none;
  }
}