There might be a flaw in the delivered figma file. The given spacing '200' has a size of 16px and is used for example for the cards padding. The actual layout size and the css custom property fallback are set to 24px, but still looks like this in figmas dev mode:
padding: var(--spacing-200, 24px);
So I ignored the overall layout size and stayed with the given design system with a padding of 16px. If you want to have a padding of 24px, please rebuild the challenged figma file with --spacing-300: 24px
Mobile: I also ignored the image been cut on the edges. In a real world, I would consider to take a picture element with a second image on mobile.
But on this, being a challenge I would consider myself to have failed.
What specific areas of your project would you like help with?I should take a look at other solutions regarding the cut image on mobile
