Giorno meteo card

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      background: var(--sidebar);
      border-radius: 9px !important;
    }
card:
  type: custom:button-card
  entity: sensor.meteo_icon_orario
  show_icon: false
  show_name: false
  show_label: true
  tap_action:
    action: none
  label: |
    [[[ return entity.attributes.desc ]]]
  styles:
    grid:
      - grid-template-areas: >-
          "giorno giorno ora ora" "data data ora ora" "icon icon temp temp" "icon icon feellike feellike" "l l l l" "wind wind
          rain rain"
      - grid-template-columns: 1fr 1fr 1fr 1fr
      - grid-template-rows: min-content min-content min-content min-content max-content max-content
    card:
      #- width: 300px
      - padding: 25px
      - padding-top: 0px
      - margin-top: -1px
      - margin-left: -1px
      - margin-right: 1px

      - border: solid 10px var(--sidebar)
      - background: none
    label:
      - justify-self: center
      - font-size: 18px
      - font-weight: 600
      - margin-bottom: 10px
      - margin-top: "-20px"
      - text-transform: capitalize
      - color: white
    custom_fields:
      giorno:
        - justify-self: start
        - margin-top: 15px
        - font-size: 18px
        - font-weight: 500
        - color: white
      data:
        - justify-self: start
        - margin-top: px
        - margin-bottom: -30px
        - font-size: 24px
        - font-weight: 500
        - color: white
      ora:
        - justify-self: end
        - margin-top: 0px
        - margin-bottom: -20px
        - font-size: 40px
        - font-weight: 500
        - justify-self: end
        - color: white
      icon:
        - justify-self: end
        - align-self: end
        - color: white
      temp:
        - justify-self: start
        - align-self: end
        - font-size: 36px
        - font-weight: 400
        - color: white
      feellike:
        - justify-self: start
        - align-self: start
        - font-size: 12px
        - font-weight: 400
        - color: white
      wind:
        - justify-self: start
        - font-size: 24px
        - font-weight: 400
        - line-height: 20px
        - margin-left: -15px
        - color: white
      rain:
        - justify-self: start
        - font-size: 24px
        - font-weight: 400
        - line-height: 20px
        - padding-left: 30px
        - color: white
  custom_fields:
    giorno: |
      [[[
        return states['sensor.giorno'].state + ", "
      ]]]
    data: |
      [[[
        return states['sensor.mese'].state
      ]]]
    ora: |
      [[[
        return states['sensor.time'].state
      ]]]
    icon: |
      [[[
        return '<img src="' + entity.state + '" width="140" height="140" />'
      ]]]
    temp: |
      [[[
        return entity.attributes.temp + '<span style="font-size: 0.5em">°C</span>'
      ]]]
    feellike: |
      [[[
        return "Percepita:  " + entity.attributes.percepita + '<span style="font-size: 0.8em">°C</span>'
      ]]]
    wind: |
      [[[
        return  entity.attributes.wind_speed + '<span style="font-size: 0.5em"> m/s</span>' + '<br>' + '<span style="font-size: 0.5em">' + entity.attributes.wind_desc + " (" + entity.attributes.wind_dir +")" + '</span>'
      ]]]
    rain: |
      [[[
        return entity.attributes.precipitation + '<span style="font-size: 0.5em"> mm</span>' +'<br>' + '<span style="font-size: 0.5em">' + "Probabilità " + entity.attributes.precipitation_percent + ' %</span>'
      ]]]