Fix formatting of Course List block on course archive page

[donnapep]

Resolves #7144.

Proposed Changes

Before we had the Course List block, we enabled people to use a grid layout for the course archive page by using the sensei_course_loop_number_of_columns filter. However, the CSS used for this wasn't specific enough and ended up leaking into other pages, namely those containing the Course List block.

Note that this is only a problem if the page containing the Course List block is set as the Course Archive Page in the settings. If not, it works just fine.

This PR wraps the columns CSS inside the .course-container element, so that it doesn't affect other pages.

Testing Instructions

1. Create a page containing the Course List block. Ensure you choose a grid pattern.
2. Set the page as the Course Archive Page in Sensei settings.
3. View the page on the frontend and ensure it's not squished.
4. Switch to the Astra theme (just because the legacy grid works reasonably well on Astra).
5. Create an empty page and set it as the Course Archive Page in Sensei settings.
6. Hook into the sensei_course_loop_number_of_columns filter and set it to 3 (or just change it in the code).
7. View the course archive page. It should have a 3 column layout (although it might not look that great).

Pre-Merge Checklist

• PR title and description contain sufficient detail and accurately describe the changes
• Acceptance criteria is met
• Decisions are publicly documented
• Adheres to coding standards (PHP, JavaScript, CSS, HTML)
• All strings are translatable (without concatenation, handles plurals)
• Follows our naming conventions (P6rkRX-4oA-p2)
• Hooks (p6rkRX-1uS-p2) and functions are documented
• New UIs are responsive and use a mobile-first approach
• New UIs match the designs
• Different user privileges (admin, teacher, subscriber) are tested as appropriate
• Code is tested on the minimum supported PHP and WordPress versions
• User interface changes have been tested on the latest versions of Chrome, Firefox and Safari
• "Needs Documentation" label is added if this change requires updates to documentation
• Known issues are created as new GitHub issues

[codecov]

Codecov Report

Merging #7180 (d430785) into trunk (80a5cdd) will not change coverage.
Report is 1 commits behind head on trunk.
The diff coverage is n/a.

@@            Coverage Diff            @@
##              trunk    #7180   +/-   ##
=========================================
  Coverage     49.85%   49.85%           
  Complexity    10651    10651           
=========================================
  Files           586      586           
  Lines         45049    45049           
  Branches        402      402           
=========================================
  Hits          22458    22458           
  Misses        22264    22264           
  Partials        327      327           

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6164b12...d430785. Read the comment docs.

[Imran92]

Fixes the squishing as expected and the legacy course grid still works as it used to do 🚀