Vertical scaling of ha-card with card-mod

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);
          }
        }

1 post - 1 participant

Read full topic