My little printer-friendly CSS

Here is my little “Printer friendly CSS” that I add to each and every page using Simple Custom CSS and JS

/* override styles when printing */
@media print {
	@page {
		margin: 2cm; 
		@top-center {
			font-family: sans-serif;
			font-weight: bold;
			font-size: 2em;
			content: counter(page);
		}
	}
	/* target the first page only */
	@page :first { margin-top: 6cm; }
	/* target left (even-numbered) pages only */
	@page :left { margin-right: 2cm; }
	/* target right (odd-numbered) pages only */
	@page :right { margin-left: 2cm; }
	
	
	body {
		font-size: 16pt;
		line-height: 1.2;
		/*margin: 1cm;*/
		color: #000;
		background-color: #fff;
		border: 1mm black;
	}
	/* header, */
	footer, aside, nav, form, iframe, .menu, .hero, .adslot, .header-bottom, .site-header, .header-middle {
		display: none;
	}
	
	h2.entry-title {
		font-size: 32pt;
	}
	
	/* page breaks before main header */
	h1 {
		break-before: page; 
	}
	/* don't break tables and pictures*/ 
	table, img, svg {
		break-inside: avoid;
	}
	
	/* avoid too small text */
	body,p {
		font-size: 16pt;
		line-height: 1.2;
	}
	article {
		width: 100%;
		/* no columns please 
		** column-width: 19cm;
		** column-gap: 0.5cm;
		*/
	}
	
	/* no background images */
	* {
		background-image: none !important;
	}
	
	 /* styling links */
	a {
		font-size: 80%;
	}
	a::after {
		content: " (" attr(href) ")";
		overflow-wrap: break-word;
	}
	
	
	/* don't display unimportang pictures */
	/* img, svg {
	**	display: none !important;
	** }
	*/
	
	/* make picture big */
	img.print, svg.print {
		display: block;
		max-width: 100%;
	}
	
	/* don't show comments */
	#comments {
		display: none;
	}
	
	/* don't show tables of contents */
	.wp-block-uagb-table-of-contents, .advgb-toc {
		display: none;
	}
}

I use it with News-box theme but it should work fine with any other “pretty modern” theme.

I started reading How to Create Printer-friendly Pages with CSS (local copy)