<main>
<article>
  <h2>This is an article headline</h2>
  <p>Here’s the description of this article, if you decide to click through to read it.</p>
</article>
<article>
  <h2>This is a teaser for another article</h2>
  <p>This is a shorter description.</p>
</article>
<article>
  <h2>Night</h2>
  <img src='flowers_700.jpg' alt=''>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>  
<article>
  <h2>Winter Storms</h2>
  <img src='mag_750x500.jpg' alt=''>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
<article>
  <h2>Lorem ipsum</h2>
  <p>Duis aute irure dolor in reprehenderit in voluptate.</p>
</article>
<article>
  <h2>:has( )</h2>
  <p>Read about <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">:has( ) at MDN</a>.</p>
</article>  
</main>

<small>This demo <a href="https://caniuse.com/css-has" target="_blank">requires a browser that supports <code>:has()</code></a>.</small>

body {
  font-family: Avenir;
  background-color: #0b5775;
  background: color(display-p3 0 0.296 0.42);
}
main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1rem;
}
article {
  background: white;
  background: color(display-p3 0.925 0.912 0.865);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-flow: column;
}
article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}
img {
  order: -1;
}
h2 {
  margin: 0;
  font-weight: 200;
  line-height: 1.1;
}
h2 + p {
  margin-top: 0.33rem;
}
article:has(img) h2 {
  margin-top: 1rem;
}
p {
  margin-bottom: 0;
  font-size: 0.8rem;
}
main a {
  text-decoration-thickness: 0.4rem;
  text-decoration-color: rgba(9, 146, 163, 0.3);
  text-underline-offset: -0.2rem;
  text-decoration-skip-ink: none;
  color: inherit;
}
main a:hover {
  color: inherit;
  color: rgba(9, 146, 163, 1);
}
img {
  max-width: 100%;
}

/* Warning message 
   about support for :has() */

@supports selector(:has(figcaption)) {
  body small {
    display: none;
  }
}
small {
  background: crimson;
  color: white;
  padding: 1rem;
  display: block;
  font-family: Helvetica;
  font-weight: 600;
  font-size: 1rem;
  max-width: max-content;
  margin-bottom: 2rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
}
small code {
  font-family: courier;
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.33);
}
small a {
  color: white;
}
small a:hover {
  color: rgba(255, 255, 255, 0.8);
}