.blog-container {  display: grid;
  grid-template-columns: 4fr 2fr;
  grid-template-rows: 1fr;
  gap: 0em 1em;
  grid-auto-flow: row;
  grid-template-areas:
    "articles filter";
}

.articles {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.1fr 1.8fr 0.1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "art-title"
    "art-list"
    "art-footer";
  grid-area: articles;
}

.art-list  {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    ". . .";
  align-self: start;
  grid-area: art-list; 
}

.art-box { grid-area: art-box; }

.art-title { grid-area: art-title; }

.filter {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "author" 
    "categories"
    "tags";
  grid-area: filter;
}

.categories {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.1fr 1.9fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "cat-title"
    "cat-list";
  grid-area: categories;
}

.cat-title { grid-area: cat-title; }
.cat-list {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    ". ."; 
  align-self: start;
  grid-area: cat-list; 

}

.tags {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.1fr 1.9fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "tag-title"
    "tag-list";
  grid-area: tags;
}

.tag-list { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    ". .";
  align-self: start;  
  grid-area: tag-list; 
}

.tag-title { grid-area: tag-title; }