I have watched countless YouTube videos and read some tutorials here on the forum. But I can’t find a reasonable solution for my goal:
Masonry grid with different images that are linked to their respective subpages (customer projects).
The grid should adjust based on the screen size, so that, for example, on desktops, 3 rows are visible, but on smartphones, only one row. => I have recently achieved this using the “Columns” trick under typography.
Each image should always display a heading and a subheadline at the bottom left.
You have a top margin on your text that is moving it out of the flow position.
Read up on relative and absolute positioning. Because your photos are varying aspect ratios, you will want to make use of relative and absolute positioning in your card design, so that your titles can position correctly whatever the image size is.
Also, if you’re using the CMS, I’d store the photos and their titles there. It will make designing this section far easier.