.horizontal-container {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 10px 10px;
}
.horizontal-title{
    font-size: var(--title-font-size);
    font-weight: bold;
    margin-bottom: 10px;
}
.horizontal-grid {
  display: flex;
  flex-direction: row;
  column-gap: 10px;
}

.horizontal-grid:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.hg-title {
  flex: 1 1 30%; /* Or just `flex: 1;` to auto-fill remaining space */
}

.hg-item {
  flex: 0 0 70%;
  line-height: 1.5;
}

.hg-title {
  font-size: var(--font-size-sm);
}

.hg-metas {
  display: flex;
  flex-direction: row;
  font-size: var(--tag-font-size);
  column-gap: 10px;
  margin-top: 5px;
}

.hg-tag a {
  color: var(--primary-color);
  font-weight: bold;
}

.hg-date {
  color: var(--tag-color);
}