style.min.css

@import url(https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;700;900&display=swap);*{margin:0;padding:0;text-decoration:0;box-sizing:border-box;transition:all ease .2s;list-style-type:none}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block;line-height:0}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}button{all:unset;cursor:pointer}:root{--orange:rgb(255, 111, 27);--light-orange:hsla(22, 100%, 69%, 1);--dark-blue:hsla(220, 50%, 17%, 1);--light-blue:hsla(221, 23%, 58%, 1);--gray:hsla(198, 28%, 93%, 1);--white:hsla(0, 0%, 100%, 1)}body{line-height:1.3;text-rendering:optimizeSpeed;font-family:Barlow,sans-serif;background-color:#f8f8f8}h1{font:900 3.5rem/3.5rem Barlow,sans-serif;text-transform:uppercase;color:var(--dark-blue)}h2{font:900 2rem/2.25rem Barlow,sans-serif;text-transform:uppercase;color:var(--dark-blue)}h3{font:900 1.5rem/1.75rem Barlow,sans-serif;text-transform:uppercase;color:var(--dark-blue)}p{font:400 1rem/1.625rem Barlow,sans-serif;color:var(--light-blue)}.release,h4{font:700 1rem/1.625rem Barlow,sans-serif;color:var(--light-blue);text-transform:uppercase}.btn{font:700 1rem/1.625rem Barlow,sans-serif;padding:1rem 1.625rem;background-color:var(--orange);text-transform:uppercase;color:#fff;border-radius:.5rem;cursor:pointer;transition:all ease .2s}.btn:hover{background-color:var(--light-orange);transition:all ease .5s}.btn-secondary{background-color:var(--gray);color:var(--dark-blue);transition:all ease .2s}.btn-secondary:hover{background-color:var(--dark-blue);color:var(--white);transition:all ease .5s}.container,.container-grid{max-width:68.75rem;margin:0 auto;padding-inline:1.25rem}header{display:flex;justify-content:space-between;align-items:center;padding-top:3.375rem;padding-bottom:5.125rem}.grid-1 img,.grid-2 img,.grid-3 img,.hero-heading img,.hero-image img,picture img{max-width:100%;border-radius:1.25rem;object-fit:cover}main{overflow:hidden}.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,auto);gap:1.875rem;grid-template-areas:'hero-heading hero-heading hero-image hero-image' 'grid-1 grid-2 grid-2 grid-3';padding-bottom:10.5rem;position:relative;overflow:visible}.hero-grid::before{content:" ";display:block;position:absolute;left:-16.5625rem;bottom:10.5rem;width:15.9375rem;height:15rem;opacity:70%;background:linear-gradient(42.85deg,#e8eff2 2%,#dee5e8 48.45%);border-radius:1.25rem}.hero-grid::after{content:" ";display:block;position:absolute;right:-16.5625rem;width:15.9375rem;height:15rem;opacity:70%;background:linear-gradient(42.85deg,#e8eff2 2%,#dee5e8 48.45%);border-radius:1.25rem}.hero-heading{display:flex;flex-direction:column;justify-content:center;grid-area:hero-heading}.flex{display:flex;flex-wrap:wrap;align-items:center;gap:2.5rem}.hero-heading h1{padding-bottom:1.5rem}.hero-heading p{padding-bottom:2.5rem;max-width:31.25rem}.hero-image{display:flex;grid-area:hero-image}.grid-1{display:flex;grid-area:grid-1;border-radius:1.25rem;background-color:var(--orange)}.grid-1 img{mix-blend-mode:multiply;opacity:75%}.grid-2{display:flex;padding-right:3.75rem;grid-area:grid-2}.grid-3{display:flex;flex-direction:column;grid-area:grid-3;gap:1.5rem;justify-content:center}.features{display:flex;gap:3.2rem;margin-bottom:8rem}.feature-item{display:flex;flex-direction:column;align-items:flex-start}.icon{display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:1rem;margin-bottom:2.5rem;background-color:var(--orange)}.icon img{display:block;padding:1rem}.feature-item h3{padding-bottom:1.5rem}.feature-item p{font:400 .9375rem/1.75rem Barlow,sans-serif;color:var(--light-blue)}footer{text-align:center;padding-bottom:2.5rem}@media (max-width:50rem){.hero-grid::after,.hero-grid::before{display:none}h1{font:900 3rem/3rem Barlow,sans-serif}p{font:400 .9375rem/1.625rem Barlow,sans-serif;color:var(--light-blue)}header{padding-top:2.5rem;padding-bottom:3.875rem}.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,auto);grid-template-areas:'hero-heading hero-heading  hero-image hero-image' 'grid-1 grid-2 grid-2 grid-2' 'grid-3 grid-3 grid-3 grid-3';padding-bottom:6.25rem;position:initial;overflow:initial}.grid-2{display:flex;padding-right:initial;grid-area:grid-2}.grid-3{display:flex;flex-direction:row;justify-content:center;align-items:center}.hero-image{transform:translateX(2.5rem)}.features{display:grid;grid-template-columns:1fr 1fr;gap:3.75rem;margin-bottom:8rem}}@media (max-width:33.75rem){.container-grid{max-width:68.75rem;margin:0 auto;padding-inline:0}.hero-grid{display:grid;gap:1.25rem;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto auto auto;grid-template-areas:'hero-heading hero-heading hero-heading' 'hero-image hero-image hero-image' 'grid-1 grid-2 grid-2' 'grid-3 grid-3 grid-3';padding-bottom:6.25rem}.btn{font:700 .9375rem/1.5rem Barlow,sans-serif;padding:.75rem 1.375rem}.flex{display:flex;flex-wrap:wrap;align-items:center;gap:2.5rem;justify-content:center}.hero-heading{margin-inline:1.25rem;text-align:center;padding-bottom:3.875rem}.hero-image{transform:translateX(1.25rem)}.grid-1{transform:translateX(-1.25rem)}.grid-2{transform:translateX(-1.25rem)}.grid-3{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:4.375rem;margin-inline:2.5rem}.features{display:flex;flex-direction:column;text-align:center;gap:3.75rem;margin-inline:1.25rem;margin-bottom:5.625rem}.feature-item{align-items:center}}@media (max-width:20rem){h1{font:900 2.25rem/2.25rem Barlow,sans-serif}}.grid-1,.hero-grid::before,.hero-image{-webkit-animation:slideInTop ease-out 1s;transition:all ease-out 1.5s;animation-duration:1.5s;animation-delay:.6s}.grid-2,.hero-grid::after{-webkit-animation:slideInBottom ease-out 1s;transition:all ease-out 1.5s;animation-duration:1.5s;animation-delay:.6s}.grid-3,.hero-heading{-webkit-animation:slideInLeft ease-out 2s;transition:all ease-out 2s;animation-duration:1s;animation-delay:.8s}@keyframes slideInTop{0%{transform:translateY(-12.5rem);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes slideInBottom{0%{transform:translateY(12.5rem);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes slideInLeft{0%{transform:translateX(12.5rem);opacity:0}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes appear{0%{opacity:0}40%{opacity:0}100%{opacity:1}}@keyframes appear{0%{opacity:0}40%{opacity:0}100%{opacity:1}}