:root { --main-bg-color: #f3f4f6; --title-color: #262626; --text-color: #525252; --font-family: "Arial", sans-serif; } body { margin: 0; padding: 0; background-color: var(--main-bg-color); font-family: var(--font-family); } .blog-header, .blog-footer { text-align: center; padding: 1rem; background-color: var(--title-color); color: white; } .blog-post { container-type: inline-size; margin: 1rem; padding: 1rem; background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); & .post-title { color: var(--title-color); margin: 0 0 1rem 0; text-wrap: balance; font-size: 1em; } & .post-content { color: var(--text-color); } } @container (min-inline-size: 500px) { .blog-post { padding: 1.5rem; & .post-title { font-size: 1.25em; } } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter