feat(card): better style on large screen

scss/main.scss

@@ -74,6 +74,7 @@ main {
   max-height: 75vh;
   overflow: auto;
   scrollbar-width: thin;
+  max-width: 800px;
   & h1, h2, h3 {
     margin: 0;
   }
@@ -135,7 +136,11 @@ h4 {
   align-items: center;
   gap: 2rem;
   margin-bottom: 2rem;
+  margin-left: calc(33% - 135px);
   color: var(--text-color);
+  @media only screen and (max-width: vars.$bp-large) {
+    margin-left: 0; 
+  }
   @media only screen and (max-width: vars.$bp-little) {
     flex-direction: column;
   }
@@ -145,9 +150,12 @@ h4 {
     //width: 100%;
     margin-right: 1rem;
     flex-direction: column;
-    align-items: center;
+    align-items: left;
     justify-content: center;
     gap: 0.5rem;
+    @media only screen and (max-width: vars.$bp-large) {
+      align-items: center;
+    }
     @media only screen and (max-width: vars.$bp-little) {
       margin-right: 0;
       text-align: center;
@@ -225,4 +233,6 @@ h4 {
 
 .credits-legal {
   width: 70%;
+  padding: 0 2rem 1rem 2rem;
+  border-radius: 32px;
 }

scss/vars.scss

@@ -1,2 +1,3 @@
+$bp-large: 1350px;
 $bp-mid: 1000px;
-$bp-little: 650px;
+$bp-little: 650px;

templates/page/legal.gohtml

@@ -1,5 +1,5 @@
 {{define "body"}}
-    <div class="credits-legal">
+    <div class="credits-legal" style="{{ .GetBackground }}">
         <h2>Legal information</h2>
         <p>
             Other legal information are available <a href="{{ .Legal.LegalInformationLink }}" target="_blank">here</a>.
@@ -16,4 +16,4 @@
         <h3>Font credits</h3>
         <p>{{ .Legal.FontSource }}</p>
     </div>
-{{end}}
+{{end}}