.projectsarea {
  display: grid;
  gap: 16px;
  padding: 16px;
  background-color: var(--nuvo-slate);
  grid-template-columns: repeat(1, 1fr);
  position: relative;
  z-index: 0;
  width: 100%;
  align-items: start; /* Aligns children to the top */
}


.filters {
  display: grid;
  gap: 8px;
  background-color: var(--nuvo-slate);
  grid-template-columns: repeat(1, 1fr);
  grid-column: span 1 / auto;
  position: relative;
  z-index: 0;
  width: 100%;
  display: none;
  align-items: start;
  grid-template-columns: 1fr;
}

.filter-group h3 {
  font-weight: 600;
  padding: 0px !important;
  margin: 0px !important;
}

.filter-group {
  float: left;
  width: 100%;
  padding: 0px !important;
  margin: 0px !important;
}

.filter-group label {
  width: 100%;
  float: left;
  padding: 0px !important;
  margin: 0px !important;
}



.projectsgrid {
  display: grid;
  gap: 16px;
  background-color: var(--nuvo-slate);
  grid-template-columns: repeat(3, 1fr);
  grid-column: span 4 / auto;
  position: relative;
  z-index: 0;
  width: 100%;
}


.projectitem {
  padding: 12px;
  background: #fff;
  margin-bottom: 12px;
  float: left;
  width: 100%;
  position: relative;
}


.projectitem {
  padding: 8px;
  background: #fff;
  margin-bottom: 12px;
  float: left;
  width: 100%;
  position: relative;
  box-shadow: 0px 2px 1px rgba(0,0,0,0.3);
  
                                                                                                                                                  line-height: 1.2;
}

.projectitem h3 {
  padding: 8px 0px;
  font-size: 24px;
  font-weight: 600;
  float: left;
  
  width: 100%;
  position: relative;
margin: 0px;
    
  
}

.projecttitle {
  padding: 8px 0px;
  font-weight: 600;
  padding-right: 8px;
  width: 100%;
  position: relative;
margin: 0px;
    
  
}

.projectitem .date {
  /* padding: 8px; */
  font-weight: 400;
  margin-bottom: 12px;
  float: left;
  width: 100%;
  position: relative;
  color: var(--nuvo-orange);
  line-height: 1;
}



.projectitem {
  padding: 12px;
  background: #fff;
  margin-bottom: 12px;
  float: left;
  width: 100%;
  position: relative;
}


.articleinfo {font-size: 12px;}

.articlelink {
  float: left;
  margin-top: 12px;
}

.articlelink a{
  background: var(--nuvo-orange);
  font-size: 14px;
  padding: 8px 16px;
  float: left;
  color: #fff;
}

#pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.popupgallery.projectitem {
  padding: 12px;
  background: #fff;
  margin-bottom: 12px;
  float: left;
  width: 100%;
  position: relative;
}

.popupgallery .projectitem:before {
  padding: 6px;
  font-size: 24px;
  content: "+";
  background: #ffffff70;
  top: 16px;
  right: 16px;
  line-height: 16px;
  position: absolute;
  pointer-events: none
}

.popupgallery .projectitem:hover:before {
  padding: 6px;
  font-size: 24px;
  content: "+";
  background: #ffffffeb;
  top: 16px;
  right: 16px;
  line-height: 16px;
  position: absolute;
  pointer-events: none
}


 @media only screen and (max-width :768px) {

.projectsgrid {

  grid-template-columns: repeat(2, 1fr);

}

 }

 @media only screen and (max-width :540px) {

.projectsgrid {

  grid-template-columns: repeat(1, 1fr);

}

 }