main.support { line-height: 1.728; .container { max-width: 80ch; @media (min-width: 60rem) { padding-inline: 0 } } .donation-links { padding-inline-start: 0; list-style: none; display: flex; flex-flow: row wrap; margin-block: 3rem; justify-content: space-around; gap: 1rem; li { display: contents; } a { flex-basis: 13rem; display: grid; text-decoration: none; place-items: center; text-align: center; gap: 1rem; svg { width: 100%; height: 4rem; } span { font-weight: bold; } background: var(--color-accent); padding: 2rem; color: white; border-radius: 1rem; box-shadow: 0px 4px 4px hsl(150, 80%, 30%); &:hover { background-color: var(--color-highlight-weak); box-shadow: 0px 2px 2px hsl(210, 80%, 50%) } } } .quote { margin: 0; margin-inline-start: 1rem; padding: 1rem; padding-inline-start: 2.5rem; position: relative; border-radius: 2rem; border-start-start-radius: 0; background: var(--color-highlight); color: var(--color-button-text); &:before { content: ''; position: absolute; border-style: solid; border-width: 0rem 1rem 1rem 0; border-color: transparent var(--color-highlight) transparent transparent; left: -1rem; top: 0; } blockquote { margin: 0; margin-block-start: 0.5rem; p { margin: 0; } &:before { content: '“'; position: absolute; top: -0.75rem; left: 0.5rem; font-size: 3rem; font-family: serif; } } figcaption { cite { &:before { content: '— '; } } } } }