Need help for CSS-Modification

[Memfis]

   
As you can see in the screenshot I want to modify the Look of the Home-Screen of Jellyfin.
I want two libraries side by side in a column and than a new row and again two librays side by side and again a new row.
To the right of the libraries I want to see whats last added in each library

Here is my code so far. I confess that I used ChatGPT.

Code:

@media all and (min-width: 50em) {
  /* Home-Seitencontainer als Flexbox nebeneinander */
  .homePage .homeSectionsContainer {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0.2em !important; /* Abstand kleiner */
  }
  /* Jede Section explizit auf 48% Breite */
  .homePage .homeSectionsContainer > .verticalSection {
    flex: 0 0 48% !important;  /* Breite erzwingen */
    max-width: 48% !important;
    box-sizing: border-box !important;
  }
  /* Scroll-Container innerhalb der Sections */
  .homePage .homeSectionsContainer > .verticalSection .itemsContainer {
    flex-wrap: wrap !important;
  }
}

That's looks fine, but some problems:

1) There is a big black space between My media and Last added. That should be smaller
2) The boxes of the libraries should be smaller
3) The covers of the Last added should also smaller
4) I only want to see 5 oder 6 last added items.
5) Also would be nice to have a smaller black space above the headline of My Media and Last added.

Would you please help me to make this?