Hero columns

Two layoutssplit & hero

Your markupreal HTML, real SEO

Zero deps~3kb gzipped

No build stepCSS variables only

Code

<style>
.hero-columns {
  --steam-block-hero-align-items: stretch;
  --steam-block-content-justify-content: flex-end;
  --steam-block-content-display: grid;
  --steam-block-content-grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  --steam-block-content-gap: 1.5rem;
  --steam-block-content-text-align: center;
  --steam-block-media-after-background: linear-gradient(to top, rgba(0, 0, 0, .85) 30%, transparent 75%);
}
</style>
<steam-block class="hero-columns" type="hero" overlay="true">
  <img slot="media" src="photo.jpg" alt="">
  <div slot="content"><strong>Column one</strong></div>
  <div slot="content"><strong>Column two</strong></div>
  <div slot="content"><strong>Column three</strong></div>
  <div slot="content"><strong>Column four</strong></div>
</steam-block>