.hero{flex-direction:column;gap:5rem;display:flex}.hero__content{text-align:center;flex-direction:column;align-items:center;gap:1rem;display:flex;position:relative}.hero__img-wrapper{align-self:center;margin-top:6rem}.hero__title{font-size:var(--size-4xl);color:var(--clr-light);min-height:2.8em;animation:linear both fade;animation-timeline:view();animation-range:entry var(--animation-percent) cover var(--animation-percent);line-height:1.4}.hero__title:after{content:"|";animation:.7s step-start infinite blink}@keyframes blink{50%{opacity:0}}.hero__description{max-width:60ch;font-size:var(--size-lg);color:var(--clr-slate600);text-align:center;animation:linear both fade;animation-timeline:view();animation-range:entry var(--animation-percent) cover var(--animation-percent)}.hero__hr{border-color:var(--clr-slate800);animation:linear both fade;animation-timeline:view();animation-range:entry var(--animation-percent) cover var(--animation-percent)}.hero__subtitle{font-size:var(--size-lg);color:var(--clr-slate400);animation:linear both fade;animation-timeline:view();animation-range:entry var(--animation-percent) cover var(--animation-percent)}.hero__img{width:20rem;animation:linear both fade;animation-timeline:view();animation-range:entry var(--animation-percent) cover var(--animation-percent);border-radius:50%}.hero__social-links{gap:2rem;display:flex}.hero__btn{font-size:var(--size-xl);align-self:center;width:max-content}@keyframes fade{0%{opacity:0}to{opacity:1}}@media (width>=475px){.hero,.hero__content{gap:1.5rem}.hero__title{font-size:var(--size-5xl)}.hero__description,.hero__subtitle{font-size:var(--size-lg)}}@media (width>=1024px){.hero{flex-direction:row;align-items:center}.hero__img-wrapper{margin-top:0;position:relative}.hero__title{font-size:var(--size-6xl)}.hero__content{margin-top:10rem}.hero__description,.hero__subtitle{font-size:var(--size-xl)}.hero__img{width:30rem;position:relative;top:5rem;left:0}}@media (width>=1280px){.hero{gap:5rem}.hero__content{gap:2rem}.hero__title{font-size:var(--size-7xl)}.hero__description,.hero__subtitle{font-size:var(--size-2xl)}}@media (prefers-reduced-motion){.hero__title,.hero__description,.hero__hr,.hero__subtitle,.hero__img{animation:none}}