<div class="codedoodle-block">
        <div class="card">
                <h1>Thought Provoking Headline</h1>
                <article>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis metus in vehicula suscipit. Ut vestibulum ultricies est, tristique tempor velit ullamcorper sit amet. Mauris sed nunc ac elit mollis ultrices.</p><p>Sed in lorem at justo eleifend aliquam nec at nulla. Nunc sit amet sapien vitae ipsum convallis cursus. <strong>Praesent vel odio eu felis congue consequat.</strong> Pellentesque eget lorem maecenas nulla diam, varius ultrices ex eu, sodales placerat tellus. Donec ullamcorper id augue sit amet convallis. Morbi dignissim sagittis lorem, et gravida turpis. Nunc imperdiet vitae lacus eu porttitor.</p><p>Pellentesque odio nunc, lacinia eu tincidunt vel, lobortis non justo. Quisque in arcu nec eros pretium pretium ut quis diam. Maecenas et velit in sem ornare blandit. Mauris convallis viverra gravida. In eget condimentum erat. Nam pulvinar sem rutrum nisl faucibus, sit amet interdum ante egestas. Quisque dictum magna in dictum dignissim. Ut nunc nisl, semper a odio eu, efficitur lobortis dolor.</p>
                </article>
        </div>
				</div>

/* Code Block styles */

        div.codedoodle-block {
            margin:0;
            width: auto;
            background-color: transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .card {
            border: solid 1px #dedede;
            padding: 1em;
            margin: 1rem auto;
            font-size: 1.25rem;
            box-shadow: 0 .5rem .5rem rgba(0,0,0,.2);
            max-width: 88%;
        }

        .card h1 {
            text-align: center;
            text-shadow: 0 .2rem 0 orangered, 0 .25rem 0 rgb(226, 62, 3), 0 .3rem 0 rgb(216, 59, 2);
            font-size: 3em;
            text-transform: uppercase;
            margin: 2rem 0;
        }

        .card article {
            column-count: 3;
            column-gap: 3rem;
            column-rule: orangered;
            column-rule-style: groove;
            column-rule-width: thin;
        }

        .card p strong {
            font-weight: 600;
            text-decoration-line: overline;
            text-decoration-color: orangered;
        }

        .card article p:first-of-type {
            margin-top: 0;
        }

        .card article p:first-of-type::first-letter {
            font-size: 1.5em;
            line-height: 1;
            font-weight: bold;
        }

        .card article p:last-of-type::first-line {
            font-weight: lighter;
            text-decoration-style: dotted;
            text-decoration-line: underline;
            color: orangered;
        }

        @supports (display: flex) {
            .card {
                display: flex;
                flex-direction: column;
                align-content: center;
                justify-content: center;
            }
        }

        @supports (display: grid) {
            .card {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                grid-template-rows: 200px 1fr;
                align-items: center;
                justify-items: center;
                grid-gap: 1rem;
            }

            .card h1 {
                grid-column: 1 / 5;
                grid-row: 1 / 2;
            }

            .card article {
                grid-row: 2 / 3;
                grid-column: 1 / 6;
            }
        }