Grid-template-areas not as they should: align top icon... but how?

having this button (which for the purpose of this post was stripped of personal info):

Scherm­afbeelding 2023-02-20 om 22.22.53

and I want to align the left icon to the top spot, just like the number 24, the custom_field years is in the right side.

I am struggling with the grid-template-areas though, and am not sure what I should do. I can add several 1fr 's extra to the grid-template-rows, but then the name, date and Type are no longer on the bottom left side, which is what I want.

yaml for the button-template:

button_feest_alert:
  template: styles_img_cell
  aspect_ratio: 1
  name: >
    [[[ return entity.attributes.name + ' ' + entity.attributes.event; ]]]
  icon: mdi:party-popper
  show_state: false
  size: 30px # size if the icon

  state:

    - operator: template
      value: >
         [[[ var id = entity.attributes.name.toLowerCase();
             var notification = 'persistent_notification.' + id;
             return states[notification]; ]]]
      spin: true
  styles:
    icon:
#       - align-self: start # does nothing ?
      - color: orange
      - justify-self: start
    card:
      - background-image: >
          [[[ return `url("/local/family/${entity.attributes.name.toLowerCase()}.jpg")`; ]]]
      - background-repeat: no-repeat
      - background-size: 100%
      - background-position: center
      - color: white
      - font-size: 10px
      - padding: 5px
    name:
      - align-self: end
      - color: pink
      - justify-self: start
      - padding-bottom: 4px
    grid:
      - grid-template-areas: '"i years" "n n" "original_date original_date" "type type"'
      - grid-template-columns: 1fr 1fr
      - grid-template-rows: 1fr min-content min-content min-content min-content

    custom_fields:
      years:
        - align-self: start
        - font-size: 20px
        - justify-self: end
        - color: red
        - animation: >
            [[[ var id = entity.attributes.name.toLowerCase();
                var notification = 'persistent_notification.' + id;
                return (states[notification]) ? 'blink 2s ease infinite' : 'none'; ]]]
      original_date:
        - align-self: end
        - justify-self: start
        - padding-bottom: 2px
        - --text-color-sensor: red
      type:
        - align-self: end
        - justify-self: start
        - padding-bottom: 2px
        - --text-color-sensor: yellow
  custom_fields:
    years: >
      [[[ return entity.attributes.years; ]]]
    original_date: >
      [[[ return `Date: <span style='color: var(--text-color-sensor);'>
          ${entity.attributes.original_date}</span>`; ]]]
    type: >
      [[[ return `Type: <span style='color: var(--text-color-sensor);'>
          ${entity.attributes.type}</span>`; ]]]

which seems complex at first, but should be straightforward really…

please have a look if you are familiar with the grid-template-areas and help me out?

if I use:

    grid:
      - grid-template-areas: '"i years" "n n" "original_date original_date" "type type"'
      - grid-template-columns: 1fr 1fr
      - grid-template-rows: 2fr 1fr 1fr

it creates a bigger row for the top icon, and pushes the date and type fields down nicely, but the name is centered, and down with the date and type fields…

thx!