.content {padding: 40px 20% 120px 20%;}
h1 {margin-bottom: 0; font-family: var(--font-family-base-heading); font-size: 2.5rem; color: var(--schoolsnz-blue);}
h2 {margin: 0 0 10px 0; font-family: var(--font-family-base-heading); font-size: 1.4rem;}
h3 {font-family: var(--font-family-base-heading); font-size: 1.2rem;}
p, li {color: var(--text-colour); font-weight: 400; line-height: 1.7;}
p:first-child {margin-top: 0;}
p:last-child, ul:last-child {margin-bottom: 40px;}
.intro {margin-bottom: 60px; font-size: 1.8rem; line-height: 1.2; color: var(--dark);}
.outro {color: var(--text-colour); line-height: 1.7; font-size: 1.1rem;}
.about-upper {display: grid; grid-template-columns: 2fr 1fr; gap: 40px;}
.image-wrapper {width: 360px; height: 240px; margin-top: 25px; background-repeat: no-repeat; background-position: center; background-size: contain; border-radius: 15px; overflow: hidden;}
.heavy {font-family: var(--font-family-base-heading);}
@media screen and (max-width: 1300px) {
    .content {padding: 40px 20% 120px 20%;}
}
@media screen and (max-width: 1000px) {
    .content {padding: 40px 5% 120px 5%;}
}
@media screen and (max-width: 800px) {
    .about-upper {grid-template-columns: 1fr;}
    .image-wrapper {width: 300px; height: 200px; margin: 0 auto 80px auto;}
    h1 {font-size: 1.5rem;}
    p {font-size: 1rem;}
}