.projects-grid {
  --card-width: 21rem;

  display: flex;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.projects-grid li {
  display: flex;
  flex: 0 0 var(--card-width);
  flex-direction: column;
  margin: 0 var(--spacing-4) var(--spacing-8);
  background-color: var(--color-background);
  box-shadow: var(--elevation-dp2);
  color: var(--color-text);
  border: none;
}

@media (prefers-color-scheme: dark) {
  .projects-grid li {
    border: 2px solid var(--color-text);
  }
}

.projects-grid img {
  max-width: var(--card-width);
  width: 100%;
}

.projects-grid .card-contents {
  padding: var(--spacing-4);
  flex: 1;
}

.projects-grid .card-contents > * {
  color: var(--color-text);
}

.projects-grid .card-contents h2 {
  font-size: 1.75rem;
}

.projects-grid .card-contents p {
  margin-bottom: 0;
}

.projects-grid .card-actions {
  padding: var(--spacing-4);
  text-align: center;
}

.projects-grid .card-actions a::after {
  content: var(--new-window-url);
  margin: var(--spacing-1);
}

.projects-grid .card-actions a:first-of-type {
  margin-right: var(--spacing-8);
}

@media (max-width: 32rem) {
  .projects-grid li {
    flex-basis: 16rem;
  }
}