.project img {
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
  z-index: 1;
  background-color: var(--secondary_color);
}

.project .overlay {
  background-color: var(--main_color);
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}

.project .description {
  position: absolute;
  top: 1vw;
  left: 1vw;
  color: var(--secondary_color);
  /* mix-blend-mode: difference; */
  z-index: 0;
  transform: translateX(-110%);
  transition: transform 0.3s ease;
}

.project .description * {
  color: var(--secondary_color);
}

.project .title-date-wrapper {
  display: flex;
  width: 95%;
  position: absolute;
  bottom: 1vw;
  left: 1vw;
  mix-blend-mode: difference;
  flex-direction: column-reverse;
  z-index: 3;
  overflow: hidden;
  word-wrap: break-word;
}

.project .title-date-wrapper * {
  color: var(--secondary_color);
}

.project:hover {
  /* background-color: black; */
}

body.has-hover .project:hover img {
  opacity: 0;
}

body.has-hover .project:hover .description {
  transform: none;
}

.title-date-wrapper .date {
  /* text-align: right; */
  /* margin: 0; */
  /* margin-left: auto; */
  color: var(--grey_color);
  font-weight: 300;
  font-size: calc(var(--p_font_size) * 0.75);
}

.intro {
  margin-bottom: var(--heading_gap);
}

/* Masonry grid styles */
.project-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--masonry_gap); /* Space between items */
  margin-bottom: var(--heading_gap);
}

.project {
  /* flex: 1 1 calc(25% - 20px); */
  box-sizing: border-box;
  flex-grow: 0;
  position: relative;
  transition: background-color 0.3s ease;
  overflow: hidden;
}

.project a {
  display: flex;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--masonry_gap); /* Space between items in a column */
}