Thanks Ethan,
You demonstrate a great way “to move past the visual presentation in front of me, and focus on the underlying content.”

You might go this way even further using the new HTML elements. The teaser might well be an <article> element (or an <aside> element, depending on the context in the page); inside which the <div class=“teaser-hed”> would be a <header>. A screenreader should be aware of the difference between <article> /<header> and <div>/<div> and convey it to the user, shouldn’t it?

“By [Author Name]” doesn’t look like a heading to me; I would use <p> instead of <h2>. And alas, <i> does not mean ‘icon’. ;-) Sometimes a <span> is just a <span>, as for “comments”.

Have you prevented the comment counter from overlapping the byline? You never know how long [Author Name] is… Making the whole @.teaser@ the flexbox and reordering the flex items using the @order@ property might take away the need for ‘@position: absolute@’. (For that, the parts need to be siblings, i.e. no <header> element in this case.)

Moving beyond,
Gunnar