Room Card

type: custom:button-card
name: Living Room
icon: mdi:sofa
tap_action:
  action: navigate
  navigation_path: '#livingroom'
entity: sensor.living_room_temp_and_hum
custom_fields:
  btn:
    card:
      type: vertical-stack
      cards:
        - type: custom:button-card
          tap_action:
            action: toggle
          entity: light.living_room_lights
          icon: mdi:lamp
          show_name: false
          state:
            - value: 'on'
              styles:
                card:
                  - background-color: var(--selected-yellow)
            - value: 'off'
              styles:
                card:
                  - background-color: rgba(96,114,116,0.2)
          styles:
            card:
              - padding: 4px
              - width: 37px
              - height: 37px
              - border-radius: 99px
              - box-shadow: none
            icon:
              - width: 25px
              - color: var(--primary-color)
        - type: custom:button-card
          tap_action:
            action: navigate
            navigation_path: '#climatelivingroom'
          entity: climate.wiser_living_room
          icon: mdi:thermometer
          show_name: false
          styles:
            card:
              - padding: 4px
              - width: 37px
              - height: 37px
              - border-radius: 99px
              - box-shadow: none
              - background: |
                  [[[
                     if (states['climate.wiser_living_room'].attributes.is_heating == true) 
                   return "rgba(255, 155, 155, 0.8)";
                     else
                       return "rgba(96,114,116,0.2)";
                     ]]]
            icon:
              - width: 25px
              - color: var(--primary-color)
        - type: custom:button-card
          tap_action:
            action: navigate
            navigation_path: '#livingroommedia'
          entity: media_player.shield
          icon: mdi:speaker
          show_name: false
          state:
            - value: playing
              styles:
                card:
                  - background-color: var(--office-pink)
          styles:
            card:
              - padding: 4px
              - width: 37px
              - height: 37px
              - border-radius: 99px
              - box-shadow: none
              - background-color: |
                  [[[
                    if ( states['media_player.shield'].state == 'playing' )
                      return 'var(--office-pink)';
                    else if ( states['media_player.living_room_hifi'].state == 'playing' )
                      return 'var(--office-pink)';
                    else
                      return 'rgba(96,114,116,0.2)';
                  ]]]                      
            icon:
              - width: 25px
              - color: var(--primary-color)
styles:
  grid:
    - grid-template-areas: '"n btn" "s btn" "i btn"'
    - grid-template-columns: 1fr min-content
    - grid-template-rows: min-content min-content 1fr
  card:
    - padding: 15px 15px 15px 15px
  custom_fields:
    btn:
      - justify-content: end
      - align-self: start
  name:
    - justify-self: start
    - align-self: start
    - font-size: 19px
    - font-weight: 600
    - color: var(--primary-color)
  state:
    - min-height: 80px
    - justify-self: start
    - align-self: start
    - font-size: 13px
    - font-weight: 500
    - color: rgba(96,114,116,0.7)
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 120px
    - height: 120px
    - left: 0
    - bottom: 0
    - margin: 0 0 -20px -20px
    - background: var(--living-room-yellow)
    - border-radius: 500px
  icon:
    - width: 60px
    - color: black
    - opacity: '0.5'
show_state: true

Great job and good styling. Well done!