html {
  scroll-behavior: smooth;
}
body {
  background-color: #0A0A0A;
}
#projects-grid > div {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#projects-grid:hover > div:not(:hover) {
  transform: scale(0.98);
  opacity: 0.5;
}
#projects-grid > div:hover {
  transform: scale(1.03);
  z-index: 10;
}
.project-thumbnail {
  cursor: pointer;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}
.project-thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.project-thumbnail:hover::after {
  opacity: 1;
}
.thumbnail-title {
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.project-thumbnail:hover .thumbnail-title {
  transform: translateY(0);
  opacity: 1;
}
.filtered-out {
  order: 1;
  opacity: 0.3;
  transform: scale(0.95);
}
.filtered-in {
  order: 0;
  opacity: 1;
  transform: scale(1);
}
#about-lightbox-content {
  max-height: 70vh;
  overflow-y: auto;
} /* Broken Grid Layout */ @media (min-width: 640px) {
  #projects-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
  }
  .project-thumbnail:nth-child(11n+1) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .project-thumbnail:nth-child(11n+2) {
    grid-column: span 2;
    grid-row: span 1;
  }
  .project-thumbnail:nth-child(11n+3) {
    grid-column: span 2;
    grid-row: span 1;
  }
  .project-thumbnail:nth-child(11n+4) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .project-thumbnail:nth-child(11n+5) {
    grid-column: span 2;
    grid-row: span 1;
  }
  .project-thumbnail:nth-child(11n+6) {
    grid-column: span 2;
    grid-row: span 1;
  }
  .project-thumbnail:nth-child(11n+7) {
    grid-column: span 3;
    grid-row: span 2;
  }
  .project-thumbnail:nth-child(11n+8) {
    grid-column: span 3;
    grid-row: span 2;
  }
  .project-thumbnail:nth-child(11n+9) {
    grid-column: span 2;
    grid-row: span 1;
  }
  .project-thumbnail:nth-child(11n+10) {
    grid-column: span 2;
    grid-row: span 1;
  }
  .project-thumbnail:nth-child(11n+11) {
    grid-column: span 2;
    grid-row: span 1;
  }
}
@media (min-width: 1024px) {
  #projects-grid {
    grid-auto-rows: 250px;
  }
}