Help with text aligment

Hi all,

I’m new in HA programming, i want to make the card show me a list o sensors

              - type: custom:button-card
                entity: binary_sensor.loft
                triggers_update:
                  - binary_sensor.a2_pin15_sofvoreioekso
                  - binary_sensor.a2_pin16_sofvoreiomesa
                  - binary_sensor.a2_pin19_sofovallekso
                  - binary_sensor.a2_pin21_sofovallmesa
                  - binary_sensor.a2_pin17_sofovalrekso
                  - binary_sensor.a2_pin18_sofovalrmesa
                  - binary_sensor.a2_pin22_sofbalconyekso
                  - binary_sensor.a2_pin23_sofbalconymesa
                  - binary_sensor.a2_pin25_sofanatoliekso
                  - binary_sensor.a2_pin26_sofanatolimesa
                  - binary_sensor.a2_pin27_sofdomaekso
                  - binary_sensor.a2_pin32_sofdomamesa
                aspect_ratio: 1/1
                name: Open
                show_icon: false
                show_state: false
                styles:
                  card:
                    - border-radius: var(--button-card-border-radius)
                    - border-width: 0
                    - -webkit-tap-highlight-color: rgba(0,0,0,0)
                    - transition: none
                    - color: #97989c
                    - background-color: green 
                    - transition: none
                    - --mdc-ripple-color: #97989c
                    - font-size: 12px
                    - padding-left: 5%
                  name:
                    - font-weight: var(--button-card-font-weight)
                    - font-size: var(--button-card-font-size)
                    - letter-spacing: var(--button-card-letter-spacing)
                    - justify-self: start
                    - padding-bottom: 4px  
                    - left: 150%
                    - text-overflow: initial
                  grid:
                    - grid-template-areas: |
                        "n"
                        "i1"
                    - grid-template-columns: 100%
                    - grid-template-rows: 1fr
                custom_fields:
                  i1:
                    card:
                      type: markdown
                      content: |- 
                        {{ expand('binary_sensor.loft') 
                          | selectattr('state', 'eq', 'on')
                          | sort(attribute= 'last_changed', reverse=true) 
                          | map(attribute ='name') 
                          | join("\n")
                        }}
                      card_mod:
                        style: |
                          ha-card.type-markdown {
                            box-shadow: none;
                            border-top: 2px groove var(--divider-color);
                            background: transparent;
                            overflow-y: scroll;
                            text-align: left;
                            vertical-align: text-top;
                          }

i am very confused…
Screenshot 2023-06-11 at 2.03.39 PM

i can not fix the aligment