How to align name and state values to the left on custom button card?

I would like to have the name and state values aligned to the left, besides the icon.
Now, as you can see in my screenshot it’s aligned to the right.
Scherm­afbeelding 2024-02-18 om 19.20.41

This is the code I use for all items:

type: custom:button-card
entity: binary_sensor.motion_sensor_brievenbus_motion
name: 'post:'
show_state: true
icon: mdi:email
styles:
  card:
    - height: 40px
    - background-color: rgba(0, 0, 0, 0)
    - border: 0px solid white
    - border-radius: 0px
    - padding: 0px 0px
  grid:
    - grid-template-areas: '"i n s"'
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
  icon:
    - width: 40px
    - padding: 0px 45px
  name:
    - padding: 0px 0px
    - text-transform: lowercase
  state:
    - padding: 0px 5px
    - padding-right: 50px
    - text-transform: lowercase
state:
  - value: 'off'
    styles:
      card:
        - filter: opacity(70%)
      icon:
        - filter: grayscale(100%)

I’ve managed to align the name column to the left with the help of this CSS grid change:
By setting the icon column to a fixed value (95px in my case)

styles:
  grid:
    - grid-template-areas: '"i n s"'
    - grid-template-columns: 95px auto auto

This is were I found a few pointers in the right direction:

Currently it looks like this:
Scherm­afbeelding 2024-02-21 om 12.58.01

This is the current complete code (per item):

type: custom:button-card
entity: binary_sensor.motion_sensor_brievenbus_motion
name: 'post:'
show_state: true
icon: mdi:email
styles:
  card:
    - height: 40px
    - background-color: rgba(0, 0, 0, 0)
    - border: 0px solid white
    - border-radius: 0px
    - padding: 0px 0px
  grid:
    - grid-template-areas: '"i n s"'
    - grid-template-columns: 95px auto auto
  img_cell:
    - justify-content: start
    - align-items: start
  icon:
    - justify-self: start
    - width: 45px
    - padding: 0px 0px
    - padding-left: 30px
  name:
    - padding: 0px 1px
    - text-transform: lowercase
    - justify-self: left
    - padding left: 10px
  state:
    - padding: 0px 1px
    - padding-right: 40px
    - text-transform: lowercase
    - justify-self: end
state:
  - value: 'off'
    styles:
      card:
        - filter: opacity(70%)
      icon:
        - filter: grayscale(100%)