*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{display:flex;align-items:center;justify-content:center;min-height:100vh;font-size:1rem;font-family:Ubuntu,sans-serif;letter-spacing:.125rem}@media (min-width: 768px){body{background-color:#000}}:root{--gradient-start: hsl(249, 99%, 64%);--gradient-end: hsl(278, 94%, 30%);--error-red: hsl(0, 100%, 66%);--white: hsl(0, 100%, 100%);--gray-200: hsl(270, 3%, 87%);--gray-400: hsl(212, 12%, 71%);--purple-950: hsl(278, 68%, 11%);--radius: .5rem }button{cursor:pointer;background-color:transparent;border:none;font-size:1.125rem}li{list-style-type:none}.err-border{border:1px solid var(--error-red)}label{font-size:.75rem;font-weight:700}img{display:block;width:100%;height:100%}.body{position:relative;background-color:var(--white);min-height:100vh}.body .left{background-image:url(/assets/bg-main-mobile-bEu5Eiq-.png);background-size:cover;background-position:center;background-repeat:no-repeat;width:100%;height:30vh}.body .right{position:static;background-color:var(--white);padding:3rem .8rem}.body .right .right-body{width:100%;min-width:375px;padding:0 1rem}.body .right .right-body form .input-box{margin:.5rem 0 1.2rem}.body .right .right-body form .input-box input{width:100%;padding:.75rem;border:1px solid var(--gradient-start);border-radius:var(--radius);margin:.5rem 0 .2rem}.body .right .right-body form .input-box input.err-border{border-color:var(--error-red)}.body .right .right-body form .other-infos{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.body .right .right-body form .other-infos .exp-body .exp-date{display:flex;align-items:center;gap:.5rem}.body .right .right-body form .other-infos .exp-body .exp-date input{width:20%;padding:.75rem;border-radius:var(--radius);border:1px solid var(--gradient-start);margin-top:.5rem;width:50%}.body .right .right-body form .other-infos .exp-body .exp-date input.err-border{border-color:var(--error-red)}.body .right .right-body form .other-infos .cvc input{display:block;padding:.75rem;width:100%;margin-top:.5rem;border-radius:var(--radius);border:1px solid var(--gradient-start)}.body .right .right-body form .other-infos .cvc input.err-border{border-color:var(--error-red)}.body .right .right-body form button{width:100%;padding:1rem;background-color:var(--purple-950);border-radius:var(--radius);color:var(--white);margin-top:2.5rem}.body .right .right-body .thanks-msg{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem}.body .right .right-body .thanks-msg img{width:6rem;height:auto}.body .right .right-body .thanks-msg h1{margin:2rem 0 1rem}.body .right .right-body .thanks-msg p{color:var(--gray-400)}.body .right .right-body .thanks-msg button{width:100%;padding:1rem;background-color:var(--purple-950);border-radius:var(--radius);color:var(--white);margin-top:2.5rem}.body .right .err{font-size:.75rem;color:var(--error-red)}.body .card-front{position:absolute;top:14%;left:2rem;width:15rem;height:8rem;box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;border-radius:.5rem;z-index:99}.body .card-front .content img{position:absolute;top:.7rem;left:.7rem;width:2.5rem;height:auto}.body .card-front .content .card-bottom{position:absolute;top:70%;left:0rem;transform:translateY(-50%);color:var(--white);width:inherit;padding:1rem}.body .card-front .content .card-bottom .card-number{font-size:1.05rem}.body .card-front .content .card-bottom .card-detail{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;font-size:.5rem}.body .card-back{position:absolute;top:3%;right:3rem;box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;border-radius:.5rem;width:15rem;height:8rem}.body .card-back .content{position:absolute;top:50%;right:12%;transform:translateY(-60%);color:var(--white);font-size:.625rem}@media (min-width: 768px){.body{display:grid;grid-template-columns:3fr 6fr;width:1440px;height:900px}.body .left{background-image:url(/assets/bg-main-desktop-BbGFZp7V.png);height:100%}.body .right{position:relative}.body .right .right-body{position:absolute;top:50%;left:35%;transform:translateY(-50%);width:520px;height:520px;padding:4rem}.body .card-front{top:15%;left:12%;width:28rem;height:auto}.body .card-front .content img{position:absolute;top:1.5rem;left:1.5rem;width:5rem}.body .card-front .content .card-bottom{padding:2rem}.body .card-front .content .card-bottom .card-number{font-size:2rem}.body .card-front .content .card-bottom .card-detail{font-size:1rem}.body .card-back{top:50%;left:18%;width:28rem;height:auto}.body .card-back .content{font-size:1rem}}