.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin: 80px 4px 0 4px;
}

.project-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 2;
  background: var(--highlight-color-dark);
}

@media (max-width: 1200px) {
  .projects-grid { grid-template-columns: 1fr 1fr; }
  .project-item { aspect-ratio: 4 / 2.5; }
}

@media (max-width: 600px) {
  .projects-grid { grid-template-columns: 1fr; }
  .project-item { aspect-ratio: 4 / 2; }
}



.project-item img {
  display: block;
  width: 100%;
  height:100%;
  object-fit: cover;
}


.project-item img {  /* Showing images only after the are loaded. */
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.4s ease;
  transform: scale(1);
}
.project-item img.loaded {
  opacity: 1;
}

.project-item:hover img {
  transform: scale(1.02);
}




.overlay-text {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  padding: 1em;
  color: white;
  font-size: 1rem;
  text-align: left;
  opacity: 0.65;
  transition: opacity 0.2s ease;
  box-sizing: border-box;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,     /* 70% Deckkraft bei 0% */
    rgba(0, 0, 0, 0.4) 15%,    /* bleibt 70% bis 10% */
    rgba(0, 0, 0, 0) 35%       /* ab 10% bis 25% flacht es auf 0% ab */
  );
}

.project-item:hover .overlay-text {
  opacity: 1;
  background: rgba(2, 115, 156, 0.7);
  color: white;
}


.overlay-year {
  position: absolute;
  /* width: 100%; */
  bottom: 0;
  right: 0;
  padding-right: 1rem;
  color: white;
  font-size: 8rem;
  font-weight: 100;
  text-align: right;
  opacity: 0.0;
  transition: opacity 0.2s ease;
  box-sizing: border-box;
  transform: translateY(15%);
}
.project-item:hover .overlay-year {
  opacity: 0.15;
}
@media (max-width: 860px) {
  .overlay-year { font-size: 6rem; }
}
@media (max-width: 700px) {
  .overlay-year { font-size: 5rem; }
}
@media (max-width: 600px) {  /* Breakpoint to 1 column grid */
  .overlay-year { font-size: 6rem; }
}