<div class="codedoodle-block">
        <h1>Jerry Lawson</h1>
        <p>Gerald Anderson "Jerry" Lawson was an American electronic engineer, and one of few African-American engineers in the video game industry at that time. He is known for his work in designing the Fairchild Channel F video game console as well as pioneering the commercial video game cartridge.<br /><small>Text and Photo Source: <a href="https://en.wikipedia.org/wiki/Jerry_Lawson_(engineer)">Wikipedia</a></small></p>
        <aside></aside>
        <footer><em>Thanks Jerry. :)</em></footer>
    </div>

/* Code Block styles */

        div.codedoodle-block {
            margin: 3rem auto;
            width: auto;
            max-width:60%;
            height: auto;
            background-color: transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .codedoodle-block p {
            margin: 1rem auto;
            max-width: 40em;
            font-size: 16px;
            line-height: 1.4;
            color: #999;
        }

        .codedoodle-block aside {
            display: flex;
            flex-flow: row;
            justify-content: center;
            align-content: center;
            background-image: url('https://jeremycaudle.com/ygg/resources/jerrylawsonca1980.png');
            background-size: cover;
            background-position: 50% 50%;
						width: 100%;
						height: 100%;
        }


        @supports (display:grid) {

            .codedoodle-block {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: 5rem 1fr 100px;
                grid-gap: 1rem;
                grid-template-areas: 
                "headline headline headline b b"
                "a a a b b"
                "footer footer footer b b"
            }

            .codedoodle-block p {
                grid-area: a;
            }
            .codedoodle-block h1 {
                grid-area: headline;
            }

            .codedoodle-block aside {
                grid-area: b;
            }

            .codedoodle-block footer {
                grid-area: footer;
            }

            @media (max-width: 600px) {
                
                .codedoodle-block {
                display: grid;
								grid-template-columns: 100%;
                grid-template-rows: 96px 300px 300px 1fr;
                grid-template-areas: 
                "headline"
                "a"
                "b"
                "footer"
            }
							
            }

        }