:root {
  --project-1-color: 191, 33%, 58%;
  --project-1-star-color: 41, 85%, 66%;
  --project-2-color: 180, 15%, 62%;
  --project-2-star-color: 355, 79%, 47%;
  --project-3-color: 63, 46%, 50%;
  --project-3-star-color: 19, 18%, 47%;
  --project-4-color: 160, 4%, 44%;
  --project-4-star-color: 73, 66%, 42%;
  --project-5-color: 189, 100%, 41%;
  --project-5-star-color: 324, 43%, 50%;
  --project-6-color: 18, 52%, 58%;
  --project-6-star-color: 70, 53%, 65%;
  --project-7-color: 356, 76%, 53%;
  --project-7-star-color: 0, 0%, 100%;
  --project-8-color: 204, 64%, 27%;
  --project-8-star-color: 50, 48%, 52%;
  --project-9-color: 30, 91%, 71%;
  --project-9-star-color: 26, 25%, 39%;
  --project-10-color: 40, 34%, 55%;
  --project-10-star-color: 0, 0%, 100%;
  --project-11-color: 216, 58%, 42%;
  --project-11-star-color: 69, 77%, 45%;
  --project-12-color: 171, 100%, 26%;
  --project-12-star-color: 64, 61%, 81%;
  --project-13-color: 334, 40%, 65%;
  --project-13-star-color: 5, 45%, 90%;
  --project-14-color: 46, 8%, 33%;
  --project-14-star-color: 25, 16%, 67%;
}

.logo .turning__star {
  color: var(--blue);
}

.wrapper .project:nth-child(1) {
  background-color: hsl(var(--project-1-color));
}

.wrapper .project:nth-child(1) svg {
  color: hsl(var(--project-1-star-color));
}

.wrapper .project:nth-child(2) {
  background-color: hsl(var(--project-2-color));
}

.wrapper .project:nth-child(2) svg {
  color: hsl(var(--project-2-star-color));
}

.wrapper .project:nth-child(3) {
  background-color: hsl(var(--project-3-color));
}

.wrapper .project:nth-child(3) svg {
  color: hsl(var(--project-3-star-color));
}

.wrapper .project:nth-child(4) {
  background-color: hsl(var(--project-4-color));
}

.wrapper .project:nth-child(4) svg {
  color: hsl(var(--project-4-star-color));
}

.wrapper .project:nth-child(5) {
  background-color: hsl(var(--project-5-color));
}

.wrapper .project:nth-child(5) svg {
  color: hsl(var(--project-5-star-color));
}

.wrapper .project:nth-child(6) {
  background-color: hsl(var(--project-6-color));
}

.wrapper .project:nth-child(6) svg {
  color: hsl(var(--project-6-star-color));
}

.wrapper .project:nth-child(7) {
  background-color: hsl(var(--project-7-color));
}

.wrapper .project:nth-child(7) svg {
  color: hsl(var(--project-7-star-color));
}

.wrapper .project:nth-child(8) {
  background-color: hsl(var(--project-8-color));
}

.wrapper .project:nth-child(8) svg {
  color: hsl(var(--project-8-star-color));
}

.wrapper .project:nth-child(9) {
  background-color: hsl(var(--project-9-color));
}

.wrapper .project:nth-child(9) svg {
  color: hsl(var(--project-9-star-color));
}

.wrapper .project:nth-child(10) {
  background-color: hsl(var(--project-10-color));
}

.wrapper .project:nth-child(10) svg {
  color: hsl(var(--project-10-star-color));
}

.wrapper .project:nth-child(11) {
  background-color: hsl(var(--project-11-color));
}

.wrapper .project:nth-child(11) svg {
  color: hsl(var(--project-11-star-color));
}

.wrapper .project:nth-child(12) {
  background-color: hsl(var(--project-12-color));
}

.wrapper .project:nth-child(12) svg {
  color: hsl(var(--project-12-star-color));
}

.wrapper .project:nth-child(13) {
  background-color: hsl(var(--project-13-color));
}

.wrapper .project:nth-child(13) svg {
  color: hsl(var(--project-13-star-color));
}

.wrapper .project:nth-child(14) {
  background-color: hsl(var(--project-14-color));
}

.wrapper .project:nth-child(14) svg {
  color: hsl(var(--project-14-star-color));
}

@media screen and (min-width: 1350px) {
  .wrapper .project:nth-child(1) {
    background-color: hsl(var(--project-1-color), 0.4);
  }

  .wrapper .project:nth-child(2) {
    background-color: hsl(var(--project-2-color), 0.4);
  }

  .wrapper .project:nth-child(3) {
    background-color: hsl(var(--project-3-color), 0.4);
  }

  .wrapper .project:nth-child(4) {
    background-color: hsl(var(--project-4-color), 0.4);
  }

  .wrapper .project:nth-child(5) {
    background-color: hsl(var(--project-5-color), 0.25);
  }

  .wrapper .project:nth-child(6) {
    background-color: hsl(var(--project-6-color), 0.25);
  }

  .wrapper .project:nth-child(7) {
    background-color: hsl(var(--project-7-color), 0.25);
  }

  .wrapper .project:nth-child(8) {
    background-color: hsl(var(--project-8-color), 0.25);
  }

  .wrapper .project:nth-child(9) {
    background-color: hsl(var(--project-9-color), 0.25);
  }

  .wrapper .project:nth-child(10) {
    background-color: hsl(var(--project-10-color), 0.25);
  }

  .wrapper .project:nth-child(11) {
    background-color: hsl(var(--project-11-color), 0.25);
  }

  .wrapper .project:nth-child(12) {
    background-color: hsl(var(--project-12-color), 0.25);
  }

  .wrapper .project:nth-child(13) {
    background-color: hsl(var(--project-13-color), 0.25);
  }

  .wrapper .project:nth-child(14) {
    background-color: hsl(var(--project-14-color), 0.25);
  }

  .wrapper .project:nth-child(1):hover {
    background-color: hsl(var(--project-1-color));
  }

  .wrapper .project:nth-child(2):hover {
    background-color: hsl(var(--project-2-color), 1);
  }

  .wrapper .project:nth-child(3):hover {
    background-color: hsl(var(--project-3-color), 1);
  }

  .wrapper .project:nth-child(4):hover {
    background-color: hsl(var(--project-4-color), 1);
  }

  .wrapper .project:nth-child(5):hover {
    background-color: hsl(var(--project-5-color), 1);
  }

  .wrapper .project:nth-child(6):hover {
    background-color: hsl(var(--project-6-color), 1);
  }

  .wrapper .project:nth-child(7):hover {
    background-color: hsl(var(--project-7-color), 1);
  }

  .wrapper .project:nth-child(8):hover {
    background-color: hsl(var(--project-8-color), 1);
  }

  .wrapper .project:nth-child(9):hover {
    background-color: hsl(var(--project-9-color), 1);
  }

  .wrapper .project:nth-child(10):hover {
    background-color: hsl(var(--project-10-color), 1);
  }

  .wrapper .project:nth-child(11):hover {
    background-color: hsl(var(--project-11-color), 1);
  }

  .wrapper .project:nth-child(12):hover {
    background-color: hsl(var(--project-12-color), 1);
  }

  .wrapper .project:nth-child(13):hover {
    background-color: hsl(var(--project-13-color), 1);
  }

  .wrapper .project:nth-child(14):hover {
    background-color: hsl(var(--project-14-color), 1);
  }

  .project .project__content p {
    opacity: 0;
  }

  .project .object__fit-cover {
    scale: 1;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }

  .project .project__link:hover~.img__container .object__fit-cover,
  .project .project__link:focus~.img__container .object__fit-cover,
  .project .project__link:active~.img__container .object__fit-cover {
    scale: 1.04;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
  }

  .project .project__link:hover~.project__content p,
  .project .project__link:hover~.project__content svg,
  .project .project__link:focus~.project__content p,
  .project .project__link:focus~.project__content svg,
  .project .project__link:active~.project__content p,
  .project .project__link:active~.project__content svg {
    opacity: 1;
  }
}