$font-family: $font-family-primary;

.tmpl-block-container {
  padding: $space-md;
  background-color: $background-light;

  .tmpl-block__item {
    height: 100%;

    // The vertical rule, on EVERY block rather than only those with a block
    // before them.
    //
    // It used to hang off `.tmpl-block-container + .tmpl-block-container`, the
    // usual "n-1 separators for n items" pattern. That reads correctly only in
    // a single unbroken row, and these blocks sit in `prc-flx-container
    // prc-wrap`: as soon as the row wraps, the first block of the second row is
    // still an adjacent *sibling* in the DOM while being visually first in its
    // line, so it drew a leading rule against nothing — while the genuinely
    // first block had none. Two blocks in the same visual position, styled
    // differently, with the difference decided by DOM order rather than layout.
    //
    // CSS cannot see where a flex line breaks, so the choice is a rule on every
    // block or a rule that is wrong on some of them. Every block it is: the
    // treatment no longer depends on position at all, and the block becomes a
    // self-contained unit that can be reordered, wrapped or rendered alone
    // without its appearance changing.
    border-left: $border-width-sm solid $border-light;
    padding-left: $space-md;
    .tmpl-block__header {
      color: $text-default;
      font-family: $font-family;
      font-size: $font-size-sm;
      font-weight: $font-weight-regular;
      line-height: $line-height-sm;
      // The label-to-value gap, and the only gap when there is no rule.
      //
      // The border and the padding above it belong to the modifier alone.
      // `enableHeaderBorder` toggles `.tmpl-border-header` from the schema, but
      // the base rule declared the same border unconditionally and the modifier
      // then repeated all three declarations verbatim — so the flag could not
      // turn anything off, and every block header drew a rule whatever the
      // schema said.
      margin-bottom: $space-sm;

      &.tmpl-border-header {
        padding-bottom: $space-sm;
        border-bottom: $border-width-sm solid $border-light;
      }
    }

    .tmpl-block__value {
      color: $text-dark;
      font-family: $font-family;
      font-size: $font-size-lg;
      font-weight: $font-weight-medium;
      line-height: $line-height-md;
      word-break: break-word;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}