Custom summary block with Vertical text | How to align product cards

Hello smart people! I really need help.

Website: https://sparrow-tomato-zxzd.squarespace.com/

Password: testmode1568

There is one specific detail that my client needs to fulfill. I need to make a separate section of the selected products (maybe in the form of summary or separately added products) with a heading and a link in the vertical form. You can see it right after the first intro section on the site. I think I managed to write the CSS code for the vertical typing:

#block-yui_3_17_2_1_1673529093892_132548 h4 { writing-mode: vertical-rl; transform: rotate(180deg); margin-left: 17px; position: relative; right: 10px; }

#block-yui_3_17_2_1_1673529093892_130008 .sqs-block-button-element--small { writing-mode: vertical-rl; transform: rotate(180deg); margin-left: 17px; position: relative; right: 10px; }

But everything turns out very crooked and I can not add more products to this block, because they go out of the grid, and I need to keep the distance between products in 5px. Perhaps such a block is better done on the basis of summary and customize it with CSS? The problem is that this vertical header and link should be above the light grey rectangle which is on the left border of the screen. 

If I didn't explain myself properly, here's the website where we took this idea from: https://www.nakedcph.com/en/.  They have the same block called New arrivals with the ability to scroll the products to the right. I'm also attaching the screenshot.

Please, if someone can help me with this I will be infinitely grateful 🙏🏻

P.S. I have done the section in figma, maybe there is a way to convert it to html and css to just add it as a custom section to the website?