#index { .title { font-size: 1.5em; font-weight: 700; line-height: 1.2; &:before { font-size: 3em; font-weight: 700; color: #ddd; position: absolute; top: -0.5em; left: -0.3em; z-index: -1; } position: relative; margin-bottom: 2em; } .subtitle { font-size: 1.5em; line-height: 1.2; margin-bottom: 0.5em; margin-top: 2em; } .quotes { color: #555; padding: 2rem; font-size: 1.25rem; display: flex; flex-flow: column; justify-content: space-around; line-height: 1.5; gap: 4rem; font-family: monospace; } #summary .container { display: grid; grid-template-columns: 1fr; @media (min-width: 40rem) { grid-template-columns: 18rem 1fr; } } #birdsounds { background: black; color: white; text-align: center; .container { display: flex; flex-flow: column; align-items: center; } .photo { max-height: 100vh; height: 100%; max-width: 100%; object-fit: contain; object-position: center bottom; } .info { display: flex; flex-flow: column; align-items: center; } .logo { margin: 2rem 0; } @media (min-width: 40rem) { .photo { height: 20rem; } .container { flex-flow: row; justify-content: space-between; } .info { flex-grow: 1; } } a { color: white; position: relative; &:after { content: '→'; position: absolute; right: -1em; color: white; } } } #updates { line-height: 1.5; font-size: 1.25rem; .heading { font-size: 1.5em; font-weight: 700; margin-bottom: 1em; } p + p { margin: 1em 0; } p { max-width: 55ch; } } }