Kivymd why is the MDCard showing double

Question

I'm trying to build a UI for an app using kivyMD's MDCard a method I saw on youtube, but the MDCard displays double the elements I put into it.

but this is the outcome

screenshot of the output

This is the code I used for the mdcard in the kv file.

<ElementCard@MDCard>:
    md_bg_color:69/255,55/255,86/255,1
    padding:dp(15)
    spacing:dp(15)
    radius:dp(25)
    ripple_behavior: True
    image:''
    text:""
    subtext:''
    orientation:'vertical'

    Image:
        source:root.image
    MDBoxLayout:
        orientation:'vertical'
        size_hint_y:.5
    MDLabel:
        halign:"center"
        text:root.text
        font_style:"H6"
    MDLabel:
        halign:"center"
        font_style:"Caption"
        text:root.subtext

and when I put it inside a grid layout this was my code

        MDGridLayout:
            size_hint_y:.75
            cols:3
            padding:[dp(15),dp(15),dp(15),dp(35)]
            spacing:dp(15)

            ElementCard:
                image: "assets/animation.png"
                text: "Animated"
                subtext: "Anime, Adult Animati..."
                on_release: app.root.current  = "mainscreen"

            ElementCard:
                image: "assets/liveaction.png"
                text: "Live Action"
                subtext: "Hollywood, KDrama..."
                on_release: root.OnLiveActionPress()

can someone please help me and tell me what I'm doing wrong or missing.