.content {padding: 40px 25% 120px 25%;}
h2 a {display: flex; align-items: center; text-decoration: none; color: var(--schoolsnz-blue); transition-duration: .3s;}
h2 a:hover {opacity: .8;}
h2 span {margin-right: 10px;}
.intro {margin-bottom: 60px; font-size: 1.1rem; font-weight: 400; line-height: 1.7; color: var(--text-colour);}
h1 {margin-bottom: 0; font-family: var(--font-family-base-heading); font-size: 2.5rem; color: var(--schoolsnz-blue);}
h2 {margin:0; font-family: var(--font-family-base-heading); font-size: 1.4rem;}
.city_school_item {opacity: 0; transition-duration: .3s;}
h3 {margin:0 0 20px 0; font-family: var(--font-family-base-heading); font-size: 1.2rem;}
.banner {flex: 1; position: relative; width: 100%; height: 490px; min-height: 490px; background-position: top left; background-size: cover;}
.banner-generic {height: 120px; min-height: 120px; background-color: var(--schoolsnz-blue); background-position: center;}
.public-content {visibility:hidden; margin-bottom: 40px; color: var(--text-colour); line-height: 1.7; font-size: 1.1rem; font-weight: 400;}
.outro {color: var(--text-colour); line-height: 1.7; font-size: 1.1rem;}
.city-text {margin-top: 0; font-size: 1.1rem; font-weight: 400; line-height: 1.7; color: var(--text-colour);}
.back {margin-top: 60px;}
@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) {
    h1 {font-size: 1.5rem;}
    p.intro, p.outro {font-size: 1.1rem;}
    p {font-size: 1rem;}
}