.dl-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding-block: 1px;
  dt {
    padding: 0;
  }
  dd {
    flex: 1;
    font-size: var(--font-size-2);
    line-height: var(--line-height-2);
    color: var(--color-text-base-subtle);
  }
  .icon {
    width: 14px;
    height: 14px;
    fill: var(--grey-4);
  }
}
.dl-list-item {
  display: flex;
  border-bottom: 1px solid var(--color-border-base-middle);
  padding-block: var(--spacing-8);
  &.no-border {
    border-bottom: none;
  }
  &.sm {
    padding-block: var(--spacing-6);
    dt {
      font-size: var(--font-size-3);
      min-width: 72px;
    }
    dd {
      font-size: var(--font-size-4);
      padding-left: var(--spacing-4);
    }
    &.vertical {
      dt {
        color: var(--color-text-base-low);
      }
      gap: var(--spacing-1);
    }
  }
  dt {
    padding-block: var(--spacing-1);
    min-width: 80px;
    font-size: var(--font-size-4);
    font-weight: bold;
    color: var(--color-text-primary);
  }
  dd {
    padding-left: var(--spacing-6);
    font-size: var(--font-size-5);
    line-height: var(--line-height-4);
    color: var(--color-text-base-middle);
    flex: 1;
  }
  &.vertical {
    flex-direction: column;
    gap: var(--spacing-4);
    dt {
      padding-block: 0;
    }
    dd {
      padding-inline: 0;
    }
  }
  &:last-child {
    border-bottom: none;
  }
}