.tagline { margin-block: 2rem; p { font-size: 1.3rem; font-family: var(--font-headers); text-align: center; color: var(--color-headers); } } @media (max-width: 650px) { .tagline { margin-block: 1rem; p { font-size: 1.1rem; } } } .intro { margin-block: 4rem; display: grid; gap: 1rem; h2 { grid-area: h2; } img { grid-area: img; } p { margin: 0; } .blurb { grid-area: blurb; } .link { grid-area: link; } } .art { grid-template-areas: "h2 img" "blurb img" "link img" ". img"; grid-template-columns: 3fr 2fr; h2, p { text-align: right; } } .therapy { grid-template-areas: "img h2" "img blurb" "img link" "img ."; grid-template-columns: 2fr 3fr; } @media (max-width: 800px) { .intro { margin-block: 2rem; grid-template-areas: "h2" "blurb" "link" "img"; grid-template-columns: auto; h2 { text-align: center; } p { text-align: left; } } }