Unexpected Text-Shadow Behavior with Overflow Hidden in CSS Grid

Question

I'm working on a CSS grid layout that contains text with a shadow effect. However, I'm encountering an unexpected behavior when I implement overflow: hidden. Specifically, the text-shadow begins to behave strangely, creating what appears to be a 'box' shadow around my text container instead of applying only to the text.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-shadow: 15px 15px 30px rgb(25, 25, 25), -15px -15px 30px rgb(60, 60, 60);
}

.parallax {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #06076d, #00bfd8);
}

.content-container {
  display: grid;
  grid-template-rows: repeat(20, 1fr);
  grid-template-columns: repeat(10, 1fr);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  color: white;
  white-space: nowrap;
}

h2 {
  grid-column: 2 / 7;
  grid-row: 9 / 13;
}

.label {
  grid-column: 11 / 8;
  grid-row: 17 / 20;
}

.item1,
.item2,
.label {
  font-size: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<section class="parallax">
  <div class="content-container">
    <h2>
      <div class="item1">Item 1 ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ</div>
      <div class="item2">Item 2</div>
    </h2>
    <div class="label item3">Label</div>
  </div>
  <div class="parallax-bg"></div>
</section>