[data-block-meta] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
  gap: 1.5rem;
  min-width: 0;

  > div {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    justify-content: space-between;
    min-width: 0;

    > span {
      flex: 0 0 auto;
      color: var(--gray);
      font-size: var(--font-size-sm);
      line-height: var(--line-height-sm);
      text-transform: uppercase;
    }

    strong {
      min-width: 0;
      color: var(--white);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-strong);
      line-height: var(--line-height-sm);
      text-align: right;
      white-space: nowrap;
    }
  }
}

@media (max-width: 48rem) {
  [data-block-meta] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
