How to make hover effect work for an icon in a css grid?

Question

I'm new to coding and was trying to make a component to preview/display a project I've been working on. I'm trying to make my links like the GitHubIcon and LaunchIcon have a :hover effect but it's not working when I try something like .linkItems:hover{background-color: red} or even when I try something completely different like .title:hover{background-color: red}. When I use the chrome dev tool, the hover doesn't work either unless I force it and when I don't force it, it just automatically grays out. It works when it's not in a css grid.

Component

<li className={`${styles.gridContainer} ${props.className}`}>
      <div className={styles.imageWrapper}>
        <Image className={styles.image} src={props.imgSrc} alt="alt-picture" />
      </div>

      <div className={styles.projectContent}>
        <div className={styles.title}>
          <h2>{props.heading}</h2>
          <h1>{props.titleProject}</h1>
        </div>

        <div className={styles.projectDescription}>
          <SecondaryCard className={styles.descriptionCard}>
            {props.description}
          </SecondaryCard>
        </div>

        <ul className={styles.techStack}>
          {props.techStack.map((el) => {
            return (
              <li className={styles.techs} key={uuidv4()}>
                {el}
              </li>
            );
          })}
        </ul>

        <div className={styles.links}>
          <Link href={props.githubUrl}>
            <GitHubIcon className={styles.linkItems} />
          </Link>
          <Link href={props.deployUrl}>
            <LaunchIcon className={styles.linkItems} />
          </Link>
        </div>
      </div>
    </li>

CSS

.gridContainer {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  list-style: none;
}

.gridContainer > div {
  position: relative;
}

.imageWrapper {
  grid-area: 1/3/-1/13;
  align-self: center;
  z-index: -1;
}

.projectContent {
  grid-area: 1/6/-1/15;
  align-self: center;
  text-align: right;
}
.title {
  color: var(--second-bg-heading);
}

.projectDescription {
  margin-top: 1rem;
}

.techStack {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-end;
  color: var(--second-sub-headline);
}

.links {
  margin-top: 2rem;
}

.linkItems {
  margin-left: 5rem;
  transform: scale(2);
  color: var(--second-sub-headline);
  margin-right: 1rem;
}

.techs {
  list-style: none;
  margin-left: 1rem;
}

@media (max-width: 1200px) {
  .imageWrapper {
    opacity: 0.9;
    grid-column: 1/14;
  }
  .projectContent {
    transform: scale(0.9);
    grid-column: 7/17;
  }
}

@media (max-width: 768px) {
  .imageWrapper {
    opacity: 0.25;
    grid-column: 1/-1;
  }

  .image {
    border-radius: 10px;
  }

  .projectContent {
    grid-column: 1/-1;
    font-size: 1.5rem;
    text-align: left;
    align-self: center;
  }

  .title {
    padding: 0 3%;
    margin-bottom: 5%;
  }

  .projectDescription {
    margin: 3% 0;
    border-radius: 0;
    background-color: transparent;
    padding: 0 3%;
  }

  .techStack {
    justify-content: flex-start;
    padding: 0 3%;
    margin: 3% 0;
  }

  .techs {
    margin-right: 5%;
    margin-left: 0;
    margin-top: 0;
  }

  .links {
    padding: 0 10%;
    margin: 6% 0 6% 0;
    display: flex;
    justify-content: space-around;
  }

  .linkItems {
    margin-right: 0;
    margin-left: 0;
    transform: scale(2);
  }
}

@media (max-width: 600px) {
  .projectContent {
    transform: scale(0.8);
  }
}

@media (max-width: 480px) {
  .projectContent {
    font-size: 1rem;
  }
}