How to create a reusable component with many possibilities based on the screen size?

I'm making a blog website with a UI similar to https://atlas-demo.blogspot.com. A card component is used all over the main page, which has different layouts in different screen sizes. There is no specific pattern so I'm having difficulties creating a reusable component.

These are some of the possibilities for the card component:

Possibility #1

Screen size	Layout
mobile	float
tablet	float
mobile	float

Possibility #2

Screen size	Layout
mobile	float
tablet	float
mobile	horizontal

Possibility #3

Screen size	Layout
mobile	horizontal
tablet	horizontal
mobile	float

Possibility #4

Screen size	Layout
mobile	vertical
tablet	vertical
mobile	vertical

And by "float" and "horizontal" and "vertical" I mean

float:

horizontal:

vertical:

I can't find any pattern between these possibilities. My workaround is to pass a layout object to the component that defines the way it should look in different screen sizes. something like this:

const layout = {
  mobile: "float",
  tablet: "horizontal",
  desktop: "horizontal"
}

And I add different classes based on the layout object:

<div class={classnames(
        layout.mobile === "float" && "mobile:relative",
        layout.tablet === "float" && "tablet:relative",
        layout.desktop === "float" && "desktop:relative",

        layout.mobile === "horizontal" && "mobile:flex",
        layout.tablet === "horizontal" && "tablet:flex",
        layout.desktop === "horizontal" && "desktop:flex",

        layout.mobile === "vertical" && "mobile:flex mobile:flex-col",
        layout.tablet === "vertical" && "tablet:flex tablet:flex-col",
        layout.desktop === "vertical" && "desktop:flex desktop:flex-col",

     )}>
</div>

BTW this is JSX syntax with tailwindcss classes.

As you can see, it's very messy and it gets worst as the complexity grows:

1. What if I want the image to be in a square shape when the layout is not "float"?
2. What if I want to add something to the card, like a logo, but it should be in the corner for "horizontal" and "vertical" layouts and in the center in the "float" layout?

And so on.

So I like to hear your take on this. I don't want you to do my homework, I just need some ideas. Anything could be helpful. Maybe a design pattern that I don't know?