split style

index.css

@@ -0,0 +1,120 @@
+ul {
+  padding-left: 0;
+  margin: 0;
+}
+
+li {
+  flex: 1;
+  list-style: none;
+  text-align: center;
+  padding: 0.5rem 1rem;
+}
+
+.focusable {
+  background-color: var(--background-color);
+}
+
+.focusable.no-focus {
+  background-color: var(--background-color-no-focus);
+}
+
+.text-hide {
+  color: var(--background-color);
+}
+
+.customer-satisfaction-roof {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  text-align: center;
+  border-radius: 5rem 5rem 0.5rem 0.5rem;
+}
+
+.customer-satisfaction-roof h2,
+.customer-satisfaction-roof p {
+  margin: 0;
+  padding: 0 0.5rem 0.5rem;
+  border-radius: 0;
+}
+
+.levers {
+  margin: 0.5rem 0;
+}
+
+.levers ul {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 0;
+  row-gap: 0.5rem;
+  gap: 0.5rem;
+}
+
+.people-improvement {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+.people-improvement svg {
+  flex: 1;
+  min-width: max(15vw, 200px);
+  max-width: 30vw;
+}
+
+.pilars {
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+}
+
+.pilars h3 {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 1rem 2rem;
+  width: calc(100% - (2rem * 2));
+  text-align: center;
+}
+
+.just-in-time-pilar,
+.jidoka-pilar {
+  display: flex;
+  flex: 2;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.pilars ul {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ground {
+  display: flex;
+  flex-direction: column;
+  margin: 0.5rem 0;
+  gap: 1rem;
+}
+
+.improvement ul,
+.stability ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+
+/* Wide screen */
+@media only screen and (min-width: 750px) {
+  .pilars {
+    flex-direction: row;
+  }
+}