.hero{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;grid-template-areas:"hero-selfie" "hero-greeting" "hero-job" "hero-btn";gap:1rem}.hero-selfie{grid-area:hero-selfie}.hero-greeting{grid-area:hero-greeting}.hero-job{grid-area:hero-job}.hero-btn{grid-area:hero-btn}@media (min-width:1024px){.hero{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:.5fr .5fr 1fr 1fr;grid-template-areas:". hero-selfie . . . ." ". hero-greeting hero-job hero-job hero-job hero-job" ". . hero-job hero-job hero-job hero-job" ". . . . hero-btn .";gap:8px}}@media (min-width:768px) and (max-width:1024px){.hero{grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr;grid-template-areas:". hero-selfie hero-greeting hero-greeting ." ". . hero-job hero-job hero-job" ". . hero-job hero-job hero-job" ". . . hero-btn .";gap:8px}}