Portfolio Footer: Adjustments

[beafialho]

When I pick the Portfolio footer, it looks quite different from the intended design.

There are a number of things that don't look accurate:

• The content is bumping on the edges
• Text is not in English
• Separator does not align with the content
• Message icon is too big
• There's too much vertical spacing between items in the "Contact Me" and the "Follow Me" sections
• Bits of text that should be in grey are black
• "Keep up, get in touch" should use the Cardo font and use the XXL preset

Here are the changes that should be made in order for this footer to look like this:

• Group the group the pattern is in, it'll be wide width automatically
• Replace text in Italian for text in English
• Remove the separator and add a 1px stroke to the columns block
• Add padding to the top of columns block (preset level 3)
• Add block spacing (preset level 4) to the columns block for better result in smaller screens
• Set message icon to 70px height
• Remove block spacing in the Contact and Follow stack blocks
• Set the bits of text that should be in grey manually
• Set "Keep up, get in touch" to use the Cardo font and use the XXL preset

Here's the markup, if that's useful.

<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:image {"width":"auto","height":"70px","sizeSlug":"full","linkDestination":"none","className":"is-resized"} -->
<figure class="wp-block-image size-full is-resized"><img src="http://localhost:8881/wp-content/themes/twentytwentyfour/assets/images/icon-message.webp" alt="" style="width:auto;height:70px"/></figure>
<!-- /wp:image -->

<!-- wp:columns {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30"},"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|10"}},"border":{"top":{"color":"var:preset|color|contrast","width":"1px"}}}} -->
<div class="wp-block-columns" style="border-top-color:var(--wp--preset--color--contrast);border-top-width:1px;padding-top:var(--wp--preset--spacing--30)"><!-- wp:column {"width":"65%"} -->
<div class="wp-block-column" style="flex-basis:65%"><!-- wp:paragraph {"fontSize":"xx-large","fontFamily":"heading"} -->
<p class="has-heading-font-family has-xx-large-font-size">Keep up, get in touch.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"30%"} -->
<div class="wp-block-column" style="flex-basis:30%"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Contact Me</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-2"}}}},"textColor":"contrast-2"} -->
<p class="has-contrast-2-color has-text-color has-link-color"><a href="#">example@wordpress.org</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"30%"} -->
<div class="wp-block-column" style="flex-basis:30%"><!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>Follow Me</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-2"}}}},"textColor":"contrast-2"} -->
<p class="has-contrast-2-color has-text-color has-link-color"><a href="#">Instagram</a> / <a href="#">Facebook</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"var:preset|spacing|50"} -->
<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast-2"}}}},"textColor":"contrast-2","fontSize":"small"} -->
<p class="has-contrast-2-color has-text-color has-link-color has-small-font-size">Twenty Twenty-Four</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast-2","fontSize":"small"} -->
<p class="has-contrast-2-color has-text-color has-link-color has-small-font-size">Designed with <a rel="nofollow" href="https://wordpress.org">WordPress</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

[beafialho]

This seemed to be a bug, so what I was seeing wasn't accurate. I'm closing this.