.card-background {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .card-background .yellow,
  .card-background .purple {
    position: absolute;
    inset: 0;
    display: block;
    background: var(--base-color-purple);
    pointer-events: none;
    z-index: 1;
    transform-origin: left bottom;
    transition: 750ms var(--ttf-2);
    transition-property: background-color, transform;
  }
  
  body.view-b2b .card-background .purple {
    background: var(--base-color-green);
  }

  .card-background .purple > span {
    position: absolute;
    top: -3px;
    right: 5px;
    color: var(--base-color-white);
    line-height: 1;
    font-size: 40px;
  }

  .card-background .yellow {
    background: var(--base-color-lightest-gray);
    z-index: 2;
  }
  
  body.view-b2b .card-background .yellow {
    background: var(--base-color-white);
  }

  @media (hover: hover) {
  
    a:is(:hover, :focus) .card-background .yellow {
      background: var(--base-color-yellow);
    }

    a:is(:hover, :focus) .card-background .purple {
      transform: rotate(-3deg) translateY(-10px);
    }
    
    body.view-b2b a:is(:hover, :focus) .card-background .yellow {
      background: var(--base-color-white);
    }
  
  }