Sticky BottomNavigation Bar

type: custom:mod-card
card_mod:
  style: |

    @media (min-width:180px) {
      ha-card {
        z-index:6;
        position: fixed;
        background: #eeedf5;
        bottom: 5px;
        left: 10px;
        padding: 0px;
        border-radius: 100px;
        width: calc(100% - 20px);
      }
    }

    @media (min-width:801px)  {
      ha-card {
        left: calc(20% + 43px);
        width: calc(60% - 30px);
      }
    }
card:
  type: grid
  square: false
  columns: 3
  cards:
    - type: custom:button-card
      icon: mdi:home
      name: Overview
      show_label: false
      show_state: false
      show_name: true
      tap_action:
        action: navigate
        navigation_path: /mobile-light/overview
      styles:
        icon:
          - width: 24px
          - color: "#3b3b3b"
        name:
          - font-size: 13px
        img_cell:
          - width: 50px
          - height: 40px
        card:
          - background: none
          - padding: 0
    - type: custom:button-card
      icon: mdi:home-roof
      name: Room
      show_label: false
      show_state: false
      show_name: true
      tap_action:
        action: navigate
        navigation_path: /mobile-light/room
      styles:
        icon:
          - width: 24px
          - color: "#3b3b3b"
        name:
          - font-size: 13px
        img_cell:
          - width: 50px
          - height: 40px
        card:
          - background: none
          - padding: 0
    - type: custom:button-card
      icon: mdi:cctv
      name: Camera
      show_label: false
      show_state: false
      show_name: true
      tap_action:
        action: navigate
        navigation_path: /mobile-light/camera
      styles:
        icon:
          - width: 24px
          - color: "#3b3b3b"
        name:
          - font-size: 13px
        img_cell:
          - width: 50px
          - height: 40px
        card:
          - background: none
          - padding: 0