.project {
  cursor: pointer;
  align-self: center;
  width: clamp(250px, 300px, 350px);
  height: clamp(300px, auto, 400px);
  box-shadow: 5px 5px rgba(255, 255, 255, 0.5);
  margin: 20px 50px 20px 50px;
}

.project label {
  color: black;
  text-align: left;
}

.project:active {
  box-shadow: none;
  transform: translate(5px, 5px);
}

.project:hover {
  filter: brightness(0.9);
}

.cardImage {
  padding: 15px;
  background-size: contain;
}

.cardImage1 {
  content: url('../../assets/projectCard1.svg');
}

.cardImage2 {
  content: url('../../assets/projectCard2.svg');
  aspect-ratio: 747 / 526;
}

.cardImage3 {
  content: url('../../assets/projectCard3.svg');
}

.cardImage4 {
  content: url('../../assets/projectCard4.svg');
  aspect-ratio: 559 / 582;
}

.cardImage5 {
  content: url('../../assets/projectCard5.svg');
}

.cardImage6 {
  content: url('../../assets/projectCard6.svg');
}

.btnOpenProject {
  margin-top: 30px;
  width: 100%;
}

.card-body {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 33% 33% 33%;
}

.card-title {
  font-size: 2em;
  white-space: nowrap;
}

.lblProjectPercentage {
  font-family: var(--titleFont);
  font-size: 3em;
  text-align: right;
  white-space: nowrap;
  grid-row: 1 / 2;
  grid-column: 2 / 2;
}

.lblTimeLeft {
  color: rgb(63, 63, 63);
}

.progress {
  background-color: #e4e4e4;
  align-self: center;
  grid-row: 3 / 3;
  grid-column: 1 / 3;
}

.progress-bar {
  width: 0%;
  transition: width 2s ease;
}

.changeImageContainer {
  display: grid;
  place-items: center;
}

.imgGenContainer {
  padding: 30px;
}

#imgGen {
  max-width: 400px;
  height: 300px;
}

.btnStopGen {
  width: 300px;
}

@media only screen and (max-width: 770px) {
  .project {
    margin: 20px 0;
  }
}