Add damage management and DR for monsters also

styles/monster.less

@@ -25,7 +25,6 @@
     gap: 10px;
     flex: 1;
 
-
     .monster-hp {
       display: flex;
       gap: 4px;
@@ -46,7 +45,7 @@
         min-width: 2.2rem;
         max-width: 2.2rem;
         margin-left: 4px;
-        font-size: calc(var(--font-size-standard) * 1.0);
+        font-size: calc(var(--font-size-standard) * 1);
       }
       .character-hp-max {
         clear: both;
@@ -58,7 +57,7 @@
         input {
           width: 3.2rem;
           text-align: center;
-          font-size: calc(var(--font-size-standard) * 1.0);
+          font-size: calc(var(--font-size-standard) * 1);
         }
       }
     }
@@ -121,9 +120,11 @@
     flex: 1;
 
     .monster-skill {
-      display: flex;
+      display: grid;
+      grid-template-columns: repeat(3, auto 2.5rem);
+      gap: 0.5rem;
       align-items: center;
-      margin-right: 0.5rem;
+
       .rollable:hover,
       .rollable:focus {
         text-shadow: 0 0 8px var(--color-shadow-primary);
@@ -134,12 +135,9 @@
         max-width: 2.5rem;
       }
       .name {
-        flex: 1;
-        min-width: 3.2rem;
         margin-left: 4px;
       }
       .form-group {
-        flex: 1;
         padding-left: 4px;
         .form-fields {
           flex: none;
@@ -157,8 +155,9 @@
 
     .monster-movement {
       display: flex;
-      align-items: center;
-      margin-right: 0.5rem;
+      flex-direction: column;
+      gap: 4px;
+
       .rollable:hover,
       .rollable:focus {
         text-shadow: 0 0 8px var(--color-shadow-primary);
@@ -252,7 +251,7 @@
   }
 }
 
-.tab.monster-skills .main-div{
+.tab.monster-skills .main-div {
   display: grid;
   grid-template-columns: 1fr;
   legend {