/* :root {
--project-(-1)-color: 37, 59%, 72%;
  --project-(-1)-star-color: 217, 37%, 42%;
--project-(-2)-color: 37, 59%, 72%;
  --project-(-2)-star-color: 217, 37%, 42%;
  --project-1-color: 37, 59%, 72%;
  --project-1-star-color: 217, 37%, 42%;
  --project-2-color: 306, 16%, 75%;
  --project-2-star-color: 61, 46%, 69%;
  --project-3-color: 0, 1%, 70%;
  --project-3-star-color: 37, 19%, 50%;
  --project-4-color: 206, 25%, 63%;
  --project-4-star-color: 198, 11%, 30%;
  --project-5-color: 240, 0%, 55%;
  --project-5-star-color: 0, 0%, 100%;
  --project-6-color: 37, 6%, 58%;
  --project-6-star-color: 13, 8%, 33%;
  --project-7-color: 233, 18%, 60%;
  --project-7-star-color: 274, 28%, 77%;
  --project-8-color: 76, 20%, 67%;
  --project-8-star-color: 33, 14%, 88%;
  --project-9-color: 35, 19%, 67%;
  --project-9-star-color: 20, 9%, 41%;
  --project-10-color: 23, 28%, 70%;
  --project-10-star-color: 5, 39%, 61%;
  --project-11-color: 285, 5%, 54%;
  --project-11-star-color: 0, 0%, 80%;
  --project-12-color: 0, 1%, 62%;
  --project-12-star-color: 0, 0%, 83%;
} */

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

.project {
  background-color: hsl(var(--bg-color));
}

.project svg {
  color: hsl(var(--bg-color));
}

@media screen and (min-width: 1350px) {

  .project {
    background-color: hsl(var(--bg-color), 0.4);
  }

  .project svg {
    color: hsl(var(--star-color), 0);
  }

  .project:hover {
    background-color: hsl(var(--bg-color), 1);
  }

  .project:hover svg {
    color: hsl(var(--star-color), 1);
  }

  .project .project__content p {
    opacity: 0;
  }

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

  .project .project__link {
    width: 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.08;
    -webkit-filter: grayscale(0%);
    -ms-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;
  }
}