section.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0px auto;
}

section.list h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  width: 100%;
  text-align: left;
}

section.list ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 20px;
}

section.list ul li:first-of-type {
  grid-column: span 2;
}
section.list ul li:not(:first-of-type) {
  grid-column: span 1;
}

section.list ul li article {
  background: var(--background-light);
  padding: 20px;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
  text-align: left;
}

section.list article header {
  padding-bottom: 10px;
  margin-bottom: 10px;
}

section.list article header h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

section.list article header time {
  font-size: 1rem;
  color: var(--font-color-highlight);
}

section.list article footer {
  bottom: 0px;
}

section.list article a { text-decoration: none; }
section.list article p { margin: 0; }
section.list article li { list-style: none; }


section.list article footer ul.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0px;
  margin: 0px;
}

section.list article footer ul.tags li {
  background: var(--background-highlight);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.8rem;
  margin-top: 10px;
  color: var(--font-color-highlight);
}
section.list article footer ul.tags li a {
  color: var(--font-color-highlight);
  text-decoration: none;
  padding-left: 5px;
  padding-right: 5px;
}
section.list article footer ul.tags li a::before {
  content: '#';
  color: red;
  font-weight: bold;
  padding-right: 5px;
}

section.list footer.pagination {
  display: inline-flex;
  gap: 5px;
}

section.list footer.pagination div {
  background: var(--background-black);
  padding: 5px;
  border-radius: 5px;
}

section.list footer.pagination div.active {
  background: var(--background-highlight);
}

/* display div.next-page as the last element in the inline-flex group */
section.list footer.pagination div#next-page {
  order: 99;
}

section.list footer.pagination div#previous {
  order: -1;
}

section.list footer.pagination a {
  text-decoration: none;
}




@media (max-width: 768px) {
  section.list ul {
    grid-template-columns: repeat(2, 1fr);
  }
  section.list ul li:first-of-type {
    grid-column: span 2;
  }
  section.list ul li:not(:first-of-type) {
    grid-column: span 2;
  }
}