type: custom:mod-card
card_mod:
  style: |
    @media (max-width: 480px) {
      ha-card {
        z-index: 1;
        position: fixed;
        bottom: 10px;
        left: 0;
        right: 0;
        width: 100%;
        background: none;
        border-radius: 10px;
        padding: 10px;
        /*margin: 0 10px; /* Optional: Adds a bit of space on the sides */
        box-sizing: border-box; /* Ensures padding is included in the width */
      }
    }
card:
  type: grid
  square: false
  columns: 5
  cards:
    - type: custom:button-card
      icon: mdi:cart
      tap_action:
        action: navigate
        navigation_path: /todo
      styles:
        icon:
          - width: 24px
          - color: white
        img_cell:
          - width: 50px
          - height: 50px
        card:
          - background: black
          - padding: 0
    - type: custom:button-card
      icon: mdi:calendar
      tap_action:
        action: navigate
        navigation_path: /lovelace/calendrier
      styles:
        icon:
          - width: 24px
          - color: white
        img_cell:
          - width: 50px
          - height: 50px
        card:
          - background: black
          - padding: 0
    - type: custom:button-card
      icon: mdi:theater
      tap_action:
        action: navigate
        navigation_path: /lovelace/upcoming
      styles:
        icon:
          - width: 24px
          - color: white
        img_cell:
          - width: 50px
          - height: 50px
        card:
          - background: black
          - padding: 0
    - type: custom:button-card
      icon: mdi:car
      tap_action:
        action: navigate
        navigation_path: /lovelace/voiture
      styles:
        icon:
          - width: 24px
          - color: white
        img_cell:
          - width: 50px
          - height: 50px
        card:
          - background: black
          - padding: 0
    - type: custom:button-card
      icon: mdi:cog
      tap_action:
        action: navigate
        navigation_path: '#todo'
      styles:
        icon:
          - width: 24px
          - color: white
        img_cell:
          - width: 50px
          - height: 50px
        card:
          - background: black
          - padding: 0