Card-mod styling text alignment

Configuration Frontend
1

I was struggling with trying to apply styling on an entities card to center the Title text. Finally I found a discussion on this topic and found the solution which involves using the CSS styling ‘display: unset’ which removes the underlying styling and allows the Title to be maneuvered. The unfortunate consequence is that the colored border styling is removed and I cannot figure out how to rearrange the YAML code to re-enable the border. I have tried moving the border statement around with no luck. Using ‘revert’ or ‘initial’ argument to the display: statement does not seem to work.
HA ver 2021 10.1 running on Docker.

type: entities
entities:
  - type: custom:slider-entity-row
    entity: water_heater.electric_water_heater
    min: 110
    max: 130
    step: 1
    full_row: true
    name: Temp
  - type: attribute
    entity: water_heater.electric_water_heater
    attribute: operation_mode
    name: Mode
card_mod: null
style: |
  ha-card
   :host { }
  ha-card .card-header
     { padding: 0px; 
       display: unset; }

  ha-card .card-header .name
   { color: black;
     text-family "Ariel";
   text-align: center;
   font-weight: 400;
   letter-spacing: 3px; }
  ha-card
   { --header-font-size: 32 }
   { border: 3px solid green } 
title: Setting
1 Like