#project {
  position: relative;
  
}
#project .arquithecture{
  display: grid;
  padding: 40px 0;
  grid-template-columns: 4fr 8fr;
  border-top: 1px solid var(--primary-color);
}
#project .arquithecture .primary-btn-custom{
  background-color: #5E5E5E;
  width: fit-content;
}
#project .arquithecture .areas{
  display: grid;
  grid-template-columns: repeat(6, auto);
  justify-content: space-between;
  gap: 20px;
}
#project .arquithecture .areas p{
  font-weight: 700;
}
@media(max-width: 1400px){
  #project .arquithecture .areas {
      grid-template-columns: repeat(3, auto);
    }
        #project .arquithecture {
          grid-template-columns: 5fr 7fr;;
        }
}
@media(max-width: 998px){
  #project .arquithecture {
      grid-template-columns: 1fr;
      gap: 20px 0;
  }
}
@media(max-width: 480px){
  #project .arquithecture .areas {
      grid-template-columns: repeat(2, auto);
      gap: 20px 30px;
    }
}