<section class="grid--container">

  <!-- 1 -->
  <div class="grid--cell">
    <article class="grid--item">
      
      <div class="preview--container">        
        <a href="#" class="preview-image--container">
          <div class="preview-image"></div>
        </a>
        
        <div class="meta--container">
          <a href="#" class="issue">Issue XX</a>
          <a href="#" class="page">Page YY</a>
        </div>        
      </div>
      
      <div class="content--container">
        <div class="title--container">
          <a class="title--text" href="#">Ossimu Quasi Alum</a>
        </div>
        
        <div class="tags--overflow-container">
          <ul class="tags--container">
            <li><a href="#" class="tag">Delect a Distinctio</a></li>
            <li><a href="#" class="tag">Facere</a></li>
            <li><a href="#" class="tag">Morbi Leo</a></li>
            <li><a href="#" class="tag">Eris Culpa</a></li>
            <li><a href="#" class="tag">Facere</a></li>
            <li><a href="#" class="tag">Quisus</a></li>
            <li><a href="#" class="tag ellipsis"><i class="far fa-ellipsis-h"></i></a></li>
          </ul>
        </div>

        <div class="hover--options">
          
          <a href="#" class="series button">
            <span class="icon-title"><i class="fad fa-books"></i> Series</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>    
          </a>
          
          <a href="#" class="latest button">
            <span class="icon-title"><i class="far fa-image"></i> Latest</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>  
          </a>
          
          <a href="#" class="follow button"><i class="fas fa-plus"></i></a>
        </div>
      </div>

    </article>
  </div>

  <!-- 2 -->
  <div class="grid--cell">
    <article class="grid--item">
      
      <div class="preview--container">
        
        <a href="#" class="preview-image--container">
          <div class="preview-image"></div>
        </a>
        
        <div class="meta--container">
          <a href="#" class="issue">Issue XX</a>
          <a href="#" class="page">Page YY</a>
        </div>
        
      </div>
      
      <div class="content--container">

        <div class="title--container">
          <a class="title--text" href="#">Deleniti Quidem Labori: Sumenda Amet Possimus Quasi Illum</a>
        </div>

        <div class="tags--overflow-container">
          <ul class="tags--container">
            <li><a href="#" class="tag">Volutpat</a></li>
            <li><a href="#" class="tag">Scelerisque</a></li>
            <li><a href="#" class="tag">Turpis Galo</a></li>
            <li><a href="#" class="tag">Quisus</a></li>
            <li><a href="#" class="tag">At Tempo</a></li>
            <li><a href="#" class="tag">Distincto a Tet</a></li>
            <li><a href="#" class="tag ellipsis"><i class="far fa-ellipsis-h"></i></a></li>
          </ul>
        </div>

        <div class="hover--options">
          
          <a href="#" class="series button">
            <span class="icon-title"><i class="fad fa-books"></i> Series</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>    
          </a>
          
          <a href="#" class="latest button">
            <span class="icon-title"><i class="far fa-image"></i> Latest</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>  
          </a>
          
          <a href="#" class="follow button"><i class="fas fa-plus"></i></a>
        </div>
      </div>

    </article>
  </div>

  <!-- 3 -->
  <div class="grid--cell">
    <article class="grid--item">
      
      <div class="preview--container">
        
        <a href="#" class="preview-image--container">
          <div class="preview-image"></div>
        </a>
        
        <div class="meta--container">
          <a href="#" class="issue">Issue XX</a>
          <a href="#" class="page">Page YY</a>
        </div>
        
      </div>
      
      <div class="content--container">

        <div class="title--container">
          <a class="title--text" href="#">Et Mestaci</a>
        </div>

        <div class="tags--overflow-container">
          <ul class="tags--container">
            <li><a href="#" class="tag">Gravidas</a></li>
            <li><a href="#" class="tag">Dipisci Triste</a></li>
            <li><a href="#" class="tag">Odio Aenean</a></li>
            <li><a href="#" class="tag">Urna</a></li>
            <li><a href="#" class="tag">Lista e Fortna</a></li>
            <li><a href="#" class="tag">Vuisi</a></li>
            <li><a href="#" class="tag ellipsis"><i class="far fa-ellipsis-h"></i></a></li>
          </ul>
        </div>

        <div class="hover--options">
          
          <a href="#" class="series button">
            <span class="icon-title"><i class="fad fa-books"></i> Series</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>    
          </a>
          
          <a href="#" class="latest button">
            <span class="icon-title"><i class="far fa-image"></i> Latest</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>  
          </a>
          
          <a href="#" class="follow button"><i class="fas fa-plus"></i></a>
        </div>
      </div>

    </article>
  </div>

  <!-- 4 -->
  <div class="grid--cell">
    <article class="grid--item">
      
      <div class="preview--container">
        
        <a href="#" class="preview-image--container">
          <div class="preview-image"></div>
        </a>
        
        <div class="meta--container">
          <a href="#" class="issue">Issue XX</a>
          <a href="#" class="page">Page YY</a>
        </div>
        
      </div>
      
      <div class="content--container">

        <div class="title--container">
          <a class="title--text" href="#">Recusandae Culpa Tenetur ad Quae</a>
        </div>

        <div class="tags--overflow-container">
          <ul class="tags--container">
            <li><a href="#" class="tag">Elementum</a></li>
            <li><a href="#" class="tag">Praesent Semper</a></li>
            <li><a href="#" class="tag">Gravida</a></li>
            <li><a href="#" class="tag">Libero</a></li>
            <li><a href="#" class="tag">Hesus</a></li>
            <li><a href="#" class="tag ellipsis"><i class="far fa-ellipsis-h"></i></a></li>
          </ul>
      </div>
        <div class="hover--options">
          
          <a href="#" class="series button">
            <span class="icon-title"><i class="fad fa-books"></i> Series</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>    
          </a>
          
          <a href="#" class="latest button">
            <span class="icon-title"><i class="far fa-image"></i> Latest</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>  
          </a>
          
          <a href="#" class="follow button"><i class="fas fa-plus"></i></a>
        </div>
      </div>

    </article>
  </div>
  
  <!-- 5 -->
  <div class="grid--cell">
    <article class="grid--item">
      
      <div class="preview--container">
        
        <a href="#" class="preview-image--container">
          <div class="preview-image"></div>
        </a>
        
        <div class="meta--container">
          <a href="#" class="issue">Issue XX</a>
          <a href="#" class="page">Page YY</a>
        </div>
        
      </div>
      
      <div class="content--container">

        <div class="title--container">
          <a class="title--text" href="#">Minima os Soluta Expedita Voluptas</a>
        </div>

        <div class="tags--overflow-container">
          <ul class="tags--container">
            <li><a href="#" class="tag">Odio Aenean</a></li>
            <li><a href="#" class="tag">Libero</a></li>
            <li><a href="#" class="tag">Systi on Peras</a></li>
            <li><a href="#" class="tag">Volutpat</a></li>
            <li><a href="#" class="tag">Orta</a></li>
            <li><a href="#" class="tag">Turpis Egestas</a></li>
            <li><a href="#" class="tag ellipsis"><i class="far fa-ellipsis-h"></i></a></li>
          </ul>
        </div>

        <div class="hover--options">
          
          <a href="#" class="series button">
            <span class="icon-title"><i class="fad fa-books"></i> Series</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>    
          </a>
          
          <a href="#" class="latest button">
            <span class="icon-title"><i class="far fa-image"></i> Latest</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>  
          </a>
          
          <a href="#" class="follow button"><i class="fas fa-plus"></i></a>
        </div>
      </div>

    </article>
  </div>

  <!-- 6 -->
  <div class="grid--cell">
    <article class="grid--item">
      
      <div class="preview--container">
        
        <a href="#" class="preview-image--container">
          <div class="preview-image"></div>
        </a>
        
        <div class="meta--container">
          <a href="#" class="issue">Issue XX</a>
          <a href="#" class="page">Page YY</a>
        </div>
        
      </div>
      
      <div class="content--container">

        <div class="title--container">
          <a class="title--text" href="#">Atque Facilis Maleti in Magni Nobis</a>
        </div>

        <div class="tags--overflow-container">
          <ul class="tags--container">
            <li><a href="#" class="tag">Lista e Fortna</a></li>
            <li><a href="#" class="tag">Libero</a></li>           
            <li><a href="#" class="tag">Turpis</a></li>
            <li><a href="#" class="tag">Urna</a></li>
            <li><a href="#" class="tag">Praesent Semper</a></li>
            <li><a href="#" class="tag">Morbi Leo</a></li>
            <li><a href="#" class="tag ellipsis"><i class="far fa-ellipsis-h"></i></a></li>
          </ul>
        </div>

        <div class="hover--options">
          
          <a href="#" class="series button">
            <span class="icon-title"><i class="fad fa-books"></i> Series</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>    
          </a>
          
          <a href="#" class="latest button">
            <span class="icon-title"><i class="far fa-image"></i> Latest</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>  
          </a>
          
          <a href="#" class="follow button"><i class="fas fa-plus"></i></a>
        </div>
      </div>

    </article>
  </div>
  <!-- 7 -->
  <div class="grid--cell">
    <article class="grid--item">
      
      <div class="preview--container">
        
        <a href="#" class="preview-image--container">
          <div class="preview-image"></div>
        </a>
        
        <div class="meta--container">
          <a href="#" class="issue">Issue XX</a>
          <a href="#" class="page">Page YY</a>
        </div>
        
      </div>
      
      <div class="content--container">

        <div class="title--container">
          <a class="title--text" href="#">Illum ut Commodi Modi Sapiente</a>
        </div>
        
        <div class="tags--overflow-container">
          <ul class="tags--container">          
            <li><a href="#" class="tag">Quisus</a></li>       
            <li><a href="#" class="tag">Eris Culpa</a></li>
            <li><a href="#" class="tag">Morbi Leo</a></li>
            <li><a href="#" class="tag">Turpis Egestas</a></li>           
            <li><a href="#" class="tag">Elementi</a></li>
            <li><a href="#" class="tag">Urna</a></li>
            <li><a href="#" class="tag ellipsis"><i class="far fa-ellipsis-h"></i></a></li>
          </ul>
        </div>

        <div class="hover--options">
          
          <a href="#" class="series button">
            <span class="icon-title"><i class="fad fa-books"></i> Series</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>    
          </a>
          
          <a href="#" class="latest button">
            <span class="icon-title"><i class="far fa-image"></i> Latest</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>  
          </a>
          
          <a href="#" class="follow button"><i class="fas fa-plus"></i></a>
        </div>
      </div>

    </article>
  </div>
  
  <!-- 8 -->
  <div class="grid--cell">
    <article class="grid--item">
      
      <div class="preview--container">
        
        <a href="#" class="preview-image--container">
          <div class="preview-image"></div>
        </a>
        
        <div class="meta--container">
          <a href="#" class="issue">Issue XX</a>
          <a href="#" class="page">Page YY</a>
        </div>
        
      </div>
      
      <div class="content--container">

        <div class="title--container">
          <a class="title--text" href="#">Velit at Erum Vero Non</a>
        </div>

        <div class="tags--overflow-container">
          <ul class="tags--container">
            <li><a href="#" class="tag">Arum Vero</a></li>
            <li><a href="#" class="tag">Delect a Distinctio</a></li>
            <li><a href="#" class="tag">Lista e Fortna</a></li>
            <li><a href="#" class="tag">Libero</a></li>
            <li><a href="#" class="tag">Facere</a></li>
            <li><a href="#" class="tag ellipsis"><i class="far fa-ellipsis-h"></i></a></li>
          </ul>
        </div>

        <div class="hover--options">
          
          <a href="#" class="series button">
            <span class="icon-title"><i class="fad fa-books"></i> Series</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>    
          </a>
          
          <a href="#" class="latest button">
            <span class="icon-title"><i class="far fa-image"></i> Latest</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>  
          </a>
          
          <a href="#" class="follow button"><i class="fas fa-plus"></i></a>
        </div>
      </div>

    </article>
  </div>
  
  <!-- 9 -->
  <div class="grid--cell">
    <article class="grid--item">
      
      <div class="preview--container">
        
        <a href="#" class="preview-image--container">
          <div class="preview-image"></div>
        </a>
        
        <div class="meta--container">
          <a href="#" class="issue">Issue XX</a>
          <a href="#" class="page">Page YY</a>
        </div>
        
      </div>
      
      <div class="content--container">

        <div class="title--container">
          <a class="title--text" href="#">Aires Ott</a>
        </div>
        
        <div class="tags--overflow-container">
          <ul class="tags--container">
            <li><a href="#" class="tag">Arum Vero</a></li>
            <li><a href="#" class="tag">Delect a Distinctio</a></li>
            <li><a href="#" class="tag">Morbi Leo</a></li>
            <li><a href="#" class="tag">Libero</a></li>
            <li><a href="#" class="tag">Facere</a></li>
            <li><a href="#" class="tag ellipsis"><i class="far fa-ellipsis-h"></i></a></li>
          </ul>
        </div>

        <div class="hover--options">
          
          <a href="#" class="series button">
            <span class="icon-title"><i class="fad fa-books"></i> Series</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>    
          </a>
          
          <a href="#" class="latest button">
            <span class="icon-title"><i class="far fa-image"></i> Latest</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>  
          </a>
          
          <a href="#" class="follow button"><i class="fas fa-plus"></i></a>
        </div>
      </div>

    </article>
  </div>
  
  <!-- 10 -->
  <div class="grid--cell">
    <article class="grid--item">
      
      <div class="preview--container">
        
        <a href="#" class="preview-image--container">
          <div class="preview-image"></div>
        </a>
        
        <div class="meta--container">
          <a href="#" class="issue">Issue XX</a>
          <a href="#" class="page">Page YY</a>
        </div>
        
      </div>
      
      <div class="content--container">

        <div class="title--container">
          <a class="title--text" href="#">Lorem Ipsum Dolor: Sit Amet Consectetur Adipisicing</a>
        </div>
        
        <div class="tags--overflow-container">
          <ul class="tags--container">
            <li><a href="#" class="tag">Delect a Distinctio</a></li>
            <li><a href="#" class="tag">Facere</a></li>
            <li><a href="#" class="tag">Morbi Leo</a></li>
            <li><a href="#" class="tag">Eris Culpa</a></li>
            <li><a href="#" class="tag">Facere</a></li>
            <li><a href="#" class="tag">Quisus</a></li>
            <li><a href="#" class="tag ellipsis"><i class="far fa-ellipsis-h"></i></a></li>
          </ul>
        </div>

        <div class="hover--options">
          
          <a href="#" class="series button">
            <span class="icon-title"><i class="fad fa-books"></i> Series</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>    
          </a>
          
          <a href="#" class="latest button">
            <span class="icon-title"><i class="far fa-image"></i> Latest</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>  
          </a>
          
          <a href="#" class="follow button"><i class="fas fa-plus"></i></a>
        </div>
      </div>

    </article>
  </div>

  <!-- 11 -->
  <div class="grid--cell">
    <article class="grid--item">
      
      <div class="preview--container">
        
        <a href="#" class="preview-image--container">
          <div class="preview-image"></div>
        </a>
        
        <div class="meta--container">
          <a href="#" class="issue">Issue XX</a>
          <a href="#" class="page">Page YY</a>
        </div>
        
      </div>
      
      <div class="content--container">

        <div class="title--container">
          <a class="title--text" href="#">Santium Estias: Os Enda Sillum</a>
        </div>

        <div class="tags--overflow-container">
          <ul class="tags--container">
            <li><a href="#" class="tag">Volutpat</a></li>
            <li><a href="#" class="tag">Scelerisque</a></li>
            <li><a href="#" class="tag">Turpis Galo</a></li>
            <li><a href="#" class="tag">Quisus</a></li>
            <li><a href="#" class="tag">At Tempo</a></li>
            <li><a href="#" class="tag">Distincto a Tet</a></li>
            <li><a href="#" class="tag ellipsis"><i class="far fa-ellipsis-h"></i></a></li>
          </ul>
        </div>

        <div class="hover--options">
          
          <a href="#" class="series button">
            <span class="icon-title"><i class="fad fa-books"></i> Series</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>    
          </a>
          
          <a href="#" class="latest button">
            <span class="icon-title"><i class="far fa-image"></i> Latest</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>  
          </a>
          
          <a href="#" class="follow button"><i class="fas fa-plus"></i></a>
        </div>
      </div>

    </article>
  </div>

  <!-- 12 -->
  <div class="grid--cell">
    <article class="grid--item">
      
      <div class="preview--container">
        
        <a href="#" class="preview-image--container">
          <div class="preview-image"></div>
        </a>
        
        <div class="meta--container">
          <a href="#" class="issue">Issue XX</a>
          <a href="#" class="page">Page YY</a>
        </div>
        
      </div>
      
      <div class="content--container">

        <div class="title--container">
          <a class="title--text" href="#">Abori et Possi</a>
        </div>

        <div class="tags--overflow-container">
          <ul class="tags--container">
            <li><a href="#" class="tag">Gravidas</a></li>
            <li><a href="#" class="tag">Dipisci Triste</a></li>
            <li><a href="#" class="tag">Odio Aenean</a></li>
            <li><a href="#" class="tag">Urna</a></li>
            <li><a href="#" class="tag">Lista e Fortna</a></li>
            <li><a href="#" class="tag">Vuisi</a></li>
            <li><a href="#" class="tag ellipsis"><i class="far fa-ellipsis-h"></i></a></li>
          </ul>
        </div>

        <div class="hover--options">
          
          <a href="#" class="series button">
            <span class="icon-title"><i class="fad fa-books"></i> Series</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>    
          </a>
          
          <a href="#" class="latest button">
            <span class="icon-title"><i class="far fa-image"></i> Latest</span>
            <span class="new-tab"><i class="fas fa-arrow-circle-right"></i></span>  
          </a>
          
          <a href="#" class="follow button"><i class="fas fa-plus"></i></a>
        </div>
      </div>

    </article>
  </div>

</section>
:root {
  /* Palette */
  /* deep-seaweed: #0B1714 */
  --deep-seaweed--l: 19.21%;
  --deep-seaweed--c: 0.018;
  --deep-seaweed--h: 176.73;
  --deep-seaweed: var(--deep-seaweed--l) var(--deep-seaweed--c) var(--deep-seaweed--h);
  
  /* darker-seaweed: #172526 */
  --darker-seaweed--l: 25.22%;
  --darker-seaweed--c: 0.019;
  --darker-seaweed--h: 201.61;
  --darker-seaweed: var(--darker-seaweed--l) var(--darker-seaweed--c) var(--darker-seaweed--h);
  
  /* oatmeal: #D0BEAD */
  --oatmeal--l: 84%;
  --oatmeal--c: 0.051;
  --oatmeal--h: 65.75;
  --oatmeal: var(--oatmeal--l) var(--oatmeal--c) var(--oatmeal--h);
  
  /* Palette Settings */
  --primary--darkest: var(--deep-seaweed);
  --primary--darker: var(--darker-seaweed); 
  --secondary: var(--oatmeal);
  
  
  /* Type Settings */
  --mono: "IBM Plex Mono", monospace;
  --sans: "IBM Plex Sans", sans-serif;
  
  
  /* Content Settings */
  --container--block-padding: 3.25rem;
  --container--inline-padding: min(360px, 4dvw);
  
  
  /* Grid Settings */
  /* https://css-tricks.com/an-auto-filling-css-grid-with-max-columns + a flexible min-width */
  --grid-column-count: 4;
  
  --grid-gap: 12px;
  --grid-gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--grid-gap-count) * var(--grid-gap));
  
  --grid-item--min-width--constraint: 300px;
  --grid-item--max-width--constraint: 480px;
  --grid-item--min-width: min(100%, var(--grid-item--min-width--constraint));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
  
  --grid-item--bg: oklch(var(--primary--darker));
  --grid-item--color: oklch(var(--secondary));
}


/* UA Overrides */
*, *:before, *:after {
  box-sizing: border-box;
  line-height: 1cap;
}


/* Demo Styles */
html {
  background: linear-gradient(
                150deg,
                color-mix(in oklab, oklch(var(--secondary)), black 75%),
                color-mix(in oklab, oklch(var(--primary--darkest)), black 10%)
              );
  font-family: var(--sans);
  padding: var(--container--block-padding) var(--container--inline-padding);
  overflow-x: hidden; /* chrome? */
}

a:any-link {
  color: inherit;
}

a.button,
a.tag {
  text-decoration: none;
  transition-property: background, color;
}

.tags--overflow-container { 
  padding-inline: calc(var(--content-padding) + 4px);
  position: relative;
  
  /* Inline Fade */
  &:after {
    background: linear-gradient(
      90deg, 
      var(--grid-item--bg) var(--content-padding), 
      transparent calc(var(--content-padding) + 10px),
      transparent calc(100% - calc(var(--content-padding) + 10px)), 
      var(--grid-item--bg) calc(100% - var(--content-padding)))
    ;
    pointer-events: none;

    content: "";
    inset: 0;
    position: absolute;
    z-index: 6;
  }
}

.tags--container {
  container: tags-container / inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  
  .tags--overflow-container & {
    transform: translateX(0);
    will-change: transform;
  }
}

a.tag,
.tag {
  border: .05rem solid color-mix(in oklab, currentColor, transparent 80%);
  border-radius: 100px;

  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  user-select: none;

  padding-inline: 14px;
  padding-bottom: 1px;

  transition-property: background, border, transform;
  transition-duration: .15s, .15s, 6s;

  height: 32px;

  text-overlow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  &:not(.post-type):hover {
    border-color: transparent;
    background: color-mix(in oklab, currentColor, transparent 80%);
  }
    
  @media screen and (min-width: 600px) {
    flex-wrap: nowrap;
    overflow: hidden;
  }
}

.grid--container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-auto-rows: minmax(420px, auto);
  grid-auto-flow: dense; /* remove altogether when grid span can be clamped */
  gap: var(--grid-gap);
  margin: 0 auto;
  max-width: 1920px;
}


/* GRID CELL */
.grid--cell { 
  position: relative; 
  
  &:nth-of-type(1) .preview-image { background-image: url("https://picsum.photos/id/327/1280/900.webp"); }
  &:nth-of-type(2) .preview-image { background-image: url("https://picsum.photos/id/277/1280/900.webp"); }
  &:nth-of-type(3) .preview-image { background-image: url("https://picsum.photos/id/221/1280/900.webp"); }
  &:nth-of-type(4) .preview-image { background-image: url("https://picsum.photos/id/251/1280/900.webp"); }
  &:nth-of-type(5) .preview-image { background-image: url("https://picsum.photos/id/66/1280/900.webp"); }
  &:nth-of-type(6) .preview-image { background-image: url("https://picsum.photos/id/350/1280/900.webp"); }
  &:nth-of-type(7) .preview-image { background-image: url("https://picsum.photos/id/313/1280/900.webp"); }
  &:nth-of-type(8) .preview-image { background-image: url("https://picsum.photos/id/15/1280/900.webp"); }
  &:nth-of-type(9) .preview-image { background-image: url("https://picsum.photos/id/168/1280/900.webp"); }
  &:nth-of-type(10) .preview-image { background-image: url("https://picsum.photos/id/368/1280/900.webp"); }
  &:nth-of-type(11) .preview-image { background-image: url("https://picsum.photos/id/542/1280/900.webp"); }
  &:nth-of-type(12) .preview-image { background-image: url("https://picsum.photos/id/851/1280/900.webp"); }
}

/* GRID ITEM */
.grid--item { 
  --preview--h: 325px;
  
  --content-gap: 14px;
  --content-padding: 12px;
  
  --options--h: 42px;
  --hover--h: calc(var(--content-gap) + var(--options--h));
  --hover-offset: calc((var(--hover--h) / 2) * -1);
  
  --shadow-blur: 36px;
  --shadow-transparency: 60%;
  
  border-radius: 18px;
  color: var(--grid-item--color);
  container: grid-item / inline-size;
  
  display: grid;
  grid-template-rows: var(--preview--h) 1fr;
  align-content: start;
  filter: drop-shadow(0 0 var(--shadow-blur) color-mix(in oklab, oklch(var(--primary--darkest)), transparent var(--shadow-transparency)));
  
  position: relative;
  transition-property: transform, filter;
  transition-duration: .3s;
  
  will-change: height, transform;
  height: 100%;
  width: 100%;
  
  /* bg */
  &:before {
    background: var(--grid-item--bg);
    clip-path: inset(0% 0% round 18px);   
    will-change: background;
    
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
  }

  .preview-image--container,
  .preview-image {
    height: 100%;
    width: 100%;
  }
  
  .preview--container {
    background: oklch(var(--secondary));
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    position: relative;
    height: var(--preview--h);
    width: 100%;
  }
    
  .preview-image {
    --bg-scale: 1.15, 1.15;
    --bg-position: 50% 50%;
    
    background-size: cover;
    transform: scale(var(--bg-scale)) translateZ(1px);
    background-position: var(--bg-position);
    background-repeat: no-repeat;
    filter: grayscale(100%);
    mix-blend-mode: multiply;
    opacity: .75;
    
    will-change: background, transform;
    
    transition-property: background, filter, opacity, transform;
    transition-duration: 4.5s, .15s, .3s, 3s;
  }
  
  .meta--container {
    display: flex;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    height: 30px;
    position: absolute;
    z-index: 6;

    .issue,
    .page {       
      align-items: center;
      display: flex;

      height: 100%;
      padding-inline: 12px; 
      text-decoration: none;

      &:hover { text-decoration: underline; }
    }

    .issue { 
      background: oklch(var(--primary--darkest));
      border-radius: 4px 0 0 0;
      color: oklch(var(--secondary));
    }
    
    .page {
      background: var(--grid-item--bg);
    }
  }
  
  .content--container {   
    clip-path: inset(0% 0% round 0 0 18px 18px); /* <3 */
    display: grid;
    align-self: stretch;
    gap: var(--content-gap);
    padding-block: var(--content-padding) calc(var(--content-padding) + 2px);
    height: 100%;
    
    .title--container,
    .tags--container,
    .hover--options {
      width: 100%;
    }
    
    .title--container {     
      align-self: stretch;
      height: auto;
      padding-inline: calc(var(--content-padding) + 8px);

      a.title--text {
        font-size: 22px;
        font-weight: 500;
        line-height: 1.2;
        margin: 0;
        padding-bottom: 1px;
        text-decoration-color: color-mix(in oklab, currentColor, transparent 86%);
        text-decoration-skip-ink: none;
        text-decoration-thickness: 3px;
        
        display: -webkit-box;
        -webkit-line-clamp: 10;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        
        &:hover {
          text-decoration-color: color-mix(in oklab, currentColor, transparent 72%);
        }
      }
    }
    
    /* Title Ellipsis Configs */
    /* note: keep like this, don't move to @container */
    @media screen and (min-width: 320px) { 
      .title--container { 
        min-height: 2.4rlh; 
        
        a.title--text { -webkit-line-clamp: 2; }
      }
    }
    @media screen and (min-width: 600px) { 
      .title--container { 
        min-height: unset;
        a.title--text { -webkit-line-clamp: 1; }
      }
    }
    /* */
    
    .tags--overflow-container {
      display: flex;
      align-items: flex-end;
    }
  }
  
  .hover--options {
    display: none;
    flex-wrap: wrap; 
    gap: 6px;
    margin-top: -4px;
    padding-inline: calc(var(--content-padding) + 4px);
    
    .button {
      border-radius: 100px;
      display: flex;
      height: var(--options--h);
      align-items: center;
      font-weight: 600;
      transition-duration: .15s;
    }
    
    .follow {
      border: 4px solid color-mix(in oklab, currentColor, transparent 80%);
      border-radius: 100px;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
      width: var(--options--h);
      
      transition-property: background, border;
      
      &:hover {
        border-color: transparent;
        background: color-mix(in oklab, currentColor, transparent 80%);
      }
    }
    
    .series,
    .latest {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex: 1; 
      padding-inline: 8px 14px;
      position: relative;
      
      .icon-title { 
        display: flex; 
        align-items: center;
        height: 100%; 
        gap: 8px; 
      }
      
      [data-icon="books"],
      [data-icon="image"] { 
        opacity: 75%; 
      }
      
      .new-tab {
        display: none;
        opacity: 45%;
        rotate: -36deg;
        
        will-change: display;
      }
    }
    
    .series {
      background: color-mix(in oklab, currentColor, transparent 90%);
      
      &:hover {
        background: color-mix(in oklab, currentColor, transparent 80%);
        color: oklch(var(--primary--darkest));
      }
    }
    
    .latest {
      background: oklch(var(--primary--darker));
      color: oklch(var(--secondary));
      
      &:hover {
        background: oklch(var(--primary--darkest));
      }
    }
  }
    
  &:not(.featured) {
    .preview--container {
      clip-path: inset(0% 0% round 18px 18px 0 0); /* <3 */
    }
  }
  
  &.featured {
    
    .post-type {
      left: -12px;
      top: 12px;
      position: absolute;
    }
      
    .preview--container {
      clip-path: inset(0% 0% round 18px 18px 0 0);
      justify-content: unset;
    }
    
    .tags--container {
      margin-bottom: 12px;
      position: absolute;
      z-index: 6;
    }
    
    .content--container { padding-bottom: calc(var(--content-padding) + 4px); }
    
    .intro--container,
    .description--container {
      line-height: 2.2ex;
      margin: 0;
      padding-inline: calc(var(--content-padding) + 8px);
    }
    
    @media screen and (min-width: 652px) {
      grid-template-columns: 1fr 1fr;
      
      .preview--container {
        clip-path: inset(0% 0% round 0 18px 18px 0);
        height: 100%;
        order: 2;
      }
    }
  }
  
  /* Grid Cell :hover/:focus */
  &:hover, 
  &:focus {
    --grid-item--bg: oklch(var(--secondary));
    --grid-item--color: oklch(var(--primary--darker));
    
    height: auto;
    transform: translateY(var(--hover-offset));
    position: absolute;
    z-index: 5;
    
    &:before {
      --shadow-blur: 90px;
      --shadow-transparency: 0%;
    }
        
    .hover--options { display: flex; }    
    .preview--container { background: oklch(var(--primary--darkest)); }
    
    .preview-image {
      --bg-scale: 1, 1;
      --bg-position: 50% 100%;
      
      filter: revert;
      mix-blend-mode: revert;
      opacity: revert;
    }
  }
}

/* `grid-item` Container Queries */
@media screen and (min-width: 600px),
@container grid-item (min-width: 300px) { 
  .tags--container { flex-wrap: nowrap; }
}

@container grid-item (min-width: 360px) {
  .grid--item {
    
    .hover--options {
      .series,
      .latest {       
        justify-content: space-between;
        padding-inline: 18px 12px;
        
        .new-tab { display: block; }
      }
    }
  }
}
/*  */

/* MEDIA QUERIES */
:root {
  @media screen and (min-width: 800px) { --grid-item--min-width--constraint: 360px; }
}

@media screen and (min-width: 600px) {
  .grid--item {
    &:hover {
      .tags--container {
        animation: marquee 10s linear alternate infinite;
        animation-delay: .6s;
        animation-timing-function: ease-out;
        
        &:hover {
          animation-play-state: paused;
        }
      }     
    }
  }
}
/*  */

/* ANIMATIONS */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-48%); }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.