.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  column-gap: 20px;
  row-gap: 30px;
  padding: 0.625rem 2.5rem 1.25rem;
}

@media (max-width: 725px) {
  .project-grid {
    padding: 0.833rem 1.66rem 1.66rem; 
  }
}

.project {
  display: flex;
  flex-direction: column;
  transition-duration: var(--hover-transition-duration);
}

.project:active {
  scale: 1.05;
}

@media (min-width: 1025px) {
  .project *:hover {
    cursor: pointer;
  }
  
  .project:hover {
    scale: 1.05;
  }
}

.project p {
  margin: 10px 0px 0px;
}

.project-thumbnail-container {
  position: relative;
}

.project-thumbnail {
  width: 100%;
  border-radius: 10px;
}

.identifier-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0px;
  left: 1.06rem;
  transform: translate(-50%, 20%);
  background-color: rgba(12, 19, 11, 0.85);
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 0.375rem 0.9375rem;
}

.engine-identifier {
  width: 2rem;
}

.project-title {
  position: absolute;
  bottom: 0px;
  left: 50%;
  padding: 0.125rem 0.3125rem;
  transform: translate(-50%, 20%);
  white-space: nowrap;
  font-size: var(--category-size);
  background-color: rgba(12, 19, 11, 0.85);
  border-radius: 0.375rem 0.9375rem;
  color: #ecffc6;
}

.project-notables {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 20px;
}

.notable {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  border-radius: 15px;
}

.notable-name {
  font-size: var(--detail-size);
  font-weight: 500
}

.distinguisher {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}