*{font-family:Space Grotesk}.card-wrapper{position:relative;display:flex;flex-direction:column;gap:1rem}.card{width:390px;height:205px;background-size:cover;background-position:center;position:relative;border-radius:8px;box-shadow:0 5px 20px #0003}.card.front{background-image:url(/images/bg-card-front.png);top:90px;left:115px}.card.back{background-image:url(/images/bg-card-back.png);top:100px;left:195px}#card-logo{width:70px;height:50px;z-index:1;margin-left:25px;margin-top:19px;object-fit:contain;object-position:center;filter:brightness(0) invert(1)}.card-number,.card-name,.card-expiry,.card-cvc{position:absolute;color:#fff}.card-number{top:120px;left:20px;letter-spacing:3px;font-size:24px;line-height:24px;font-weight:500;text-transform:uppercase}.card-name{bottom:20px;left:20px;font-size:15px;font-weight:200;letter-spacing:2px}.card-expiry{bottom:20px;right:20px;font-size:15px;font-weight:500;letter-spacing:2px}.card-cvc{top:90px;right:40px;font-size:15px;font-weight:500;letter-spacing:2px}.form{width:430px;display:flex;flex-direction:column;gap:1.5rem;padding:20px;background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a}.exp-date-wrapper{display:flex;justify-content:space-between;gap:3px}#Exp-date,#Exp-date-year{width:70px}#Exp-date::placeholder{text-align:center;font-size:18px;color:#acb4be}input::placeholder{color:#acb4be;font-size:1rem}.form-group{display:flex;flex-direction:column}.form-row{display:flex;gap:1rem}#cvc{width:230px}label{font-size:.9rem;margin-bottom:.5rem;color:#333;font-weight:500}input{padding:12px;border-radius:8px;border:1px solid #ccc;font-size:1rem;outline:none;transition:border .2s}input:active{border-color:#6448fe}input:focus{border-color:#6a5acd}.error-message{color:#ff5252;font-size:.75rem;margin-top:4px;display:block}.input.error{border:1px solid hsl(0,100%,66%)}button{padding:10px 20px;border:none;height:40px;font-size:1rem;font-weight:700;width:100%;background-color:#21092f;color:#fff;border-radius:5px}button:hover{cursor:pointer;background-color:#5c287e}.completed-state{box-shadow:0 4px 12px #0000001a;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem}.completed-state img{margin-top:8px;width:90px}.completed-state h2{font-size:1.5rem;color:#21092f;letter-spacing:2.5px}.completed-state p{font-size:1rem;color:#acb4be;text-align:center}@media (max-width: 768px){.card.front{z-index:1;top:137px;left:200px;box-shadow:10px 10px 57px -13px #000000bf}.card.back{top:-200px;left:150px}.card-number,.card-name,.card-expiry,.card-cvc{font-size:14px}.card-number{font-size:24px;top:130px;left:20px}.card-name{bottom:15px;left:20px;font-weight:200}.card-expiry{bottom:15px;right:20px}.card-cvc{top:90px;right:40px}.attribution{margin-top:60px;padding:20px}}@media (min-width: 320px) and (max-width: 480px){.card-display{width:100%;height:30vh}.card{width:260px;height:150px}.card-wrapper{display:flex;gap:0}.card.back{top:-100px;left:40px;box-shadow:10px 10px 57px -13px #000000bf}.card.front{top:140px;z-index:1;left:10px;box-shadow:10px 10px 57px -13px #000000bf}.form{width:310px;padding:20px;margin-top:60px}.card-number{font-size:17px;top:90px}.card-cvc{top:64px;right:25px}.card-name{font-weight:300;font-size:12px}.card-expiry{font-weight:200;font-size:12px}#cvc{width:115px}}*{margin:0;padding:0;box-sizing:border-box}.container{display:flex;width:100%;height:100vh;flex-direction:row}.card-display{width:30vw;height:100vh;background:url(/images/bg-main-desktop.png) no-repeat center center/cover;margin:0}.form-section{width:70vw;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#fff}@media (width: 1024px){.card.back{top:200px;left:70px}.card.front{top:180px;left:40px}.form{margin-left:80px}}@media (max-width: 768px){.container{flex-direction:column;align-items:center}.card-display{width:100%;height:40vh;background:url(/images/bg-main-mobile.png) no-repeat center center/cover}}