I am using the Sections View and trying to setup a custom people card. The card is very large to begin with so I use the transform syntax to reduce the card size. However the area around the card does not scale with it so all the cards have huge padding. 
Here is the original:
Here is the transformed one:
All the black area creates this padding for other cards in the section. I am looking to just shrink the original card by 30-50%.
Here is my code so far:
type: custom:button-card
entity: person.justin
aspect_ratio: 1/1
name: Person
show_entity_picture: true
show_name: false
hold_action:
action: none
styles:
card:
- transform: scale(0.5)
- background-color: null
- border-radius: 5%
- padding: 0% 5% 0% 0%
- color: gray
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
custom_fields:
icon:
- clip-path: circle()
- width: 100%
- pointer-events: none
- display: grid
- border: 10px solid
- border-color: '#ff9900'
- border-radius: 500px
- opacity: 1
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
Edit1: Ive managed to get closer I think. The card is now the same height as the area around it, but still twice as wide.
I also removed some superfluous code
type: custom:button-card
entity: person.justin
name: Person
width: 50%
show_entity_picture: true
show_name: false
hold_action:
action: none
styles:
card:
- width: 50%
- background-color: null
- padding: 0% 5% 0% 0%
custom_fields:
icon:
- clip-path: circle()
- width: 95%
- pointer-events: none
- border: 15px solid
- border-color: '#df00a9'
- border-radius: 500px
- opacity: 1
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]