.project-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
  background-color: #2d2d2d;
}

.project {
  width: 600px; /* Adjust the width as needed */
  margin: 5px;
  overflow: hidden;
  display: flex;
}

.image-container {
  flex: 1;
  position: relative;
}

.before-image,
.after-image {
  width: 100%;
  height: 250px;
  display: block;
  transition: transform 0.5s ease-in-out;
}

.label {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #0c0c0c;
  font-size: 16px;
  font-weight: bold;
}

.before-image:hover {
  transform: scale(1.2);
}

/* Media query for screens with a width equivalent to a laptop */
@media screen and (max-width: 1024px) {
  .project {
    flex-direction: column; /* Change layout to column on smaller screens */
  }
}