main{height:100vh;width:100%;display:flex;flex-direction:column;align-items:stretch;gap:3.125em}.card__side{display:grid;place-items:center;text-align:center;height:22em;font-size:.625rem;background-image:url(/assets/bg-main-mobile.9e839c55.png);background-repeat:no-repeat;background-size:cover;background-position:center;transition:height .8s}.cards{display:grid;place-items:center}.cards__card--front,.cards__card--back{width:70%}.card__front--img,.card__back--img{width:100%;position:relative}.card__front--info,.card__back--info{color:var(--white)}.cards__card--front{transform:translate(-10%,-20%);-webkit-transform:translate(-10%,-20%);-moz-transform:translate(-10%,-20%);-ms-transform:translate(-10%,-20%);-o-transform:translate(-10%,-20%)}.card__front--info{display:flex;justify-content:space-between;flex-direction:column;position:absolute;inset:0;padding:2em}.info__logo{width:5em}.info__number{font-size:1.3rem;font-weight:300}.info__name{text-transform:uppercase}.info__number--back,.info__name,.info__date{font-size:.8rem}.info__name--and--date{font-size:1.2rem;display:inline-flex;justify-content:space-between}.cards__card--back{transform:translate(10%,20%);-webkit-transform:translate(10%,20%);-moz-transform:translate(10%,20%);-ms-transform:translate(10%,20%);-o-transform:translate(10%,20%)}.card__back--info{position:absolute;top:43%;right:15%;font-size:1.2rem}.form__side{width:80%;margin:3.125em auto;font-size:1rem;background-color:var(--white)}@media (min-width: 48em){main{flex-direction:row}.card__side{height:100%}.cards__card--front,.cards__card--back{width:100%}.cards__card--front{transform:translate(20%,-100%);-webkit-transform:translate(20%,-100%);-moz-transform:translate(20%,-100%);-ms-transform:translate(20%,-100%);-o-transform:translate(20%,-100%)}.cards__card--back{transform:translate(35%,110%);-webkit-transform:translate(35%,110%);-moz-transform:translate(35%,110%);-ms-transform:translate(35%,110%);-o-transform:translate(35%,110%)}.info__number{font-size:1.4rem}.info__number--back,.info__name,.info__date{font-size:1.1rem}.form__side{display:grid;place-items:center;width:80%;margin:0}}@media (max-width: 23.5em){.info__number{font-size:.9rem}.info__number--back,.info__name,.info__date{font-size:.7rem}}input:invalid[focused=true]{border:1px solid var(--rederrors)}input:invalid[focused=true]~span{display:block}span{font-size:.625rem;color:var(--rederrors);display:none}.formInput{display:flex;flex-direction:column}form{width:95%;display:flex;flex-direction:column;padding:1.25em;gap:1.25em}label{display:block;margin-bottom:.3125em;text-transform:uppercase;font-weight:700;font-size:.8em;color:var(--verydarkviolet)}input{border:.125em solid var(--lightgrayishviolet);border-radius:.625em;padding:.9375em;width:100%}button{width:100%;padding:1.25em;text-transform:uppercase;border-radius:.625em;border:none;outline:none;cursor:pointer;color:var(--white);background-color:var(--verydarkviolet);animation:shake .5s}.form__cvc--and--dates{display:flex}.dates{width:60%}.dates__inputs{display:flex;gap:.9em;margin:0 1.25em 0 0}.cvc{width:40%}@media (min-width: 48em){form{width:60%}input,button{width:90%}.cvc{width:33%}.dates__inputs{display:flex}}.thankyou__section{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9375rem 0;font-size:.75rem;margin-top:3.125em;padding:0 2rem;-webkit-animation:animShowNext .5s cubic-bezier(.7,0,.3,1) both .11s;-moz-animation:animShowNext .5s cubic-bezier(.7,0,.3,1) both .11s;animation:animShowNext .5s cubic-bezier(.7,0,.3,1) both .11s}.check_icon>img{width:5em}@media (min-width: 48em){.thankyou__section>h2{font-size:2rem}.thankyou__section>p{font-size:.8rem}}*{margin:0;padding:0;box-sizing:border-box}body{height:100vh;font-family:Space Grotesk,sans-serif;font-weight:400}:root{--lineargradiendactiveone: hsl(249, 99%, 64%);--lineargradiendactivetwo: hsl(278, 94%, 30%);--rederrors: hsl(0, 100%, 66%);--white: hsl(0, 0%, 100%);--lightgrayishviolet: hsl(270, 3%, 87%);--darkgrayishviolet: hsl(279, 6%, 55%);--verydarkviolet: hsl(278, 68%, 11%)}form,.thankyou__section{-webkit-animation:animShowNext .5s cubic-bezier(.7,0,.3,1) both .15s;-moz-animation:animShowNext .5s cubic-bezier(.7,0,.3,1) both .15s;animation:animShowNext .5s cubic-bezier(.7,0,.3,1) both .15s}@-webkit-keyframes animShowNext{0%{opacity:0;-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}}