Trying to add picture element card inside horizontal-stack

Configuration Frontend
1

i’m trying to add picture element card inside horizontal-stack.
cant get it to work.
can anybudy help with that?

cards:
  - cards:
      - card:
          type: picture-elements
          aspect_ratio: 969
          image: /local/red.jpg
          overflow: hidden
          elements:
            - entity: sensor.time
              style: null
              color: white
              font-size: 8vw
              left: 50%
              top: 35%
              type: state-label
            - entity: sensor.date
              style: null
              color: white
              font-size: 2vw
              left: 50%
              top: 70%
              type: state-label
      - card:
          aspect_ratio: 969
          image: /local/images/lights11.jpg
          tap_action:
            action: navigate
            navigation_path: /lovelace/security
          type: picture
        style:
          border-radius: 20px
          border: 'solid 1px rgba(100,100,100,0.6)'
          box-shadow: '3px 3px rgba(0,0,0,0.4)'
          overflow: hidden
        type: 'custom:card-modder'
    type: horizontal-stack

and also, way is it look like that
cards:
- cards:
- card:
shouldn’t it look like that:
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
???

2

What’s not working? The code looks correct. Indentations appear to be correct. The use of the custom card appears to be correct.

It looks like that because the interpreter places fields in alphabetical order. The - indicates an object, every field at that indentation level until the next - is considered part of that object. Those fields are what I’m referring to.

3

Thanks petro for the replay.
i’l upload the image, so you can see the issue.

again, the code is:

cards:
  - cards:
      - card:
          type: picture-elements
          image: /local/images/red02.jpg
          elements:
            - entity: sensor.time
              style: null
              color: white
              font-size: 8vw
              left: 50%
              top: 35%
              type: state-label
            - entity: sensor.date
              style: null
              color: white
              font-size: 2vw
              left: 50%
              top: 70%
              type: state-label
        style:
          border: 'solid 1px rgba(100,100,100,0.6)'
          border-radius: 20px
          box-shadow: '3px 3px rgba(0,0,0,0.4)'
          overflow: hidden
        type: 'custom:card-modder'
      - card:
          aspect_ratio: 969
          image: /local/images/lights11.jpg
          tap_action:
            action: navigate
            navigation_path: /lovelace/security
          type: picture
        style:
          border: 'solid 1px rgba(100,100,100,0.6)'
          border-radius: 20px
          box-shadow: '3px 3px rgba(0,0,0,0.4)'
          overflow: hidden
        type: 'custom:card-modder'
    type: horizontal-stack
type: vertical-stack

and the problem is that i dont see the date and time, only a gleams of it in the bottom left corner

01
011920×1080 233 KB

i’m trying to change the top/left procentahe, but nothing change.
maybe you can help.

Refael