An Angular project uses ‘@ngbracket/ngx-layout’ MediaObserver.
Is it possible to replace it with only CSS?
If not, is it possible to replace it with Angular Material CDK Layout BreakpointObserver?
How?
Code is simplified to include the relevant part only:

import { Component, DestroyRef, inject, OnInit } from '@angular/core'
import { MediaObserver } from '@ngbracket/ngx-layout'
import { MatSidenavModule } from '@angular/material/sidenav'
import { BehaviorSubject, combineLatest } from 'rxjs'
import { tap } from 'rxjs/operators'
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'

@Component({
  selector: 'app-root',
  template: `
  <mat-sidenav #sidenav [mode]="media.isActive('xs') ? 'over' : 'side'" [fixedInViewport]="media.isActive('xs')" _
    fixedTopGap="50" [(opened)]="opened">
    <app-navigation-menu></app-navigation-menu>
  </mat-sidenav>
    `,
  standalone: true,
  imports: [
    MatSidenavModule,
  ],
})
export class AppComponent implements OnInit {
  private readonly destroyRef = inject(DestroyRef)
  opened!: boolean
  authService: any;
  
  constructor(
    public media: MediaObserver
  ) { }

  ngOnInit() {
    combineLatest([this.media.asObservable(), this.authService.authStatus$])
      .pipe(
        tap(([mediaValue, authStatus]) => {
          if (!authStatus?.isAuthenticated) {
            this.opened = false
          } else {
            if (mediaValue[0].mqAlias === 'xs') {
              this.opened = false
            } else {
              this.opened = true
            }
          }
        }),
        takeUntilDestroyed(this.destroyRef)
      )
      .subscribe()
  }
}