.community-page{.page-heading { h1 { grid-column: 1 / 7; } h2 { font-size: var(--font-size-3); font-weight: 600; grid-column: 7 / 13; line-height: 1.2; } } .page-content { @media (min-width: 56.25em) { display: grid; gap: var(--gg) var(--gg); grid-template-columns: repeat(12,1fr); } } section { border-radius: .5rem; img { aspect-ratio: 2 / 1; border-radius: .5rem .5rem 0 0; max-width: 100%; object-fit: cover; width: 100%; } div { margin: calc(2rem/2); padding: calc(var(--gg)/2); * { margin-bottom: 0; } @media (min-width: 75em) { padding: calc(2rem/2); } * { margin-bottom: inherit; text-align:center; .btn { border: 2px solid var(--colour-1); color: var(--colour-1); display: inline-block; &:hover { border: 2px solid var(--colour-2); color: var(--colour-2); } } :last-child { margin-bottom: 0; margin-top: 1rem; } } @media (min-width: 37.5em) { margin-left: 12%; margin-right: 12%; } @media (min-width: 56.25em) { margin-left: 18%; margin-right: 18%; } @media (min-width: 75em) { margin-left: 24%; margin-right: 24%; } } @media (min-width: 56.25em) { grid-column: 2 / 12; } }}