.canvas-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-preview-grid {
  margin: 2rem 0;
}

.preview-image {
  width: 100%;
  outline: 1px solid var(--fart-primary);
  object-fit: cover;
  border-radius: 1em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.preview-image:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  outline: 1px solid var(--fart-secondary);
}

.outbound::after {
  content: " " attr(href) "↗";
  color: grey;
  font-size: 0.7em;
}

.outbound:hover::after {
  color: var(--fart-secondary);
}