fix: update GIPHY embed structure for better responsiveness

[ifhammohamed]

This pull request includes a change to the blog/dec-quiet-period-24.md file to improve the responsiveness of an embedded Giphy iframe.

Improvements to embedded content:

• blog/dec-quiet-period-24.md: Replaced the static iframe with a responsive div container and adjusted the iframe styles to ensure the embedded Giphy content scales appropriately on different screen sizes.

Issue of this pr -
[#722]

1. responsive error -
   

2. updated responsive page for mobile device -
   

3. other media size for the responsive -
   

[ifhammohamed]

Hi @VerteDinde!

Thank you for your point out #446 (comment)

and now i have created pr for the gif responsive issue, can you check it out 😊.

[dsanders11]

@ifhammohamed, how did you determine the styles to change here? I think we should just grab the embed code directly from GIPHY with "Responsiveness: On" checked, which produces slightly different output than you have here.

[ifhammohamed]

@ifhammohamed, how did you determine the styles to change here? I think we should just grab the embed code directly from GIPHY with "Responsiveness: On" checked, which produces slightly different output than you have here.

@dsanders11 I've made the GIPHY responsive by with "Responsiveness: On" checked, Thank you the suggestion

[dsanders11]

Is there a compelling reason to use {{ ... }}? I'd prefer using the exact output from GIPHY.

[erickzhao]

@dsanders11 as a response, you can't use string style prop in JSX without getting the following react error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

[erickzhao]

LGTM