item details window changes

src/TestPanel.js

@@ -518,12 +518,15 @@ ELEMENT<br />
 EQUIP CONDITIONS<br />
 NOT TRADABLE
 </div>
-<div className="itemPotential">POTENTIAL</div><div className="itemPreset">PRESET</div>
+<div className="itemAbility"><div className="itemPotential"><span className="pot">Soulspring Unit Lv.3</span></div><div className="itemFixa"><span className="fixa">Fixa Attack Lv.3</span></div></div>
 <div className="itemDetailsAugment">
-AUGMENT 
+<span className="aug">Augment</span>
-
+<div className="itemDetailsAugmentWrapper">
-
+<div>test</div>
-
+<div>test</div>
+<div>test</div>
+<div>test</div>
+</div>
 </div>
 </div>
 

src/style.css

@@ -1494,7 +1494,7 @@ p.adminNav hr {
 	display: grid;
 	grid-template-areas:
 	"icon properties"
-	"potential preset"
+	"ability ability"
 	"augment augment";
 	grid-template-columns: 128px minmax(0,1fr);
 	grid-template-rows: auto;
@@ -1506,16 +1506,35 @@ p.adminNav hr {
 	grid-area: icon;
 }
 .itemDetailsProperties {
+	margin: 0 0 0 10px;
 	grid-area: properties;
 }
 .itemDetailsAugment {
+	margin: 15px 0 0 0;
 	grid-area: augment;
 }
+.itemDetailsAugmentWrapper {
+	margin: 10px 0 0 0;
+	display: grid;
+	grid-template-columns: repeat(auto-fit,minmax(150px,200px));
+	gap: 10px 30px;
+}
+.itemDetailsAugmentWrapper > div {
+	background-color:rgba(0,0,0,0.33);
+	padding: 2px 10px;
+	border-radius: 0 10px 0 0;
+}
+.itemAbility {
+	grid-area: ability;
+	display: grid;
+	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
+	margin: 20px 0 0 0;
+}
 .itemPotential {
-	grid-area: potential;
+	text-align: left;
 }
-.itemPreset {
+.itemFixa {
-	grid-area: preset;
+	text-align: left;
 }
 .itemDetailsIcon img {
 	background: radial-gradient(rgb(196,196,196),rgb(128,128,128));