fix: update grid classes for responsive design

[deleonio]

This pull request focuses on improving the responsiveness and layout of components in the React sample application. The most important changes include adding margins for better spacing, introducing responsive grid classes, and refining the layout for various screen sizes.

Layout and Responsiveness Improvements:

• SampleDescription.tsx: Added a bottom margin (mb-2) to the description container for improved spacing between elements.
• handout/basic.tsx: Updated the grid layout in the HandoutBasic component:
  • Made the grid columns responsive by adding md:grid-cols-[auto_1fr_1fr] for medium screens.
  • Adjusted the form's grid layout to use sm:grid-cols-2 for small screens and md:grid-cols-3 for medium screens, enhancing responsiveness.

The A11y and PO reviews will only take place after all other DoD steps have been completed by the Developer:

• Meaningful pull request title for the release notes
• Pull request is linked to an issue and all changes relate to the issue
• Tests to protect this code implemented (if applicable)
• Manual test performed successfully (if applicable)
• Documentation or migration has been updated (if applicable)

[github-actions]

Netlify Draft Deployment
URL: https://681782b75e64689c74ad5dba--kolibri-public-ui.netlify.app
Logs: https://app.netlify.com/sites/kolibri-public-ui/deploys/681782b75e64689c74ad5dba