style: 💄 simplify coloured banner using negative margin values (#56)

## Description

I'm in the proces of making the landing page for Sprout and I was
(re-)annoyed with how complex the css for creating a coloured banner
ended up, when I created the landing page for Seedcase.
So I looked into it again and found a simpler and (in my opinion) better
solution 🥳

Note: I will create a PR using this in the `seedcase-website` repo,
since the landing page will be broken by removing `landing-page-banner`
and `landing-page-banner-content`.

## Reviewer Focus

<!-- Please delete as appropriate: -->
This PR needs a quick review.

Focus on CHANGES.

## Checklist

- [X] Rendered website locally

_extensions/seedcase-theme/theme.scss

@@ -54,23 +54,12 @@ figcaption {
   padding: 10px 0px 0px 0px !important;
 }
 
-/* TODO: take inspiration from Quarto-web to make this cleaner */
-.landing-page-banner {
-  background-color: rgba($secondary, 0.3);
-  padding: 10px;
-  position: relative;
-  left: 50%;
-  right: 50%;
-  width: 100vw;
-  margin-left: -50vw;
-  margin-right: -50vw;
-}
-
-.landing-page-banner-content {
-  max-width: 800px;
-  margin: 0 auto;
-  box-sizing: border-box;
-  margin-bottom: 40px;
+.full-width-banner {
+  /* negative margin trick from https://css-tricks.com/full-browser-width-bars/#aa-using-negative-margin */
+  margin: 0 -9999rem;
+  /* add back negative margin value */
+  padding: 0.25rem 9999rem;
+  background: rgba($secondary, 0.3);
 }
 
 .landing-page-card {