@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap";*{box-sizing:border-box}:root{font-size:16px;--white: #fff;--light: hsl(270, 3%, 87%);--dark: hsl(279, 6%, 55%);--darker: hsl(278, 68%, 11%);--red: hsl(0, 100%, 66%)}body{margin:0;padding:0;font-family:Space Grotesk,sans-serif;letter-spacing:.05rem}.container{width:90%;margin:0 auto;max-width:500px}.flex--col{display:flex;flex-direction:column}.flex--row{display:flex}.items--center{align-items:center}.uppercase--text{text-transform:uppercase}.main{align-items:center}.hero{width:100%;padding:2rem 0 3rem;color:var(--white);letter-spacing:.1rem;background-image:url(/assets/bg-main-mobile-bEu5Eiq-.png);background-repeat:no-repeat;background-size:cover}.cards--container{position:relative;justify-content:flex-end}.card{position:relative;width:80%;display:flex;align-items:center;justify-content:center}.back--card{margin-right:0}.front--card{position:absolute;top:50%;left:0}.card__img{width:100%}.card--logo{width:3rem;position:absolute;top:-80%}.card__cvcNum{position:absolute;top:45%;right:10%;font-size:.75rem}.card__details{position:absolute;top:45%;justify-content:space-between;height:40%}.card__cardNumber{font-size:1.25rem}.card__cardName__expiryDate{font-size:.75rem}@media (max-width: 425px){.card__cardNumber{font-size:1.1rem}}@media (max-width:390px){:root{font-size:13px}}.card__cardName__expiryDate{width:100%;justify-content:space-between}.card__cardName{text-transform:uppercase}.after__submit--content{padding-top:25vmin}.complete--icon{width:5rem}@media (min-width:800px){:root{font-size:16px}.main{flex-direction:row;align-items:center;justify-content:space-between}.hero{width:30%;background-image:url(/assets/bg-main-desktop-BbGFZp7V.png);height:100vh;background-size:fill;display:flex;align-items:center}.cards--container{flex-direction:column}.card{width:100%}.back--card{margin-left:45%;margin-top:45%}.front--card{top:-15%;left:30%}.form--container,.after__submit--content{width:60%;padding:50px}}@media (min-width:800px) and (max-width:1050px){.card__cvcNum{font-size:.75rem}.card__cardNumber{font-size:1rem}.card__cardName__expiryDate{font-size:.7rem}}@media (min-width: 1100px){.card__cardNumber{font-size:1.15rem}}.form--container{padding-top:25vmin;padding-bottom:2.5rem}.form{justify-content:space-between;gap:1rem}.formItem__label{text-transform:uppercase;font-weight:500}.formItem__input{font-family:inherit;letter-spacing:inherit;border-radius:7px;border:1px solid var(--light);border-width:0 0 2px 0;padding:1rem;outline:none;transition:box-shadow .25s ease-out}.formItem__input:focus{box-shadow:0 7px 10px 1px #0000001a}.expiryDate__cvc{justify-content:space-between;width:100%}.expiryDate__container{width:60%}.expiryDate__input--container{justify-content:space-between;gap:1rem}.expiryDate{width:50%}.cvc__input--container{width:35%}.cvc__input{width:100%}.btn{border-radius:5px;margin:2rem auto 1rem;padding:1rem 2rem;border-width:1.75px;background-color:var(--darker);color:var(--white);font-family:inherit;font-weight:500;letter-spacing:inherit;cursor:pointer;width:100%;transition:all .25s ease-in-out}.btn:hover{background-color:var(--light);color:var(--darker);border-color:var(--darker)}.error--msg{color:var(--red);font-size:.75rem;margin:0}