Update Services CTA pattern with tokens

[colorful-tones]

Description

Addresses #164

Figma Component link

These pattern updates utilize the recently introduced spacing presets.

Clarifying deviations from design:

• There is no mobile design and it is hard to know what or where any side margins may exist, but it currently looks undesirable (see small viewport screenshot below)
• The image in the pattern (tt4_services_1.png) had a fixed width of 679px. Therefore, if the screen size is large then it will not fill the entire column and is currently left-aligned. I re-exported the image as a .jpg and ran through Compressor.io. Now it fits the column better for larger screens.

Testing Instructions

1. Activate Twenty Twenty-Four theme
2. Create a page/post and add the 'Services - Call to Action' pattern, and Save
3. Preview results on published page/post

[richtabor]

Here's how I did it: #204

[MaggieCabrera]

I think this change is interesting to consider for a future refactor of the patterns @richtabor

[richtabor]

Yea I'm a bit torn. I kinda think the default radius should be what all the images in the theme are; so you don't have to apply it to others. But I think it could go either way.

[MaggieCabrera]

It's a few steps to revert the change when you don't need it. We have a pattern with logos that looks bad if we do this and forget to undo the radius

[richtabor]

It's a few steps to revert the change when you don't need it. We have a pattern with logos that looks bad if we do this and forget to undo the radius

It could be done at the pattern level though; to remove border-radius. Instead of having to apply border radius for every image added. @colorful-tones do you mind moving the variations.rounded.border.radius change to a separate PR for testing. I'd love to try it out and see if that works (to then add rounded variation to most images within the patterns).

[colorful-tones]

I'm just working off of Figma designs is all.

[richtabor]

Right, but we apply a deeper level of integration/consistency with the block editor :)

[colorful-tones]

@colorful-tones do you mind moving the variations.rounded.border.radius change to a separate PR for testing.

I'd love to try it out and see if that works (to then add rounded variation to most images within the patterns).

Oh it works @richtabor . Did we just think I dropped it in for fun? 🙃

[colorful-tones]

It is funny how we were both working on the same thing at the same time.

Here is an interesting comparison of two different variations of interpreting provided Figma designs from seasoned builders. 😆

@richtabor @MaggieCabrera

[richtabor]

Closing as it’s been tidied up in #204