How to change height of agm-info-window (Angular, Google Maps)

I'm trying to increase the height of my agm-info-window by this CSS (in the global styles.scss file):

.gm-style .gm-style-iw {
  height: 100%;
  max-height: 800px !important;
}

It changes the height of the agm-info-window, but it only becomes smaller, no matter what height I insert:

when I remove my CSS rules for .gm-style and .gm-style-iw, the info-window looks like this:

The info-window is a bit too small, can I increase the height or is that the maximum?

Here is the code for my google maps:

<agm-map [fitBounds]="true" >
      <agm-marker [latitude]="dorm.lat" [longitude]="dorm.lng" (markerClick)="markerClicked(dorm, infoWindow)" [agmFitBounds]="true">
              <agm-info-window #infoWindow >
                        <app-info-window-product-overview></app-info-window-product-overview>
              </agm-info-window>
      </agm-marker>
 </agm-map>

(the <app-info-window-product-overview></app-info-window-product-overview>component only contains the content of the info-window)