Как поправить тень в двух состояниях?

.pic__item {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px;
    min-height: 262px;
    margin-bottom: 55px;
}

.pic__item:after {
    position: absolute;
    content: ' ';
    z-index: 0;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(
180deg, rgba(255, 255, 255, 0) 0%, #4C4C4C 100%);
    mix-blend-mode: multiply;
}

.pic__item--no-image{
  background: linear-gradient(#ededed, #ededed) no-repeat center/calc(100% - 4px) calc(100% - 4px), linear-gradient(#c8c8c8 50%, #545454 50%);
}

.pic__item--no-image:after {
    position: absolute;
    content: ' ';
    z-index: 0;
    top: initial;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 80%;
    background: linear-gradient(
180deg, rgba(238, 238, 238, 0) 0%, #3d3d3d 100%);
    mix-blend-mode: multiply;
}

.pic__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: 0.3s transform;
}

.pic__content, .btn {
  position: relative;
  z-index: 3;
  color: #fff;
}

.pic__image {
    position: absolute;
    z-index: -1;
    content: ' ';
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

<div class="pic__wrap">
  <div class="pic__item">
    <picture class="pic__image">
      <source srcset="https://i.ibb.co/8xsryNM/pic1ds-1x.jpg 2x, https://i.ibb.co/t4CmhWL/pic1ds-2x.jpg 1x">
      <img src="https://i.ibb.co/8xsryNM/pic1ds-1x.jpg" alt="pic_1">
    </picture>
    <div class="pic__content">
      <p class="pic__title">Заголовок блока</p>
      <p class="pic__subtitle">вторая строчка<span>текста</span></p>
      <div class="pic__text">
        <p>lorem</p>
      </div>
      <a href="" class="btn btn--pic"><span>Кнопка переходу</span></a>
    </div>
  </div>
  <div class="pic__item pic__item--no-image">
                <div class="pic__content">
                    <p class="pic__title">Заголовок блока</p>
                    <div class="pic__text">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur rerum culpa harum quas, atque quos veniam sed aperiam aspernatur corrupti vitae, tempore in quasi voluptates deserunt laudantium iure quo perspiciatis.</p>
                    </div>
                    <a href="" class="btn btn--pic"><span>Кнопка переходу</span></a>
                </div>
            </div>
</div>