/* Parent Container (Flexbox) */
.project-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Precise spacing between all cards ↔️ ↕️ */
}

.project-blurb {
  color: #fae695 !important;
}

/* Project Card (Mobile first - default stacked) */
.project-card {
  width: 100%; /* Takes up full width on small screens 📱 */
  background-color: #ff4444; 
  border: 1px solid #fae695;
  border-radius: 12px; /* Smooth rounded corners ↪️ */
  padding: 20px; 
  box-sizing: border-box; /* Keeps padding from breaking width calculations */
}

.project-card:hover { 
  background-color: #fae695;
  color: #ff4444;
}

.project-card:hover .project-logo {
  filter: invert(1) hue-rotate(180deg);
  color: #5a081c;
}

/* Logo Styles */
.project-logo {
  max-width: auto; 
  height: 100px;     
  margin-bottom: 15px; 
  display: block;   
}

/* Desktop Styles (Side-by-side) */
@media (min-width: 768px) {
  .project-card {
    /* 100% width minus 40px (two 20px gaps), divided among 3 cards 💻 */
    width: calc((100% - 40px) / 3); 
  }
}