<article class="featured">
  <img src='https://images.unsplash.com/photo-1717297808345-b740e9846158?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTgyOTQyNzZ8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <h2>Article Title</h2>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, numquam tempora! Unde delectus officiis maiores ullam natus reiciendis esse. Laboriosam ea provident aut explicabo fuga natus, labore maiores corrupti corporis!</p>
</article>
<article>
  <img src='https://images.unsplash.com/photo-1717297808345-b740e9846158?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTgyOTQyNzZ8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <h2>Article Title</h2>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, numquam tempora! Unde delectus officiis maiores ullam natus reiciendis esse. Laboriosam ea provident aut explicabo fuga natus, labore maiores corrupti corporis!</p>
</article>
<article>
  <img src='https://images.unsplash.com/photo-1717297808345-b740e9846158?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTgyOTQyNzZ8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <h2>Article Title</h2>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, numquam tempora! Unde delectus officiis maiores ullam natus reiciendis esse. Laboriosam ea provident aut explicabo fuga natus, labore maiores corrupti corporis!</p>
</article>
article.featured {
  background: hsl(250 100% 90%);
  border-color: hsl(250 100% 50%);
}

article {
  background: #fff;
}

.featured {
  background: hsl(35 100% 90%);
  border-color: hsl(35 100% 50%);
}

@layer presentation {
  article {
    border: 1px solid #eaeaea;
    padding: 1ch;
  }
  img {
    max-inline-size: 100%;
  }
}

@layer base {
  html {
    background-color: #262626;
    background-position: top center;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(50% 50% at top center, rgb(0 0 0 / 0.66), #262626),
      linear-gradient(180deg, #fff, #262626);
    background-size: 120% 2000px, 100% 2000px;
  }
  
  body {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    font-family: Merriweather, serif;
    padding: 1ch;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.