.project-section{
  padding: 40px;

  text-align: right;
}

h1,
h2{
  font-size: 32px;
  margin-bottom: 20px;
}

h4{
  font-size: 14px;
  font-weight: lighter;

  margin-bottom: 25px;

  color: var(--main--text--gray--color);
}

.github-boxs{
  /* background-color: red; */
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3 ,1fr);
  justify-items: center;

  margin-bottom: 60px;
}

.github-boxs div{
  padding-top: 15px;
  height: 185px;
  width: 360px;

  color: var(--main--text--dark--color);

  /* these colors values must use generally */
  /* 
  #EBFF9D #CFFF16 #51D544  1
  #FDEDB9 #F6A923 #F45947  2
  #FEE1E4 #F33F60 #BD4FCC  3
  #CAF8FD #0EB9D6 #4A7CE9  4
  */
  background-image: linear-gradient(
    130deg,
    var(--selected--main--color--shade2),
    var(--selected--main--color--shade),
    var(--selected--main--color)
  );

  overflow: hidden;

  text-align: left;

  cursor: pointer;
}

.github-boxs .git-pr-summary{
  display: flex;
  justify-content: space-around;

  height: 51px;

  background-image: none;
  background-color: white;
  border-top: 2px solid var(--selected--main--color);

  transform: translateY(43.5px);

  transition: all 0.4s;
}

.git-pr-name,
.git-pr-description{
  margin: 0 15px;
}

.git-pr-name{
  margin-bottom:20px;
  font-weight: bold;
  font-size: 20px;
}

.git-pr-description{
  font-size: 14px;
}

.git-project1 .git-pr-summary{
  transform: translateY(20px);
}

.git-project3 .git-pr-summary{
  transform: translateY(20px);
}

.github-boxs div:hover > .git-pr-summary{
  background-color: var(--main--body--color);
  color: white;
}