.intro, .postscript, .event { border-bottom: 1px solid black; max-width: 800px; margin: auto; } .reference { color: #333; font-size: 11px; } p { } .campaigns { color:#1abc9c; } .places { color:#f39c11; } .actions { color:#ff00cc; } .council{ color:#3399cc; } .event .side-by-side { display: flex; flex-direction: row; } .event:nth-child(2n) .side-by-side { flex-direction: row-reverse; } .media, .text { width: 50%; padding: 8px; } .media iframe { width: 100%; height: 100%; } .media img { width: 100%; height: 100%; object-fit: contain; } @media screen and (max-width: 799px) { .media, .text { width: 100%; } .event .side-by-side { flex-direction: column; } .event:nth-child(2n) .side-by-side { flex-direction: column-reverse; } }