.cardbox{padding:17px;border-radius:16px}.credit-card{position:relative;min-height:192px;aspect-ratio:1.667;padding:24px;border-radius:13px;overflow:hidden;background:#3fa77e;color:#274c63;box-shadow:0 10px 22px -12px #33332e48;display:flex;flex-direction:column;animation:card-enter .5s ease both;perspective:400px}.credit-card.dark{background:#33332e;color:#fff;box-shadow:0 10px 22px -12px #1b1b1975}.credit-card:after{content:'';position:absolute;width:150px;height:150px;border:1px solid currentColor;border-radius:50%;opacity:.035;right:-70px;bottom:-80px;box-shadow:0 0 0 30px currentColor;pointer-events:none}.credit-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.credit-card-network{font:800 23px "Geist",system-ui,sans-serif;letter-spacing:-.7px;animation:card-brand .5s .2s both}.credit-card-eye{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#c9a24b;color:inherit;transition:transform .2s,background .2s;flex-shrink:0}.dark .credit-card-eye{background:#33332e}.credit-card-eye:hover{transform:scale(1.07)}.credit-card-eye svg{width:17px;height:17px}.credit-card-number{font:500 19px "Geist",sans-serif;letter-spacing:1.5px;margin-top:12px;white-space:nowrap;animation:card-opacity .5s .35s both;font-variant-numeric:tabular-nums}.credit-card-bottom{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:24px;position:relative;z-index:1}.credit-card-label{font-size:10px;opacity:.75;margin-bottom:4px;letter-spacing:.2px}.credit-card-holder{font-size:12px;font-weight:700;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.credit-card-expiry{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}.credit-card-signature{font:700 9px "Geist",system-ui,sans-serif;letter-spacing:1.1px;position:absolute;bottom:9px;right:24px;opacity:.38}.credit-card-bottom>div{animation:card-enter .5s .45s both}.credit-card-bottom>div:last-child{animation-delay:.6s}.brand{font-size:25px;letter-spacing:-1px}.business{letter-spacing:2px;font-size:9px}@keyframes card-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes card-brand{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes card-opacity{from{opacity:0}to{opacity:1}}@media(max-width:1100px) and (min-width:751px){.credit-card{padding:17px;min-height:177px}.credit-card-number{font-size:14px;letter-spacing:1px}.credit-card-network{font-size:18px}.credit-card-holder{max-width:105px;font-size:10px}.credit-card-eye{width:28px;height:28px}}@media(max-width:750px){.credit-card{max-width:440px;margin:auto;width:100%;min-height:190px}.credit-card-holder{max-width:240px}.cardbox{padding:17px}}@media(prefers-reduced-motion:reduce){.credit-card,.credit-card-network,.credit-card-number,.credit-card-bottom>div{animation:none}.credit-card-eye{transition:none}}