.cnt-projects {
  background-color: var(--border-color);
  padding: 25px 15px;
  border-radius: .7rem;
}

.cnt-projects {
  display: flex;
  flex-direction: column;
}

.cnt-projects article {
  display: flex;
  flex-direction: column;
  margin: 25px 0;
  gap: 10px;
}

#projects .cnt-img {
  overflow: hidden;
  /* Evita que la imagen sobresalga */
  display: inline-block;
  /* Bordes para que no pierda los bordes la imagen al hacer el zoom */
  border-radius: .7rem;
}

#projects .img-project {
  width: 100%;
  border-radius: .7rem;
  transition: transform 0.3s ease-in-out;
}

#projects article:hover .img-project {
  transform: scale(1.1);
  /* Aumenta ligeramente la imagen */
}

#projects .cnt-info-project {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 5px;
}

.cnt-info-project .icon {
  width: 27px;
}

.cnt-info-project p {
  margin-top: -8px;
  color: var(--text-secondary);
}

#projects .cnt-buttons {
  display: flex;
  gap: 10px;
}


@media (min-width: 769px) {

  .cnt-projects article {
    display: flex;
    flex-direction: row;
    margin: 25px 0;
    gap: 20px;
    margin-bottom: 30px;
  }

  #projects .cnt-img {
    width: 40%;
    overflow: hidden;
    /* Evita que la imagen sobresalga */
    display: inline-block;
    /* Bordes para que no pierda los bordes la imagen al hacer el zoom */
    border-radius: .7rem;
  }

  #projects .img-project {
    width: 100%;
    max-height: 225px;

  }

  #projects .cnt-info-project {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 0px;
    margin-top: 0px;
  }
}