Vertical scaling of ha-card with card-mod

Configuration Frontend
1

I try to scale the content of an entity card in the vertical dimension. The goal is that the font size and the line height are set to 1.5vh and consequently scale if I change the height of my viewport. this scaling should stop as soon as the font size falls below 9px.
So far I have tried the following, but this only scales the font-size, but the distance between the entity lines remains constant. Any ideas/other approaches to get the desired ui behaviour?

title: Skalierbare View
path: skalierbar
cards:
  - type: entities
    title: Beispielkarte 1
    entities:
      - entity: light.la_o5a_o5
      - entity: light.la_o1a_o1mitte
      - entity: light.la_o1c_o1ost
      - entity: light.la_o1b_o1west
      - entity: sensor.st_e5a_e5
      - entity: sensor.sh_e4a_e4
    card_mod:
      style: |
        :host {
          --my-font-size: calc(1.5vh);
          --my-line-height: calc(1.5vh);
          --my-gap: calc(1.5vh);
        }

        ha-card {
          font-size: var(--my-font-size) !important;
          line-height: var(--my-line-height) !important;
        }

        ha-card .entities > * {
          margin-bottom: var(--my-gap);
        }

        ha-card .entities > *:last-child {
          margin-bottom: 0;
        }

        @media (max-height: 600px) {
          :host {
            --my-font-size: 9px;
            --my-line-height: 9px;
            --my-gap: 9px;
          }
        }

        @media (min-height: 601px) {
          :host {
            --my-font-size: calc(1.5vh);
            --my-line-height: calc(1.5vh);
            --my-gap: calc(1.5vh);
          }
        }
2

Go to main card-mod thread → 1st post → link at the bottom → spacing between rows.

3

many thanks for your answer. I researched the card-mod thread and tried the various solutions indicated there. I am rather confused on the different approaches and would appreciate some guidance on the way to go, as I still haven’t figured out the desired outcome.

Font-size and icon scales well, but whatever I try the line-height resp. the spacing between entities do not work.

the last iteration of my yaml:

title: Scalable View
path: skalierbar
cards:
  - type: entities
    title: examplecard 1
    entities:
      - entity: light.la_o5a_o5
      - entity: light.la_o1a_o1mitte
      - entity: sensor.st_e5a_e5
      - entity: sensor.sh_e4a_e4
    card_mod:
      style: |
        #states > * {
          margin: -0.2vh !important;
          font-size: 1.5vh;
          --mdc-icon-size: 1.5vh; 
        }
        .card-header {
          font-size: 2.5vh;
          line-height: 2vh;
        }
        hui-generic-entity-row {
          height: 1.5vh !important;
        }

the card with a viewport height of 500px:

ssSmall
ssSmall898×775 18.6 KB

Font and icon resize, but line-height remains the same. switch icon also remains the same