mixinで@if（条件分岐）を利用して、疑似要素にグラデーションの点線ボーダーを表示します。mixinの設定は以下になります。

@mixin grd-dotted-line($top: false, $bottom: true) {
  position: relative;
  z-index: 0;

  &::before,
  &::after {
    display: block;
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, #0016A7 -0.28%, #007FF9 99.93%);
    mask-image: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 8px);
    mask-size: 100% 2px;
    mask-repeat: no-repeat;
  }

  @if $top {
    &::before {
      content: "";
      mask-position: top;
    }
  }

  @if $bottom {
    &::after {
      content: "";
      mask-position: bottom;
    }
  }
}

デフォルトの設定として要素の上部のボーダーは無し（$top: false）、下部のボーダーは有り（$bottom: true）です。@ifの条件分岐でtrueの場合のみcontentプロパティとmask-positionプロパティを出力します。

mixinの読み込みの記述は以下になります。クラス名products__list-itemの最初の要素のみ上部と下部のボーダーを表示し、他の要素は下部のボーダーのみ表示します。@includeで引数を指定しなければ、mixinで設定した初期値が適用されます。

.products__list {
  &-item {
    @include grd-dotted-line;

    &:first-child {
      @include grd-dotted-line($top: true, $bottom: true);
    }
  }
}