Why css backdrop-filter: blur() is working well except on active bootstrap-4 list-group-item?

I have gallery, inside gallery there is album-card component, and inside there is carousel.
When i added list-group and set one of items active it remains not blurred, and I don't understand why. Can anyone explain it to me?

this is gallery component html:

<div class="row">
        <div class="col-3">
            <div class="list-group">
                <a 
                    *ngFor="let album of galleryAlbums" 
                    class="list-group-item list-group-item-secondary list-group-item-action 
                           d-flex justify-content-between align-items-center"
                    routerLink="/gallery"
                    [queryParams]="{ selectedAlbumId: album.id }"
                    [class.active]="selectedAlbumId === album.id">
                    
                    {{ album.name }}
                    <span class="badge badge-warning badge-pill">{{ album.photos.length}}</span>
                </a>
            </div>
        </div>

        <album-card class="col-9" *ngIf="selectedAlbum" [album]="selectedAlbum"></album-card>
    </div>

carousel styles in .scss file:

.gallery-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(100, 100, 100, 0.4);
    backdrop-filter: blur(5px);

result: