.data-card {
  border-radius: var(--border-radius);
  overflow: hidden;
  color: var(--color-navy-taupe);
  display: flex;
  flex-direction: column;
  flex: 1;

  &__label {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: var(--color-platinum);
    h2 {
      margin: 0;
    }
  }

  &__data {
    display: table;
    // background: var(--color-slate-blue--dark);
    background: var(--color-rich-black);
    overflow: hidden;
    padding: 0.5rem 1rem;
    width: 100%;

    &-label,
    &-value {
      padding: 0.5rem 0;
      display: table-cell;
      font-size: 0.8rem;
      color: var(--color-white);
    }

    &-label {
      text-transform: uppercase;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--color-white);
      opacity: 0.5;
      text-align: right;
      padding-right: 1rem;
      overflow-wrap: anywhere;
      hyphens: auto;
      width: 33%;
      min-width: 10rem;
    }

    &-value {
      padding-left: 0;
      width: 100%;
    }

    &-item {
      display: table-row;
    }
  }

  &--can-drag {
    cursor: grab;
  }

  &--can-click {
    cursor: pointer;
  }
}