To apply it to mobile you can remove the media query like so:
.inside-page-hero {
position:relative
}
.single-breadcrumb {
position: absolute;
top: 40px;
left: 0
}
If you want to change the font-size for mobile then use this CSS:
@media (max-width: 768px) {
.rank-math-breadcrumb {
font-size: 12px;
}
}
Changing the background and other styles – you already have this CSS which you can edit:
.rank-math-breadcrumb {
background-color: #E4E2DD;
display: inline-block;
padding: 5px 10px;
border-radius: 10px
}
Or make a copy of that and add it inside the media query to style it differently for mobile.