Help with formatting a dashboard

Hello to all!.

After searching here endless posts, I´ve tried to create a dashboard on my own for my wife without much experience on CSS (just really basic understanding) but I´m spending hours trying to formatting it for the correct screen size (Samsung galaxy S22+).

The thing is that every item I add it´s correct in concept but not in placement.

Here is the code:

kiosk_mode:
  hide_header: false
views:
  - title: Home
    sections: []
    type: custom:vertical-layout
    icon: mdi:home
    swipe_nav:
      enable: false
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: menu
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                    }
          - type: custom:button-card
            name: |
              [[[
                return states['weather.forecast_casa'].attributes.temperature + '<span style="font-size:0.6em">°C </span>'
              ]]]
            custom_fields:
              icon: |
                [[[
                  var weather = states['weather.forecast_casa'].state;
                  return '<img src = "/local/weather_icons/' + weather + '.svg" width="70" height="70">'
                ]]]
            styles:
              grid:
                - grid-template-areas: '"n icon"'
              card:
                - background: none
                - overflow: visible
                - padding-right: 8px
                - padding-left: 8px
                - width: auto
                - border: none
              name:
                - justify-self: end
                - font-size: 35px
                - font-weight: 500
              custom_fields:
                icon:
                  - justify-self: end
                  - align-self: end
                  - padding-right: 3px
                  - border: none
        card_mod:
          style: |
            :host {
              border: none;
              box-shadow: none;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: person.flor
            name: Flor
            use_entity_picture: true
            card_mod:
              style: |
                ha-card {
                  --chip-height: 40px;
                  --chip-font-size: 20px;
                }
          - type: entity
            entity: person.federico
            name: Fefo
            icon_color: green
            use_entity_picture: true
            card_mod:
              style: |
                ha-card {
                  --chip-height: 40px;
                  --chip-font-size: 20px;
                }
      - type: custom:mushroom-title-card
        title: All rooms
        alignment: start
        title_tap_action:
          action: none
        subtitle_tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              margin-top: -20px; /* Ajusta el valor según la cantidad de espacio a reducir */
              padding: 0px; /* Elimina espacio adicional dentro de la tarjeta */
            }
      - type: custom:css-swipe-card
        cardId: swiper
        template: slider-horizontal
        auto_height: true
        pagination: true
        navigation: true
        card_gap: 2rem
        timer: 3
        navigation_next: mdi:chevron-right
        navigation_prev: mdi:chevron-left
        height: 10rem
        cards:
          - type: picture
            alt_text: Cocina
            theme: Flor
            tap_action:
              action: navigate
              navigation_path: /Cel-Flor/cocina
            image: /api/image/serve/4f7a3794ace1fe371a29a8a9e17e5f08/512x512
            card_mod:
              style: |
                ha-card {
                  position: relative; /* Permite posicionar elementos dentro de la tarjeta */
                  height: 300px !important; /* Ajusta la altura */
                  width: 120px !important;  /* Ajusta el ancho */
                  overflow: hidden; /* Oculta contenido fuera de los límites */
                }
                img {
                  object-fit: cover; /* Hace que la imagen ocupe toda la tarjeta */
                  height: 100%; /* Ajusta la altura de la imagen al 100% de la tarjeta */
                  width: 100%; /* Ajusta el ancho de la imagen al 100% de la tarjeta */
                }
                .text-overlay {
                  position: absolute; /* Posiciona el texto sobre la imagen */
                  top: 50%; /* Centra verticalmente */
                  left: 50%; /* Centra horizontalmente */
                  transform: translate(-50%, -50%); /* Ajusta el texto al centro exacto */
                  color: white; /* Color del texto */
                  font-size: 18px; /* Tamaño de la fuente */
                  font-weight: bold; /* Texto en negrita */
                  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Sombra para mejor visibilidad */
                  pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
                }
                ha-card::before {
                  content: 'Cocina'; /* Agrega el texto sobre la tarjeta */
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  color: white;
                  font-size: 18px;
                  font-weight: bold;
                  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
                  pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
                }
          - type: picture
            alt_text: Living
            theme: Flor
            tap_action:
              action: navigate
              navigation_path: /Cel-Flor/living
            image: /api/image/serve/799b3c781d9cfb7f095394f501402a44/512x512
            card_mod:
              style: |
                ha-card {
                  position: relative; /* Permite posicionar elementos dentro de la tarjeta */
                  height: 300px !important; /* Ajusta la altura */
                  width: 120px !important;  /* Ajusta el ancho */
                  overflow: hidden; /* Oculta contenido fuera de los límites */
                }
                img {
                  object-fit: cover; /* Hace que la imagen ocupe toda la tarjeta */
                  height: 100%; /* Ajusta la altura de la imagen al 100% de la tarjeta */
                  width: 100%; /* Ajusta el ancho de la imagen al 100% de la tarjeta */
                }
                .text-overlay {
                  position: absolute; /* Posiciona el texto sobre la imagen */
                  top: 50%; /* Centra verticalmente */
                  left: 50%; /* Centra horizontalmente */
                  transform: translate(-50%, -50%); /* Ajusta el texto al centro exacto */
                  color: white; /* Color del texto */
                  font-size: 18px; /* Tamaño de la fuente */
                  font-weight: bold; /* Texto en negrita */
                  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Sombra para mejor visibilidad */
                  pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
                }
                ha-card::before {
                  content: 'Living'; /* Agrega el texto sobre la tarjeta */
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  color: white;
                  font-size: 18px;
                  font-weight: bold;
                  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
                  pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
                }
          - type: picture
            alt_text: Escalera
            theme: Flor
            tap_action:
              action: navigate
              navigation_path: /Cel-Flor/comedor
            image: /api/image/serve/5600cc454cd86c3d30694a94935f0f2f/512x512
            card_mod:
              style: |
                ha-card {
                  position: relative; /* Permite posicionar elementos dentro de la tarjeta */
                  height: 300px !important; /* Ajusta la altura */
                  width: 120px !important;  /* Ajusta el ancho */
                  overflow: hidden; /* Oculta contenido fuera de los límites */
                }
                img {
                  object-fit: cover; /* Hace que la imagen ocupe toda la tarjeta */
                  height: 100%; /* Ajusta la altura de la imagen al 100% de la tarjeta */
                  width: 100%; /* Ajusta el ancho de la imagen al 100% de la tarjeta */
                }
                .text-overlay {
                  position: absolute; /* Posiciona el texto sobre la imagen */
                  top: 50%; /* Centra verticalmente */
                  left: 50%; /* Centra horizontalmente */
                  transform: translate(-50%, -50%); /* Ajusta el texto al centro exacto */
                  color: white; /* Color del texto */
                  font-size: 18px; /* Tamaño de la fuente */
                  font-weight: bold; /* Texto en negrita */
                  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Sombra para mejor visibilidad */
                  pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
                }
                ha-card::before {
                  content: 'Escalera'; /* Agrega el texto sobre la tarjeta */
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  color: white;
                  font-size: 18px;
                  font-weight: bold;
                  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
                  pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
                }
          - type: picture
            alt_text: Cuarto
            theme: Flor
            tap_action:
              action: navigate
              navigation_path: /Cel-Flor/cuarto
            image: /api/image/serve/05cbe824f2253cf70b0908b385d1b305/512x512
            card_mod:
              style: |
                ha-card {
                  position: relative; /* Permite posicionar elementos dentro de la tarjeta */
                  height: 300px !important; /* Ajusta la altura */
                  width: 120px !important;  /* Ajusta el ancho */
                  overflow: hidden; /* Oculta contenido fuera de los límites */
                }
                img {
                  object-fit: cover; /* Hace que la imagen ocupe toda la tarjeta */
                  height: 100%; /* Ajusta la altura de la imagen al 100% de la tarjeta */
                  width: 100%; /* Ajusta el ancho de la imagen al 100% de la tarjeta */
                }
                .text-overlay {
                  position: absolute; /* Posiciona el texto sobre la imagen */
                  top: 50%; /* Centra verticalmente */
                  left: 50%; /* Centra horizontalmente */
                  transform: translate(-50%, -50%); /* Ajusta el texto al centro exacto */
                  color: white; /* Color del texto */
                  font-size: 18px; /* Tamaño de la fuente */
                  font-weight: bold; /* Texto en negrita */
                  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Sombra para mejor visibilidad */
                  pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
                }
                ha-card::before {
                  content: 'Cuarto'; /* Agrega el texto sobre la tarjeta */
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  color: white;
                  font-size: 18px;
                  font-weight: bold;
                  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
                  pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
                }
        custom_css:
          '--navigation-button-next-color': pink
          '--navigation-button-next-background-color': transparent
          '--navigation-button-next-width': 50px
          '--navigation-button-next-height': 50px
          '--navigation-button-prev-color': pink
          '--navigation-button-prev-background-color': transparent
          '--navigation-button-prev-width': 50px
          '--navigation-button-prev-height': 50px
          '--pagination-bullet-active-background-color': pink
          '--pagination-bullet-distance': 5px
  - type: sections
    max_columns: 1
    title: Cocina
    path: cocina
    icon: mdi:gas-burner
    theme: Flor
    subview: false
    dense_section_placement: false
    background:
      opacity: 22
      alignment: center
      size: cover
      repeat: no-repeat
      attachment: scroll
    sections:
      - type: grid
        cards:
          - type: heading
            heading: Nueva sección
  - type: sections
    max_columns: 1
    title: Living
    path: living
    icon: mdi:television
    theme: Flor
    sections:
      - type: grid
        cards:
          - type: heading
            heading: Nueva sección
    cards: []
  - type: sections
    max_columns: 1
    title: Escalera
    path: comedor
    icon: mdi:stairs
    theme: Flor
    sections:
      - type: grid
        cards:
          - type: heading
            heading: Nueva sección
    cards: []
  - type: sections
    max_columns: 1
    title: Cuarto
    path: cuarto
    icon: mdi:bed-double-outline
    theme: Flor
    sections:
      - type: grid
        cards:
          - type: heading
            heading: Nueva sección

This would be associated with this custom theme:

Flor:
  # Colors
  text: "#BB9C87"

  subtext1: "#5c5f77"
  subtext0: "#6c6f85"

  overlay2: "#7c7f93"
  overlay1: "#8c8fa1"
  overlay0: "#9ca0b0"

  surface2: "#acb0be"
  surface1: "#bcc0cc"
  surface0: "#ccd0da"

  base: "#c1b38a"
  mantle: "#e6e9ef"
  crust: "#dce0e8"

  rosewater: "#dc8a78"
  flamingo: "#dd7878"
  pink: "#ea76cb"
  mauve: "#8839ef"
  red: "#d20f39"
  maroon: "#e64553"
  peach: "#fe640b"
  yellow: "#df8e1d"
  green: "#40a02b"
  teal: "#179299"
  sky: "#04a5e5"
  sapphire: "#209fb5"
  blue: "#1e66f5"
  lavender: "#7287fd"

  primary-font-family: "Kalam"
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  ha-card-header-font-family: "var(--primary-font-family)"  

  ###########################

  # Header
  app-header-background-color: var(--mantle)
  app-header-text-color: var(--text)

  # Main Interface colors
  primary-color: var(--blue)
  light-primary-color: var(--primary-color)

  primary-background-color: var(--mantle)
  secondary-background-color: var(--mantle)
  accent-color: var(--yellow)

  # Text
  primary-text-color: var(--text)
  secondary-text-color: var(--subtext1)
  text-primary-color: var(--text)
  divider-color: var(--base)
  disabled-text-color: var(--overlay0)
  text-accent-color: var(--text)

  # Sidebar
  sidebar-background-color: var(--crust)
  sidebar-selected-background-color: var(--primary-background-color)

  sidebar-icon-color: var(--subtext0)
  sidebar-text-color: var(--subtext0)
  sidebar-selected-icon-color: var(--mauve)
  sidebar-selected-text-color: var(--mauve)

  # Buttons
  paper-item-icon-color: var(--subtext0)
  paper-item-icon-active-color: var(--primary-color)

  # States and Badges
  state-icon-color: var(--lavender)
  state-icon-active-color: var(--primary-color)

  state-icon-unavailable-color: var(--disabled-text-color)

  # Sliders
  paper-slider-knob-color: var(--blue)
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--blue)

  # Labels
  label-badge-background-color: var(--surface0)
  label-badge-text-color: var(--text)
  label-badge-red: var(--red)
  label-badge-green: var(--green)
  label-badge-blue: var(--blue)
  label-badge-yellow: var(--yellow)
  label-badge-gray: var(--overlay0)

  # Cards
  card-background-color: var(--base)
  ha-card-background: transparent

  ha-card-border-radius: "15px"
  ha-card-box-shadow: none
  paper-dialog-background-color: var(--overlay0)
  paper-listbox-background-color: var(--overlay0)
  paper-card-background-color: var(--card-background-color)

  # Switches
  switch-checked-button-color: var(--green)
  switch-checked-track-color: var(--surface0)
  switch-unchecked-button-color: rgb(--overlay0)
  switch-unchecked-track-color: rgb(--surface0)
  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)

  # Table
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  data-table-background-color: var(--primary-background-color)
  mdc-checkbox-unchecked-color: var(--overlay0)

  # Dropdowns
  material-background-color: var(--primary-background-color)
  material-secondary-background-color: var(--primary-background-color)
  mdc-theme-surface: var(--primary-background-color)

  # Pre/Code
  markdown-code-background-color: var(--surface0)

  # Checkboxes
  mdc-select-fill-color: var(--surface0)
  mdc-select-ink-color: var(--primary-text-color)
  mdc-select-label-ink-color: var(--subtext1)
  mdc-select-idle-line-color: var(--primary-text-color)
  mdc-select-dropdown-icon-color: var(--secondary-text-color)
  mdc-select-hover-line-color: var(--accent-color)

  # Input
  input-fill-color: var(--secondary-background-color)
  input-dropdown-icon-color: var(--secondary-text-color)
  input-ink-color: var(--primary-text-color)
  input-label-ink-color: var(--secondary-text-color)
  input-idle-line-color: var(--primary-text-color)
  input-hover-line-color: var(--accent-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-disabled-line-color: var(--disabled-text-color)
  input-outlined-idle-border-color: var(--disabled-text-color)
  input-outlined-hover-border-color: var(--disabled-text-color)
  input-outlined-disabled-border-color: var(--disabled-text-color)
  input-disabled-fill-color: rgba(0, 0, 0, 0)

  # Toast
  paper-toast-background-color: var(--overlay0)

  # Colors
  error-color: var(--red)
  warning-color: var(--yellow)
  success-color: var(--green)
  info-color: var(--blue)

  state-on-color: var(--green)
  state-off-color: var(--red)

1- I can´t get the person´s entity cards to be equaly spaced on that horizontal grid.
2- I have created swipe cards to navigate to other tabs (to put all entities from that rooms), but I cannot get them together (I have only put 4, but there are 9 meant to be there). And now they even do not show the complete button on the card.

This is the inspiration:

And this is the lame result lol:

Honestly I have spent hours wiht the inspection tab on Chrome (and validating it on the cellphone), but it seems there is some knowledge that I obviously do not have.

Could someone provide some help regarding this?

Thank you!