.digit-viewcard-field-pair{
  @apply w-full flex-col;
  display: flex;
  height: fit-content;
  background-color: transparent;
  gap: theme(digitv2.spacers.spacer1);

  .digit-viewcard-label{
      @extend .typography.heading-s;
      font-family: theme(digitv2.fontFamily.sans);
      font-style: theme(digitv2.fontStyle.normal);
      font-weight: theme(digitv2.fontWeight.bold);
      line-height: theme(digitv2.lineHeight.lineheight1);
  
      @media (max-aspect-ratio: 9/16) {
        /* Media query for mobile */
        font-size: theme(digitv2.fontSize.heading-s.mobile);
      }
  
      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
        /* Media query for tablets */
        font-size: theme(digitv2.fontSize.heading-s.tablet);
      }
  
      @media (min-aspect-ratio: 3/4) {
        /* Media query for desktop */
        font-size: theme(digitv2.fontSize.heading-s.desktop);
      }
      @apply whitespace-pre-wrap break-words w-full;
      word-break: break-word;
      color: theme(digitv2.lightTheme.text-primary);
  }

  .digit-viewcard-value{
      @extend .typography.body-s;
      font-family: theme(digitv2.fontFamily.sans);
      font-style: theme(digitv2.fontStyle.normal);
      font-weight: theme(digitv2.fontWeight.regular);
      line-height: theme(digitv2.lineHeight.lineheight2);
  
      @media (max-aspect-ratio: 9/16) {
        /* Media query for mobile */
        font-size: theme(digitv2.fontSize.body-s.mobile);
      }
  
      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
        /* Media query for tablets */
        font-size: theme(digitv2.fontSize.body-s.tablet);
      }
  
      @media (min-aspect-ratio: 3/4) {
        /* Media query for desktop */
        font-size: theme(digitv2.fontSize.body-s.desktop);
      }
      @apply whitespace-pre-wrap break-words w-full;
      color: theme(digitv2.lightTheme.text-primary);
  }

  &.inline{
      flex-direction: row;

      @media (min-width: 48rem) {
          gap: theme(digitv2.spacers.spacer6);
      }
  
      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
          gap: theme(digitv2.spacers.spacer5);
      }
  
      @media (max-width: 30rem) {
          gap: theme(digitv2.spacers.spacer4);
      }

      .digit-viewcard-label{
          width: 20%;
      }

      .digit-viewcard-value{
          width: 80%;
      }

  }
}