weird glitch when hovering over between 2 text items

Question

I have a weird glitch in my website and I hope someone can help me. I created a list of items, each one with a header and some content. The items are closed when the website starts, and only the headers are visible. When you click on the header, the content is revealed/expanded.

When you hover over each header, the font family and style changes (See image attached). But here comes the problem: when I hover between 2 headers, they start glitching and repeatly changing. This is not supposed to happen. The glitch mostly happens when the mouse is hovering near 2 hedaders, so more or less in the line between them. Here is the website on CodePen, where the glitch also happens: https://codepen.io/Esteban-Barco/pen/JjwyNJZ

Here is my HTML Code for one of the items:

h2 {
  font-weight: lighter;
  cursor: pointer;
  mix-blend-mode: difference;
  font-size: inherit;
}

.item-closed {
  display: flex;
  position: relative;
  align-items: flex-end;
  padding-top: 0;
  width: 100%;
  /*text-transform: uppercase; */
  font-size: 4rem;
  margin: 2vh 0 2vh 0 2vh;
}

.item-closed:hover {
  font-family: 'Newsreader', Italic, serif;
  font-style: italic;
  font-size: 4rem !important;
  color: #651EFB;
  text-transform: lowercase;
  cursor: url(assets/images/image01.jpg) pointer;
  mix-blend-mode: normal;
}

.item-closed:after {
  align-items: flex-end;
  content: attr(data-text);
  font-style: normal;
  font-family: "authentic-sans-130", serif;
  font-size: 2rem;
  text-transform: uppercase;
  color: #651EFB;
  overflow: hidden;
  visibility: hidden;
}

.item {
  padding: 0;
}

.item-open {
  padding-top: 20vh;
}

.item-open h2 {
  font-size: 4rem;
  font-family: 'authentic-sans-130'
}

.item:first-child {
  margin-top: 35vh;
}

<div class="item item-closed" data-text="text" id="item02">
  <h2 class="white-text text" onclick="toggleInfo(); removeItemClosed()"><a href="#item02">The current picture Nr. 567 on my phone camera</a></h2>
  <div class="default-display toggle-info">

    <div class="form black">
      <div class="tag tag-left">
        <p>Found!</p>
      </div>
      <div class="tag tag-middle">
        <p>Reminded by Esteban Barco</p>
      </div>
      <div class="tag tag-right">
        <p>I was cooking for over 15 people</p>
      </div>
    </div>

    <section class="invisible-box invisible-box-wrap">
      <img src="assets/images/image01.png" alt="memory" class="image image-margin-canvas" id="image02">
    </section>
  </div>
</div>

<div class="item item-closed" data-text="text" id="item02">
  <h2 class="white-text text" onclick="toggleInfo(); removeItemClosed()"><a href="#item02">The current picture Nr. 567 on my phone camera</a></h2>
  <div class="default-display toggle-info">

    <div class="form black">
      <div class="tag tag-left">
        <p>Found!</p>
      </div>
      <div class="tag tag-middle">
        <p>Reminded by Esteban Barco</p>
      </div>
      <div class="tag tag-right">
        <p>I was cooking for over 15 people</p>
      </div>
    </div>

    <section class="invisible-box invisible-box-wrap">
      <img src="assets/images/image01.png" alt="memory" class="image image-margin-canvas" id="image02">
    </section>
  </div>
</div>

I am expecting to see a normal text change behaviour when hovering, and the other headers should not interfere, so each one should change at a time.