html, body { min-height: 100vh; height: 100vh; min-height: 100dvh; height: 100dvh; } body, noscript { flex-grow: 1; flex-shrink: 0; display: flex; flex-direction: column; } noscript { padding: 1em; } header, footer { flex-shrink: 0; } footer { position: sticky; bottom: 0; background: white; padding: 1em; font-size: 1.5em; } main { flex-grow: 1; flex-shrink: 0; } pre { font-family: inherit; white-space: pre-wrap; } img { max-width: 100%; } .content { display: flex; flex-wrap: wrap; max-width: calc(3 * 424px); } *[data-width="1"] { flex-grow: 1; width: 414px; } *[data-width="2"] { flex-grow: 1; width: 414px; } *[data-width="3"] { flex-grow: 1; width: 414px; } .teaser { width: 100%; } hr { width: 100%; } .block { box-sizing: border-box; margin: 5px; background: #fff; box-shadow: 0 3px 10px 0 rgba(0,0,0,.4); flex-direction: column; color: inherit; flex-grow: 0; } .block > h1, .block > h2, .block > h3 { text-align: center; margin: 0; padding: 0; } .block > .title { background-color: rgb(73, 146, 171); color: white; } .small-teaser { display: flex; flex-direction: column; } .small-teaser img { flex-grow: 1; } .text { white-space: pre-wrap; padding: 1em; }