How can I make both image banners full height on mobile?

[mich706e]

Hello Guys, i try to make my image banners full height on mobile, but it only seems to work on the ffirst image banner?  I want both the banners to be full height on mobile, but it seems like i cant do it - because my image banners has the same ID? So when i try only the first one will get full height

Image banner 1 ID:

Banner-template--21003591450947__image_banner

Image banner 2 ID:

Banner-template--21003591450947__image_banner_XtFcX6

Below are the codes i use

@media screen and (max-width: 749px) {
#Banner-template--21003591450947__image_banner:before, #Banner-template--21003591450947__image_banner .banner__media::before, #Banner-template--21003591450947__image_banner:not(.banner--mobile-bottom) .banner__content::before
{
padding-bottom: 180.5% !important;
}
}

@media screen and (max-width: 749px) {
#Banner-template--21003591450947__image_banner_XtFcX6:before, #Banner-template--21003591450947__image_banner_XtFcX6 .banner__media::before, #Banner-template--21003591450947__image_banner_XtFcX6:not(.banner--mobile-bottom) .banner__content::before
{
padding-bottom: 180.5% !important;
}
}

[Dan-From-Ryviu]

Hi @mich706e 

Could you share your store URL to check?

[mich706e]

can i pm you privately?

[mich706e]

https://pa-stal.myshopify.com/ this is my storeelink