.d-credit-card {
  --#{$prefix}d-credit-card-bg:
    radial-gradient(circle at 25% 10%, rgba(255, 255, 255, .12), transparent 18%), linear-gradient(
      135deg,
      #ff9a8b 0%,
      #ffb199 12%,
      #caa6ff 40%,
      #7aa7ff 65%,
      #39e6d6 100%
    );
  --#{$prefix}d-credit-card-aspect-ratio: 16/9;
  --#{$prefix}d-credit-card-chip-bg: rgba(255, 255, 255, .12);
  --#{$prefix}d-credit-card-font-family-number: var(--#{$prefix}font-monospace);
  --#{$prefix}d-credit-card-padding: var(--#{$prefix}ref-spacer-4);
  --#{$prefix}d-credit-card-number-size: inherit;
  --#{$prefix}d-credit-card-chip-size: 30px;
  flex-direction: column;

  aspect-ratio: var(--#{$prefix}d-credit-card-aspect-ratio);
  padding: var(--#{$prefix}d-credit-card-padding);
  background: var(--#{$prefix}d-credit-card-bg);
  --#{$prefix}d-credit-card-logo-size: 22%;

  > * {
    display: flex;
    align-items: center;
  }

  .d-credit-card-details {
    .name {
      font-size: var(--#{$prefix}ref-fs-6);
    }
    .date {
      font-size: var(--#{$prefix}ref-fs-6);
    }
  }

  .d-credit-card-logo {
    width: var(--#{$prefix}d-credit-card-logo-size);
  }

  .d-credit-card-chip {
    background: var(--#{$prefix}d-credit-card-chip-bg);
  }

  .d-credit-card-chip-image {
    width: var(--#{$prefix}d-credit-card-chip-size);
  }

  .d-credit-card-number {
    font-family: var(--#{$prefix}d-credit-card-font-family-number);
    font-size: var(--#{$prefix}d-credit-card-number-size);
  }

  &.is-vertical {
    --#{$prefix}d-credit-card-aspect-ratio: 9/16;
    --#{$prefix}d-credit-card-number-size: var(--#{$prefix}ref-spacer-3);
    --#{$prefix}d-credit-card-logo-size: 30%;
  }

  .d-credit-card-header {
    align-items: center;
    justify-content: space-between;
    min-height: 45px;
  }

}