<section>
  <div class="articles">
    <article>
      <figure>
        <img src="https://picsum.photos/id/1012/1000/750" alt="" />
      </figure>
      <h2><span>Some awesome title</span></h2>
    </article>
    <article>
      <h2>Something other for this</h2>
    </article>

    <article>
      <h2>Something other for this</h2>
    </article>
    <article>
      <h2>Something other for this</h2>
    </article>
    <article>
      <h2>Something other for this</h2>
    </article>
    <article>
      <h2>Something other for this</h2>
    </article>
    <article>
      <figure>
        <img src="https://picsum.photos/id/930/1000/750" alt="" />
      </figure>
      <h2><span>Some awesome title</span></h2>
    </article>
  </div>
</section>

article {
  --gradient-color-1: #762e4a;
  --gradient-color-2: #351e29;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-image: radial-gradient(
    circle,
    var(--gradient-color-1),
    var(--gradient-color-2)
  );
  border-radius: 6px;
  overflow: hidden;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

h2 {
  padding: 18px;
  margin: 0;
  font-family: "Bebas Neue", cursive;
  font-size: 1.9rem;
  letter-spacing: 0.06em;
}

article:has(figure) {
  position: relative;
  grid-column: span 2;
}

article:has(figure) h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  color: #343434;
  width: 50%;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
}

figure {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/************************
Generic layout 
**************************/

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 48px 16px;
  font-family: "Figtree", sans-serif;
  font-size: 1.2rem;
  line-height: 1.6rem;
  background-image: linear-gradient(75deg, #d3d0cb, #9fb1bc);
  min-height: 100vh;
}

.articles {
  display: grid;

  margin-inline: auto;
  
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
  gap: 24px;
}


article:nth-child(odd) {
  --gradient-color-1: #890620;
  --gradient-color-2: #2c0703;
}

article:nth-child(3n) {
  --gradient-color-1: #65334d;
  --gradient-color-2: #2c0703;
}