:root{
  --color-gray-dark: rgba(30, 30, 30, 0.3); 
  --color-primary-dark:#00848a;


}
.projects{

     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 20px;
     margin-bottom: 60px;
  
}



.project-card{
     width: 100% ;
     max-width: 1200px;
     margin: 20px auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     border-radius: 8px;
     background-color:white;
     align-items: center;
     justify-items: center;
     overflow: hidden;
     min-height: 500px;

}

.project-card:nth-child(odd) figure {
  order: 2;
}

.project-card:nth-child(odd) section {
  order: 1;
}

@media (max-width: 768px) {
   .project-card {
          grid-template-columns: 1fr;
          min-height: 200px;
          padding-bottom: 4px;

   }

   .project-card:nth-child(odd) figure {
  order: 1;
}

.project-card:nth-child(odd) section {
  order: 2;
}



}

.project-card figure{
     background-color: #00ADB5;
     width: 100%;
     height: 100%;
     min-height: inherit;
     display: flex;
     align-items: center;
     justify-content: center;
     
}

.project-card figure img {
  width: 90%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  max-height:auto;
  
}


.project-card section{
       padding: 8px 24px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: left;
       min-height: inherit;
       height: 100%;

}

.project-title{
     font-size: 24px;
     font-weight: 600;
     margin-top: 0px;
     align-self: flex-start;

}

.project-description{
     font-size: 16px;
     margin-bottom: 16px;
     text-align: justify-left;
     color: var(--color-gray-hover) ;
}

.project-card section a{
    
     color: inherit;
}

.project-card section button {
     justify-self: left;
     align-self: flex-start;

}
.border-btn {
     background-color: transparent;
     border: 2px solid ;
     padding: 8px 16px;
     border-radius: 20px;
     cursor: pointer;
     font-weight: bold;  
     font-size: 16px;;   
}