style.css

html, body {
	margin: 0;
	padding: 0;
}

div {
	display: block;
	text-align: center;
}

input {
	display: inline-block;
	text-align: center;
	margin: 8px 32px 8px 32px;
	font-size: 0.8em;
}

input[type=text] {
	width: 50%;
	font-size: 1.5em;
}

input[type=number] {
	width: 5em;
	margin-left: 0;
}

input[type=checkbox] {
	width: 2em;
	margin-left: 0;
}

span {
	margin: 0 0 0 32px;
}

#dropzone {
	width: 100vw;
	height: 100vh;
	background-color: transparent;
	border: none;
	margin: 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

#cont {
	display: grid;
	--vert-margin: 4px;
	--oriz-margin: 10px;
	--gaps: calc(var(--cols) - 1);
	--total-gap: calc(var(--oriz-margin) * var(--gaps));
	grid-template-columns: repeat( var(--cols), calc(calc(100% - var(--total-gap)) / var(--cols)));
	column-gap: var(--oriz-margin);
	row-gap: var(--vert-margin);
}

.img-container {
	display: flex;
	position: relative;
}

.squares {
	aspect-ratio: 1 / 1;
}

.img-container>img {
	margin: auto;
	max-width: 100%;
	position: relative;
	transform: none;
}

.img-container.squares>img {
	transform: rotate(var(--rot));
}

p {
	font-size: 0.6em;
}

.rotate {
	position: absolute;
	top: 2px;
	right: 2px;
	opacity: 0;
}

#cont>div:hover .img-container.squares .rotate {
	opacity: 1;
}

.rotate img {
	width: 1em;
	aspect-ratio: 1;
}

@media print {
	body {
		page-break-inside: auto;	
	}

	#cont>div {
		page-break-inside: avoid;
	}

	.commands, .rotate, .invisible {
		display: none;
	}
}