/* PROJECT FONTS */
/* Project titels */
.project-info {
    text-align: right;  
    margin-top: 12px;
}

/* Hoofdprojecttitel */
.project-title {
    font-family: inherit;
    font-size: 10px;       
    font-weight: 300;     
    font-style: normal;   
    margin-bottom: 2px;   
}

/* Subtitel onder de titel */
.project-subtitle {
    font-family: inherit;
    font-size: 10px;       
    font-weight: 300;     
    font-style: italic;   
    color: #000;       
}

/* PROJECT LAYOUT ALGEMEEN*/
/* Projecten sectie */
.projects {
  display: flex;
  flex-direction: column;
  gap: 160px;
  padding: 120px 20px;
}

/* Links resetten */
.projects a {
  text-decoration: none;
  color: inherit;
}

/* PROJECT LAYOUT MULTI ITEMS */
.project-multi .project-multi-pictures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;       
}

.project-multi .project-multi-pictures img {
  width: 100%;
  height: auto;     
  display: block;
  object-fit: contain; 
}

.project-multi {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%; 
}

/* PROJECT LAYOUT GROTE ITEM */
.project-large {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.project-large img {
  width: 100%;
  height: auto;      
  display: block;
}

@media (max-width: 1024px) {
  .projects {
    gap: 40px;           /* ipv 160px */
    padding: 80px 30px;
  }

  .project-multi .project-multi-pictures {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .projects {
    gap: 48px;
    padding: 60px 30px;
  }

  .project-multi .project-multi-pictures {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}