Is it card-mod (mod-card), swipe-card, or even button-card losing cards here.... and Why?

cut it short:

setting custom:mod-card, even without any styling at all like:

        - type: custom:mod-card
            type: custom:swipe-card
              - type: custom:button-card
              - type: custom:button-card
              - type: custom:button-card
              - type: custom:button-card

causes individual custom:button-card to disappear from the custom:swipe-card.
Not sure if that’s random, (though the order is seemingly so), because it’s always like this:

row 1 (4 cards) : loses card 2
row 2 (5 cards): loses card 4 + 5
row 3 (4 cards): always ok
row 4 (4 cards): loses card 1

now this is a bit complex, so forgive me for posting not just a short line of yaml.

I have a core vertical-stack of 4 custom:swipe-card configs, which each contain subviews with a vertical layout.

the main vertical-stack is in the form of:

type: vertical-stack
  - !include /config/dashboard/buttons/buttons_dashboard_direct.yaml

  - type: custom:swipe-card
# use anchors on all 3 other rows below this, but even when not using anchor, the issue remains unchanged
    <<: &swipe
        effect: cards
          type: bullets #progressbar #fraction
        simulateTouch: true
        spaceBetween: 12
        preloadImages: false
        preventInteractionOnTransition: true
        preventClicks: true
        freeMode: true
        momentum: true
        grabCursor: true
        slidesPerView: 4 #in wide mode, 3 in mobile mode

and filled with these subviews for each area in my home.

also, this main vertical-stack itself is

inside a Panel view (to be able to mod-card that with a light/dark sensitive background), and inside a custom:state-switch, to be able to set the number of slidesPerView in the swipe card:

title: Plattegrond
path: plattegrond
icon: mdi:floor-plan
# background: center / cover no-repeat url('/local/images/areas/plattegrond.png') fixed

panel: true

  - type: custom:mod-card
    style: |
      ha-card {
          {% set dark = states('input_select.theme') is search('ight|Dark|Matrix', ignorecase=True) %}
          {% set extension = '_inversed' if dark else '' %}
          {{"center / cover no-repeat url('/local/images/areas/plattegrond"~extension~".png') fixed"}};
      type: custom:state-switch
      entity: mediaquery
        '(min-width: 1000px)':
          !include /config/dashboard/includes/include_plattegrond_swipe_4.yaml
          !include /config/dashboard/includes/include_plattegrond_swipe_3.yaml

main structure of a single area card is:

        - type: custom:button-card
          entity: light.laundry_ceiling
          template: plattegrond
            path: /ui-sub-views/bijkeuken
            picture: bijkeuken_klein.jpg
            tooltip: Bijkeuken
              - border-top: >
                  [[[ return (states['binary_sensor.laundry_sensor_motion'].state == 'on')
                      ? '0.5rem solid red' : 'none'; ]]]

where the styles are only used in areas I actually have a motion sensor available. (for those of you familiar with custom:button-card: we can not use the additional entity of the motion-sensor in the variables, because the button-card wont update templates with these variable. Hence the hardcoded extra styles: on some of the cards)

so far so good, and working beautifully.

my issue arises, when I want/need to mod-card the custom:swipe-card, to be able to style the navigating elements in that swipe card.

in that case I use eg:

        - type: custom:mod-card
                $: |
                  /* colors the whole fraction  element: '1/3' */
                  /*.swiper-pagination-fraction {
                    color: white;
                  /* colors the '1' in: '1/3' */
                  .swiper-pagination-current {
                    color: var(--swiper-navigation-color);
                  /* colors the '3' in: '1/3' */
                  .swiper-pagination-total {
                    color: gold;
              .: |
                ha-card {
                  font-weight: bold;
                  font-size: 20px;
                  color: white; */sets the full line, or only the '/', when the other elements are colored individually

and follow with the full swipe section of 4/5 cards.

using 4 rows currently, and this mod-card, on 3 of the 4 rows, individual, and always the same, cards are not displayed (also, not clickable, or anything, they are simply not there). Except for the gap they leave.

I have manipulated all single aspects of those cards, including the images they use, the template, and all of the variables. it does not change anything.

the only thing I accidentally noticed is that upon using a fake additional styles: section on those cards, I can make them show up:

              - type: custom:button-card
                entity: switch.espresso_keuken
                template: plattegrond
                  path: /ui-sub-views/keuken
                  picture: keuken_detail_klein.jpg
                  tooltip: Keuken
#fake style so mod-card does not take out this card......
                    - border-top: >
                        [[[ return (states['binary_sensor.laundry_sensor_motion'].state == 'on')
                            ? 'none' : 'none'; ]]]

I’ve even tried to make that useful and use:

                    - border-top: >
                        [[[ return (states['binary_sensor.espresso_keuken'].state == 'on')
                            ? '0.5rem solid red' : 'none'; ]]]

in this card, because that binary exists and indicates some particular value to the system, but that wont work. Somehow it just requires these styles to be I that form and content.

Its driving me mad because I have no clue why this is happening, nor where I should drop this as an issue.

hence the title…

even tried to visualize it like this:

V | X | V | V
V | V | V | X | X
V | V | V | V
X | V | V | V

but for now that does not help me… other than show the unbalance of the 5th card in the 2nd row?
well, of course I tried and deleted that 5th card. NO change however, still the identical cards are being left out

sorry for this long opening post.
since the top config using the mod-card seems to be as short and concise a config I can provide, Ill pop this in the card-mod repo as issue and hope its the correct spot

I have this added to my configuration.yaml.

    - /local/card-mod.js

I am not sure if the way you do it works, but this way work for me and I just add the style tag to the cards I want, like this:

  type: markdown
  content: '# Bedroom'
  style: |
    ha-card {
      box-shadow: none;
      border: none;
      margin: 0;
    } {
      box-shadow: none;
      padding: 0 0 0 16px;
      border: none;
      margin: 0;

yes, I have no issues with using card-mod.
my main point here is that using mod-card on a swiper, makes some of the contained cards inside that swiper disappear.

it might have to do with what is stated in the docs

and specifically this:

The mod-card will create a <ha-card> element - with removed background and border - and put your card inside that.

yet the fact it does not interact identically on all cards inside those swipe cards is bugging me

Some developers make their own CSS codes that override the card mod.