Ionic modal custom css

I have created modal using the modal controller and I want to expand the width in larger screens such as desktops and laptops. I have to keep it same for the mobile devices

I have created this css class

.book-view-modal {
.modal-wrapper {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;

the modal is

const modal = await this.modalController.create({
component: BookViewComponent,
componentProps: {
bookName: ‘dfdsfdsf’,
id: ‘dafsdfsd’
cssClass: ‘book-view-modal’

But still the size is not changed. Can somebody help

Thanks in advance.