Implement the new spotlight layout

src/grid/SpotlightLayout.module.css

@@ -0,0 +1,89 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.fixed,
+.scrolling {
+  margin-inline: var(--inline-content-inset);
+  display: grid;
+  --grid-slot-width: 180px;
+  --grid-gap: 20px;
+  grid-template-columns: 1fr calc(
+      var(--grid-columns) * var(--grid-slot-width) + (var(--grid-columns) - 1) *
+        var(--grid-gap)
+    );
+  grid-template-rows: minmax(1fr, auto);
+  gap: 30px;
+}
+
+.scrolling {
+  block-size: 100%;
+}
+
+.spotlight {
+  container: spotlight / size;
+  display: grid;
+  place-items: center;
+}
+
+/* CSS makes us put a condition here, even though all we want to do is
+unconditionally select the container so we can use cq units */
+@container spotlight (width > 0) {
+  .spotlight > .slot {
+    inline-size: min(100cqi, 100cqb * (17 / 9));
+    block-size: min(100cqb, 100cqi / (4 / 3));
+  }
+}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--grid-gap);
+  justify-content: center;
+  align-content: center;
+}
+
+.grid > .slot {
+  inline-size: var(--grid-slot-width);
+  block-size: 135px;
+}
+
+@media (max-width: 600px) {
+  .fixed,
+  .scrolling {
+    margin-inline: 0;
+    display: block;
+  }
+
+  .spotlight {
+    inline-size: 100%;
+    aspect-ratio: 16 / 9;
+    margin-block-end: var(--cpd-space-4x);
+  }
+
+  .grid {
+    margin-inline: var(--inline-content-inset);
+    align-content: start;
+  }
+
+  .grid > .slot {
+    --grid-columns: 2;
+    --grid-slot-width: calc(
+      (100% - (var(--grid-columns) - 1) * var(--grid-gap)) / var(--grid-columns)
+    );
+    block-size: unset;
+    aspect-ratio: 4 / 3;
+  }
+}