Concept: flags on SE and LT squares

This is kind of cool but maybe too busy, even with the flag taking up
only half the square.

src/components/Cell.css

@@ -16,3 +16,31 @@
   background-image: linear-gradient(135deg, rgba(255,206,0, .8), rgba(255,206,0, .8) 12px, transparent 15px, transparent);
 }
 
+.Cell.flag {
+  position: relative;
+}
+
+.Cell.flag::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+.Cell.flag.stamped::before {
+  background-image: none;
+}
+
+.Cell.flag-lt::before {
+  background-image: url(/bingo-frontend/src/images/lt.svg);
+}
+
+.Cell.flag-se::before {
+  background-image: url(/bingo-frontend/src/images/se.svg);
+}

src/data/teamLindy.json

@@ -165,9 +165,12 @@
       "title": "Who is that?",
       "words": [
         { "word": "Mixed-nationality team" },
-        { "word": "All-Swedish Team" },
-        { "word": "A Swede not in Sweden" },
-        { "word": "A Lithuanian not in Lithuania" },
+        { "word": "All-Swedish Team", "cssClasses": ["flag", "flag-se"] },
+        { "word": "A Swede not in Sweden", "cssClasses": ["flag", "flag-se"] },
+        {
+          "word": "A Lithuanian not in Lithuania",
+          "cssClasses": ["flag", "flag-lt"]
+        },
         {
           "word": "Somebody you have personally taken class from",
           "description": "or that you will take class from at this event!"