feat: lower presets

added clean lower with no styling and minimal animation

client/src/features/viewers/production/lower/LowerLines.module.css

@@ -0,0 +1,79 @@
+.lowerThird {
+  margin: 0;
+  box-sizing: border-box; /* reset */
+  overflow: hidden;
+  width: 100%; /* restrict the page width to viewport */
+  height: 100%;
+
+  color: #fffffa;
+  font-size: 4vh;
+}
+
+.lowerContainer {
+  position: absolute;
+  top: 75vh;
+  background-color: #00000033;
+
+  padding: 1vh 1vw 1vh 0;
+  display: flex;
+  flex-direction: column;
+  width: 45vw;
+  border-radius: 0 1vh 1vh 0;
+}
+
+.messageContainer {
+  position: absolute;
+  bottom: 2vh;
+  width: 100%;
+  text-align: center;
+}
+
+.titleContainer,
+.subtitleContainer {
+  display: grid;
+  grid-template-columns: auto max-content;
+  grid-template-areas: 'decor text';
+  align-items: center;
+  position: relative;
+}
+
+.titleContainer,
+.subtitleContainer {
+  margin-bottom: 1vh;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.titleDecor,
+.subDecor {
+  grid-area: decor;
+  height: 4vh;
+  background-color: #ff6969;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 105, 105, 1) 0%,
+    rgba(255, 132, 132, 1) 100%
+  );
+}
+
+.titleDecor,
+.subDecor {
+  width: 100%;
+}
+
+.title,
+.subtitle {
+  grid-area: text;
+  padding-left: 1vw;
+  justify-self: right;
+  width: fit-content;
+}
+
+.messageContainer {
+  background-color: #00000033;
+}
+
+.message {
+  font-size: 3.5vh;
+}