Update dynamic styles

index.html

@@ -259,11 +259,7 @@
 		<div id="buttons-container">
 			<button type="button" onclick="addRow()">New tier</button>
 			<button type="button" onclick="selectImages()">Select images</button>
-			<input
-				type="checkbox"
-				id="square-img"
-				onchange="dynamicStyle(this, '.image { height: 80px; width: 80px; }')"
-			/>
+			<input type="checkbox" id="square-img" onchange="dynamicStyle(this)" />
 			<label for="square-img">Square images</label>
 		</div>
 

script.js

@@ -219,10 +219,12 @@ function initializeDragula() {
 		});
 }
 
-function dynamicStyle(checkbox, css) {
+function dynamicStyle(checkbox) {
+	const importText = `@import "./styles/${checkbox.id}.css";`;
+
 	if (checkbox.checked) {
-		dynamicStyles.innerHTML += css;
+		dynamicStyles.innerHTML += importText;
 	} else {
-		dynamicStyles.innerHTML = dynamicStyles.innerHTML.replace(css, "");
+		dynamicStyles.innerHTML = dynamicStyles.innerHTML.replace(importText, "");
 	}
 }

styles/square-img.css

@@ -0,0 +1,4 @@
+.image {
+	width: 80px;
+	height: 80px;
+}