A card to monitoring energy consuption power

Hello,

I’m trying to build a card for the energy consuption using the following code:

type: custom:button-card
styles:
  card:
    - padding: 0
    - border: none
  name:
    - padding: 0
    - width: 100%
    - font-weight: bold
  grid:
    - grid-template-areas: "\"i\" \"n\" \"pictures\" \"buttons\""
    - grid-template-columns: 1fr
    - grid-template-rows: min-content min-content min-content
  custom_fields:
    pictures:
      - background-color: transparent
    buttons:
      - background-color: transparent
custom_fields:
  pictures:
    card:
      type: picture-elements
      style: |
        {% set stato = states('switch.presa_lavatrice') %}
        @keyframes idle {}
        @keyframes unknown {}
        @keyframes unavailable {}
        @keyframes lavaggio {
          0% { transform: rotate(0deg); }
          10% { transform: rotate(40deg); }
          20% { transform: rotate(80deg); }
          30% { transform: rotate(40deg); }
          40% { transform: rotate(80deg); }
          60% { transform: rotate(-40deg); }
          70% { transform: rotate(-80deg); }
          80% { transform: rotate(-40deg); }
          90% { transform: rotate(-80deg); }
          100% { transform: rotate(0deg); }
        }
        @keyframes riempimento{
          30% { transform: rotate(40deg); }
          60% { transform: rotate(-40deg); }
        }
        @keyframes centrifuga {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }             
        }
        @keyframes risciacquo {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(720deg); } 
        }
        ha-card { 
          --my-animation-name: {{stato|lower}};
          --my-rotate: {{ {
                'Riempimento' : '1800ms infinite ease-in-out',
                'Lavaggio' : '1800ms infinite ease-in-out backwards',
                'Centrifuga' : '150ms infinite ease-in-out',
                'Risciacquo' : '1500ms infinite ease-in-out alternate backwards',
                'Idle': '',
                'unknown':'',
                'unavailable':''
                } [stato] }};
          border-radius: 0px 0px 0px 0px;
        }
      image: /local/images/sfondo_black.png
      elements:
        - type: image
          entity: TAG_00
          image: /local/images/lavatrice.png
          state_filter:
            "off": brightness(50%) saturate(0.5) opacity(1.0)
            "on": brightness(100%)
          style:
            left: 18%
            top: 39%
            width: 20%
        - type: state-label
          entity: sensor.presa_lavatrice_power
          prefix: "⚡ "
          style:
            top: 0%
            left: 32%
            pointer-events: none
            transform: initial
            font-size: 12px
            line-height: 24px
            padding: 0px 14px
            color: var(--primary-text-color)
        - type: state-label
          entity: sensor.presa_lavatrice_energy
          prefix: "🏭 "
          style:
            top: 0%
            left: 52%
            pointer-events: none
            transform: initial
            font-size: 12px
            line-height: 24px
            padding: 0px 14px
        - type: state-label
          entity: sensor.consumo_lavatrice
          prefix: "💰 "
          style:
            top: 0%
            left: 74%
            pointer-events: none
            transform: initial
            font-size: 12px
            line-height: 24px
            padding: 0px 14px
        - type: state-label
          entity: switch.presa_lavatrice
          prefix: "Stato: "
          style:
            top: 10%
            left: 36%
            pointer-events: none
            transform: initial
            font-size: 12px
            font-weight: bold
            color: null
            line-height: 24px
            padding: 2px 2px
        - type: custom:apexcharts-card
          style:
            "--ha-card-background": rgba(0,0,0,0.0)
            "--ha-card-border-width": 0px
            "--ha-card-box-shadow": none
            top: 50%
            left: 65%
            width: 60%
            font-size: 12px
          experimental:
            color_threshold: true
          apex_config:
            chart:
              height: 100px
            tooltip:
              enabled: true
            title:
              style:
                fontSize: 12px
                fontFamily: Segoe UI Light
            yaxis:
              forceNiceScale: true
              decimalsInFloat: 1
              labels:
                style:
                  fontSize: 11px
                  fontFamily: Segoe UI Light
            xaxis:
              axisBorder:
                show: true
              labels:
                show: true
                style:
                  fontSize: 10px
                  fontFamily: Segoe UI Light
            grid:
              show: true
              borderColor: rgba(112, 135, 164, 0.5)
          graph_span: 3h
          span:
            start: minute
            offset: "-3h"
          show:
            last_updated: false
          header:
            standard_format: false
            show: false
            show_states: false
            colorize_states: true
            title: Potenza
          series:
            - entity: sensor.presa_lavatrice_power
              name: Potenza
              type: line
              stroke_width: 2
              curve: stepline
              group_by:
                func: last
                fill: last
                duration: 1m
              show:
                header_color_threshold: true
                extremas: true
                name_in_header: false
                legend_value: false
              opacity: 0.8
              color_threshold:
                - color: "#27b376"
                  value: 100
                - color: "#f9a73e"
                  value: 500
                - color: "#bf212f"
                  value: 1000
#######################################
## BUTTONS BELOW
#######################################
  buttons:
    card:
      type: custom:mod-card
      card_mod:
        style: |
          :host {
            --grid-card-gap: 0px;
          }
      card:
        type: grid
        columns: 4
        square: false
        cards:
          - type: custom:button-card
            name: Info

But I get the following card:

image

The info button is under the rest of the card, I’d like to put the button on the bottom of the card under the white line:

image

I tried to change the button section code but with no success.