@media (min-width: 576px) {
	.middle .middle-info {
		width: 30%;
	}
	.middle .line {
		width: 75%;
	}
	.btn-sign {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		width: 80%;
	}
	.output-info {
		width: 80%;
	}
}

@media (max-width: 768px) {
	.input-info form label {
		font-size: .8em;
	}
	.middle .middle-info {
		width: 100%;
		font-size: 0.8em;
	}
	.middle .line {
		width: 100%;
	}
	.btn-sign {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 4px;
	}
}

@media (min-width: 992px) {
	.btn-sign {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		width: 60%;
	}
	.middle .middle-info {
		width: 25%;
	}
	.middle .line {
		width: 25%;
	}
	.output-info {
		width: 55%;
	}
}

@media (min-width: 1200px) {
	.middle .middle-info {
		width: 20%;
	}
	.middle .line {
		width: 35%;
	}
	.btn-sign {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		width: 60%;
	}
	.output-info {
		width: 60%;
	}
}

@media (min-width: 1400px) {
	.middle .middle-info {
		width: 20%;
	}
	.middle .line {
		width: 35%;
	}
	.btn-sign {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		width: 60%;
	}
	.output-info {
		width: 60%;
	}
}