<div class="container">
  <section class="paper border shadow shadow-large">
    <h1>
      <a href="https://bejamas.com/blog/">Bejamas blog</a>
    </h1>
      <ul class="card-list">
        <li class="paper border shadow shadow-large shadow-hover">          
          <img src="https://cdn.sanity.io/images/34ent8ly/production/f31810d13e2e27f7f502218b8f4f28e0008e1ed7-3000x3000.png?w=640&q=75" alt="">          
          <h2>
            <a href="https://bejamas.com/hub/guides/guide-to-remix-framework">Remix: a practical guide</a>            
          </h2>
        </li>
        <li class="paper border shadow shadow-large shadow-hover">          
          <img src="https://cdn.sanity.io/images/34ent8ly/production/adffce6e572b1e67f8301c0cd45ea0019a9e0be8-4167x4167.png?w=640&q=75" alt="">
          <h2>
            <a href="https://bejamas.com/hub/tutorials/practical-guide-to-nuxt-js">Nuxt: a practical guide</a>            
          </h2>
        </li>
        <li class="paper border shadow shadow-large shadow-hover">          
          <img src="https://cdn.sanity.io/images/34ent8ly/production/69cca46986d67b738f488daf17ac61a9f8f00068-3000x3000.png?w=640&q=75" alt="">
          <h2>
            <a href="https://bejamas.io/blog/practical-guide-to-solidjs-library/">Solid: a practical guide</a>            
          </h2>
        </li>
        <li class="paper border shadow shadow-large shadow-hover">          
          <img src="https://cdn.sanity.io/images/34ent8ly/production/2d2ed3cab93b818475e7a9d45608c0f9767f5a8f-3000x3000.png?w=640&q=75" alt="">
          <h2>
            <a href="https://bejamas.com/hub/tutorials/practical-guide-to-astro-js-framework">Astro: a practical guide</a>            
          </h2>
        </li>
        <li class="paper border shadow shadow-large shadow-hover">          
          <img src="https://cdn.sanity.io/images/34ent8ly/production/bb266c02a530bc5858ef34ba20680f10ffb8929c-3000x3000.png?w=640&q=75" alt="">
          <h2>
            <a href="https://bejamas.com/hub/tutorials/build-a-quiz-application-with-qwik-framework">Qwik: a practical guide</a>            
          </h2>
        </li>
        <li class="paper border shadow shadow-large shadow-hover">          
          <img src="https://cdn.sanity.io/images/34ent8ly/production/274fc43c57a8ba8d4e20d2709776232cf365c014-3000x3000.png?w=640&q=75" alt="">
          <h2>
            <a href="https://bejamas.io/blog/how-to-create-next-js-blog-using-notion-as-a-cms/">Next: a practical guide</a>            
          </h2>
        </li>        
    </ul>
  </section>
</div>

@import url("https://unpkg.com/papercss@1.9.2/dist/paper.css") layer(csspaper);

.card-list:has(li:hover) li:not(:hover) {
  filter: blur(4px)
}

/* Demo style */
body {
  min-height: 100vh;
  background-color: #f6eee3;
  background-size: 20px 20px;
  background-image:  repeating-linear-gradient(0deg, #e5decf, #e5decf 1px, #f6eee3 1px, #f6eee3);
  padding: 1rem;
  color: var(--text-color);
}

h1 {
  font-size: 2.2rem;
  color: var(--primary-color);
  margin: 0 0 2rem;  
}

h2 {
  font-size: 1.2rem;
  margin: 0;
}

.card-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  transition: all 150ms ease-in-out;
}

li::before {
  content: "";
}

img {
  display: block;
  min-width: 0;
  width: 100%;
  margin-bottom: .6rem;
}

a {
  background: none;
}

.paper {
  padding: 1.5rem;
}

li a {
  padding-inline-start: 1rem;
}