.meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-comfortable);
  font-size: var(--font-size-responsive);
}

.section {
  @mixin py var(--spacing-snug);
}

.label {
  @mixin mb var(--spacing-tight);
  @mixin pb var(--spacing-tight);
  @mixin border-b var(--size-1), solid, var(--color-surface-inverse);

  display: block;
  font-size: var(--typo-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--typo-spacing-comfortable);
}

.author {
  @mixin anim-txt-characterglitch;

  font-family: var(--font-mono);
  font-size: var(--typo-size-sm);
  font-weight: var(--typo-weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;

  &:hover {
    color: var(--color-primary);
  }
}

.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-tight);
}

.tag {
  padding: var(--spacing-tight) var(--spacing-snug);
  border: var(--size-1) solid var(--color-palette-charcoal-gray);

  font-family: var(--font-mono), monospace;
  font-size: var(--typo-size-sm);
  font-weight: var(--typo-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--typo-spacing-relaxed);

  background: var(--color-palette-charcoal-gray);

  & .link {
    color: var(--color-palette-off-white);
    transition: color 0.5s ease-in-out;

    &:hover {
      color: var(--color-primary);
    }
  }
}

.updatedate {
  font-family: var(--font-mono), monospace;
  font-size: var(--typo-size-sm);
  font-weight: var(--typo-weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}