*{margin:0;padding:0;box-sizing:border-box}.page{height:100vh;display:flex;flex-direction:column;font-family:"Space Grotesk",sans-serif}.header{width:100%;height:35vh;background-image:url(../images/bg-main-desktop.png);background-position:center;background-repeat:no-repeat;background-size:cover;margin-bottom:1rem}.card{display:flex;flex-direction:column;align-items:flex-end}.card__back{position:relative;transform:translate(-0.8rem, 2rem)}.card__back-view{width:270px}.card__cvc{position:absolute;top:4.1rem;left:12.5rem;font-size:.7rem;color:#fff}.card__front{position:relative;z-index:1;transform:translate(-5.5rem, -2.3rem)}.card__logo{position:absolute;width:4rem;top:1rem;left:1rem}.card__front-view{width:270px}.card__number{position:absolute;color:#fff;font-weight:500;font-size:1.3rem;top:5rem;left:1.2rem}.card__data-container{width:100%;position:absolute;top:7.2rem;display:flex;gap:4rem;justify-content:space-around;font-size:.7rem;color:#fff}.card__date-info{display:flex}.main-content{height:65vh;padding:1.5rem}.main-content__form{height:100%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}.main-content__form--active{display:none !important}.main-content__card-name,.main-content__card-number{width:20rem;padding:.63rem .63rem;border-radius:.63rem;border:1px solid #dedddf}.main-content__date-container{display:flex;justify-content:space-evenly}.main-content__card-date-wrap{display:flex;flex-wrap:wrap}.main-content__card-month,.main-content__card-year{width:4rem;margin-right:.7rem;padding:.63rem .63rem;border-radius:.63rem;border:1px solid #dedddf}.main-content__card-cvc-container{width:50%;display:flex;flex-direction:column;justify-content:flex-start}.main-content__card-cvc{padding:.63rem .63rem;border-radius:.63rem;border:1px solid #dedddf}.main-content__button{width:20rem;padding:.63rem .63rem;border-radius:.63rem;color:#fff;background-color:#21092f;border:none}.error{visibility:hidden;display:block;height:17px}.error--active{visibility:visible;display:block;color:#ff5252;font-size:.8rem}p{margin-bottom:.5rem}.user-data:focus{outline:none;background:linear-gradient(white, white) padding-box,linear-gradient(hsl(249, 99%, 64%), hsl(278, 94%, 30%)) border-box;border-radius:10px;border:1px solid rgba(0,0,0,0)}.user-data::-moz-placeholder{color:#dedddf;font-weight:600}.user-data::placeholder{color:#dedddf;font-weight:600}.user-data--active{border:1px solid #ff5252}.submited{display:none}.submited--active{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3rem}.submited__checkmark{width:5rem}.submited__details{color:#8e8593}.submited__button{width:20rem;padding:.63rem .63rem;border-radius:.63rem;color:#fff;background-color:#21092f;border:none}@media screen and (min-width: 1024px){.page{flex-direction:row}.header{width:45%;height:100vh;background-image:url(../images/bg-main-mobile.png);margin:0}.card{transform:translate(15rem, 20rem)}.card__front{transform:translate(-5rem, -25rem);pointer-events:none}.card__logo{width:6rem;top:2rem;left:2rem}.card__number{font-size:2.3rem;top:9.2rem;left:2rem}.card__data-container{top:unset;bottom:2rem;font-size:1.1rem;gap:10rem}.card__front-view{width:480px}.card__back{transform:translate(2rem, 10rem);pointer-events:none}.card__cvc{top:7.5rem;left:23.5rem;font-size:1.1rem}.card__back-view{width:480px}.main-content{width:100%;height:100vh;padding:16.5rem}.main-content__form--active{display:none !important}.main-content__card-name,.main-content__card-number,.main-content__button{width:25rem;padding:1rem 1rem;font-size:1.2rem}.main-content__card-name:hover,.main-content__card-number:hover,.main-content__button:hover{cursor:pointer}.main-content__date-container{width:25rem;justify-content:space-between}.main-content__card-date-wrap{flex-wrap:nowrap}.main-content__card-month,.main-content__card-year{width:5.2rem;margin-right:.53rem;padding:1rem 1rem;font-size:1.2rem}.main-content__card-month:hover,.main-content__card-year:hover{cursor:pointer}.main-content__card-cvc{padding:1rem 1rem;font-size:1.2rem}.main-content__card-cvc:hover{cursor:pointer}.submited{display:none}.submited--active{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem}.submited__checkmark{width:7rem}.submited__thanks{font-size:2.5rem}.submited__details{font-size:1.2rem}.submited__button{width:25rem;padding:1rem 1rem;font-size:1.2rem}.submited__button:hover{cursor:pointer}}/*# sourceMappingURL=style.min.css.map */