Is it possible to hide a Parallax image with CSS?

Do you have ideas how to “offload” (kill/hide) a parallax image selectively with CSS? 

On smaller breakpoints, I'm simply covering the image with a color, but when scrolling, you can see a 1px 'sliver' bleeding-through. (so I want to “offload” (kill/hide) it on those breakpoints) 

When inspecting, the image is added via scripting:

figure.Index-page-image.loaded

The parallax section in question:

<div class="Parallax-item" data-parallax-item="" data-parallax-id="5e220aae87b00d44dcb998bf" style="top: 2083px; left: 0px; width: 672px; height: 1070px; transform: translate3d(-672px, 0px, 0px);">
  
<figure class="Index-page-image loaded" data-parallax-image-wrapper="" style="bottom: 14px; overflow: hidden; transform: translate3d(0px, -67.4091px, 0px);">
              
<img data-src="https://static1.squarespace.com/static/5e18b3178e49c83eef94fbd0/t/5e2235b0b457e7527dde8694/1579314917946/bg-girl%402x.png" data-image="https://static1.squarespace.com/static/5e18b3178e49c83eef94fbd0/t/5e2235b0b457e7527dde8694/1579314917946/bg-girl%402x.png" data-image-dimensions="2500x2073" data-image-focal-point="0.5,0.22025858059715375" data-load="false" data-parent-ratio="0.6" alt="bg-girl@2x.png" style="font-size: 0px; left: -300.758px; top: 0px; width: 1273.52px; height: 1056px; position: relative;" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5e18b3178e49c83eef94fbd0/t/5e2235b0b457e7527dde8694/1579314917946/bg-girl%402x.png?format=2500w">

</figure>

</div>

Nevermind— I found it. 

I thought I was identifying the parallax section WITHIN the index section, but it's not associated with the Index 'pages' in the DOM. 

Instead, I just killed it by using a pseudo-element expression: 

.Parallax-item:nth-child(4) figure.Index-page-image {
    display: none !important;
  }

more: https://css-tricks.com/useful-nth-child-recipies/