(Deprecated) Responsive hero banner

HTML Block that displays a responsive two-column hero banner, with book cover image next to title, subtitle, and descriptive text.

<style>
@media only screen and (min-width: 750px) {
   .wfu-responsive-banner {
display: grid;
grid-template-columns: 300px 1fr;
padding: 1rem;
gap: 2rem;
max-width: 3000px;
align-items: center;
font: 500 100%/1.5 system-ui;
margin: 0 auto;
    }
 }
</style>
<div class="wfu-responsive-banner">

<div><img src="https://live.staticflickr.com/5481/11074573926_9097551605_3k.jpg" alt="Cover Image" style="  max-width: 100%;
  height: auto; filter: drop-shadow(0 0 0.15rem black);"/>
</div>
<div style="float:right;">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p><em>Published December 2022</em></p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices in iaculis nunc sed. Magna fringilla urna porttitor rhoncus dolor purus non. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Sed velit dignissim sodales ut eu. Non consectetur a erat nam at lectus urna. Sit amet massa vitae tortor condimentum lacinia quis vel eros. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor.</p>
</div>
</div>