.project {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: calc(var(--gap) / 2);
  padding: calc(var(--gap) / 2);
  border-radius: var(--border-radius);
  text-decoration: none;
  background-color: color-mix(in srgb, var(--main-color), transparent 95%);

  &:hover {
    color: var(--text-color);
    background-color: color-mix(in srgb, var(--main-color), transparent 90%);
  }
}

.project__title {
  margin-bottom: 0;
  font-size: 1.2rem;
}

.project_description {
  margin-top: 0;
  font-size: 0.8rem;
  opacity: .85;
}

.project__image {
  aspect-ratio: 16 / 9;
}