Detect ionic/angular modal size (breakpoint) change?

Question

I have an Ionic 6 / angular 13 project which I am working with some modals. My modals have multiple breakpoints and they contains a card with header and content and also two buttons. I want these buttons to be visible at any breakpoints but always be at the bottom of the page view.

modal config:

const modal = await this.modalController.create({
  component: MyComponent,
  backdropBreakpoint: 0.1,
  initialBreakpoint: 0.5,
  breakpoints: [smallestBreakPoint, 0.5, 0.9]
})

MyComponent template:

<ion-card style="background-color: white; height: 90%;">
  <ion-card-header class="pb-0 pt-2">
    <ion-card-title>
      ...
    </ion-card-title>
  </ion-card-header>
  <ion-card-content>
    <ion-item lines="none">
      ...
    </ion-item>
    <ion-item lines="none" (click)="..." button>
      ...
    </ion-item>
    <ion-row>
      <ion-col class="text-center">
        <ion-button expand="block" class="custom-button" color="light">
          ...
        </ion-button>
      </ion-col>
      <ion-col class="text-center" size="8">
        <ion-button expand="block" class="custom-button" (click)="...">
          ...
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-card-content>
</ion-card>

I tried changing <ion-row> and <ion-card> position and offset to everything, and none of them did the trick. Also I tried <ion-footer>. Please note that the card div is larger than it should be because it should open fully on 0.9 breakpoint.

Expected output:

How can I do this?

Thanks in advance!