CSS размытие фонового изображения в контексте столбца

Я пытаюсь размыть фоновое изображение в контексте столбца. Для этого я использую parent со свойством background-attachment, хорошо работаю для полноэкранного контекста.

Но для столбца это не работает, потому что фон использует ширину экрана, а не родительскую ширину (это свойство background-attachment).

Итак, кто-нибудь уже, как я могу исправить этот контекст? Я ищу динамическое решение, я не могу установить положение фона вручную.

Проблема контекста: каждый столбец использует ширину экрана, а не родительский с:

Вы можете увидеть мой CSS:

.parent {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.item {
  overflow: hidden;
  top: 0;
  left: 0;

  &,
  &::before {
    position: absolute;
    background: inherit;
  }

  > span {
    position: relative;
  }

  &::before {
    content: '';
    top: rem-calc(-25);
    left: rem-calc(-25);
    bottom: 0;
    right: 0;
    width: rem-calc(500);
    height: rem-calc(200);
    box-shadow: inset 0 0 0 rem-calc(200) rgba(255, 255, 255, 0.2);
    filter: blur(5px);
  }
}

Может быть, для этого существует JS модуль?

Спасибо, сообщество!