/* TODO: Improve scoping. */
small.annotation {
  text-align: center;
  margin-top: -1rem;
  margin-bottom: 1rem;
}

/* TODO: Improve scoping. */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1rem 0;
  text-align: center;
}

ul.projects {
  --gap: 1rem;

  display: flex;
  flex-wrap: wrap;
  max-width: 768px;
  padding: 0;
  gap: var(--gap);
}

ul.projects>li.project-card {
  --border-width: 1px;
  --border-radius: 4px;
  --padding: 1.5rem;

  display: block;
  width: calc(50% - (var(--padding) * 2) - var(--gap) / 2 - var(--border-width) * 2);
  padding: var(--padding);
  border-radius: var(--border-radius);
  border: var(--border-width) solid rgba(0, 0, 0, 0.1)
}

ul.projects>li.project-card>.title {
  display: block;
  margin-bottom: -0.25rem;
  font-weight: bold;
}

ul.projects>li.project-card>p {
  margin: 0.5rem 0;
}

ul.projects>li.project-card>p:last-child {
  margin-bottom: 0;
}

ul.projects>li.project-card .stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

ul.projects>li.project-card .stack>span {
  display: block;
  padding: 0.25rem 0.5rem;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  font-size: small;
}

@media(max-width: 768px) {
  ul.projects {
    padding: 0
  }

  ul.projects>li.project-card {
    width: 100%;
  }
}