Hover affect hovered div and toher div's in grid

Question

I have a problem with display:grid and :hover *

Idea is to make 4 element in grid, and when user hover on one element, other lose opacity.

Kinda got it working, but problem is where I hover on second, third and fourth element.

Problem: Second element doesn't affect first element Thrid element doesn't affect second and first element. Fourth element doesn't affect first, second, and third element.

screenshot of problem (cricle is hovered, dark is affected, bright is not affected)

Here is the code I managed to make yet

<div id="services-gallery">
<div class="services-row">
    <div class="services-panel" id="servicel-panel-one">
        <div id="panel-one-inside" class="services-panel-inside"></div>
        <div class="services-panel-title">TITLE</div>
    </div>

        <div class="services-panel" id="servicel-panel-two">
            <div id="panel-two-inside" class="services-panel-inside"></div>
            <div class="services-panel-title">TITLE</div>
        </div>



    <div class="services-panel" id="servicel-panel-three">
        <div id="panel-three-inside" class="services-panel-inside"></div>
        <div class="services-panel-title">TITLE</div>
    </div>
        <div class="services-panel" id="servicel-panel-four">
            <div id="panel-four-inside" class="services-panel-inside"></div>
            <div class="services-panel-title">TITLE</div>
        </div>
</div>

</div>

#services-gallery{
  margin-top: -200px;

}

.services-row{

  width: 90%;
  margin-left: 5vw;
  margin-bottom: 5vw;

  display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 5vw;
    column-gap: 2vw;
}

.services-panel{
  width: 40vw;
  height: 40vw;

  border-radius: 20px;
transition: .4s;
}

.services-panel-inside{transition: .4s;  width: 100%; Height: 100%;  border-radius: 20px; background-size: cover; background-position: center;}

.services-panel:hover .services-panel-inside{
  width: 100%; height: 100%;
  border-radius: 550px;
    transition: .4s;
}

.services-panel-title{
  color: white;
}

.services-row > *:hover ~ * {
  opacity: 0.6;
}

.services-row:hover > *:hover {
  transform: scale(1.1);
  opacity: 1;

}

I have tried all 'not' pseudo element and all of > + ~ - selectors in this. Nothing seems working.