.collections-grid {
  width: 100%;
  height: fit-content;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 30px;
  position: relative;

  .collections-grid__row {
    grid-template-columns: subgrid;
    grid-column: 1/-1;
    background: white;
    border-bottom: 1px solid black;

    .collections-grid__header {
      height: 100%;
      line-height: 30px;
      padding-inline: 10px;
      font: {
        size: 16px;
        weight: bold;
      }

      &:not(:last-child) {
        border-right: 2px solid black;
      }
    }

    .collections-grid__value {
      height: 100%;
      line-height: 30px;
      padding-inline: 10px;
      font: {
        size: 16px;
      }

      &:not(:last-child) {
        border-right: 2px solid black;
      }
    }

    &.header {
      background: gray;
      border-width: 2px;
      position: sticky;
      top: 0;
    }

    &.count-mismatch {
      background: rgb(256, 0, 0, 0.5);
    }
  }
}