.projects {
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  gap: calc(96vw / 19.6); 
  margin: calc(48vw / 19.6); 
}

.project {
  display: flex; 
  flex-direction: column; 
  gap: calc(16vw / 19.6); 
}

.project:nth-child(odd) {
  transform: translateY(calc(-48vw/19.6)); 
}

.project:nth-child(even) {
  transform: translateY(calc(48vw/19.6)); 
}

.project-info {
  display: flex; 
  flex-direction: row; 
  justify-content: space-between; 
}

.project-image {
  width: calc(528vw / 19.6); 
  aspect-ratio: 528 / 704; 
  display: block; 
  border-radius: 2.5em; 
  background-size: 100%; 
  background-position: center; 
  transition: all 0.3s; 
}

.project-image:hover {
  background-size: 120%; 
}

.project-name {
  width: 40%; 
  margin: 0; 
  line-height: normal; 
  white-space: nowrap; 
  font-size: calc(48vw / 19.6); \
}

.project-type {
  width: 50%; 
  text-align: right; 
}

@media (max-width: 1023px) {
  .projects {
    flex-direction: column; 
    margin: unset; 
    gap: 48px; 
  }
  
  .project {
    gap: 36px; 
  }
  
  .project:nth-child(odd) {
    transform: unset; 
  }
  
  .project:nth-child(even) {
    transform: unset; 
  }
  
  .project-image {
    width: 100%; 
  }
  
  .project-info {
    flex-direction: column; 
    gap: 24px; 
  }
  
  .project-name {
    width: 100%; 
    font-size: calc(32vw / 4.24); 
  }
  
  .project-type {
    width: 100%; 
    text-align: left; 
  }
}