:root {
                --width4blocs_w: 60px;
                --width4blocs_h: calc(var(--width4blocs_w) + 20px);
                --width4blocs_t: 3px;
                --width4blocs_v: initial;
                --width4blocs_font: 18px;

                --width4blocs_xs_px: 0px;
                --width4blocs_sm_px: 576px;
                --width4blocs_md_px: 768px;
                --width4blocs_lg_px: 992px;
                --width4blocs_xl_px: 1200px;
                --width4blocs_xxl_px: 1400px;
                
                --width4blocs_xs: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 200"><defs><style> .cls-1 { fill: none; } .cls-2 { fill: %23d4d4d4; } .cls-3 { fill: %23c9d0db; } .cls-4 { fill: %23464648; } </style></defs><g id="Hintergrund"><rect class="cls-1" y="-.16" width="272" height="200"/></g><g id="devices"><g id="iPhone_hoch" data-name="iPhone hoch"><rect class="cls-4" x="105.98" y="45.44" width="60.51" height="108.18" rx="9.17" ry="9.17"/><rect class="cls-3" x="111.94" y="55.07" width="49.51" height="84.35"/><path class="cls-2" d="M142.4,49.26c0,.43-.34.77-.77.77h-10.78c-.43,0-.77-.34-.77-.77h0c0-.43.34-.77.77-.77h10.78c.43,0,.77.34.77.77h0Z"/><path class="cls-2" d="M140.95,146.14c0,1.33-1.08,2.41-2.41,2.41h-4.61c-1.33,0-2.41-1.08-2.41-2.41h0c0-1.33,1.08-2.41,2.41-2.41h4.61c1.33,0,2.41,1.08,2.41,2.41h0Z"/></g></g></svg>');
                --width4blocs_sm: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 200"><defs><style> .cls-1 { fill: none; } .cls-2 { fill: %23d4d4d4; } .cls-3 { fill: %23c9d0db; } .cls-4 { fill: %23464648; } </style></defs><g id="Hintergrund"><rect class="cls-1" y="-.16" width="272" height="200"/></g><g id="devices"><g id="iPad_hoch" data-name="iPad hoch"><rect class="cls-4" x="84.69" y="32.31" width="101.31" height="135.69" rx="9.17" ry="9.17"/><rect class="cls-3" x="88.59" y="40.57" width="93.52" height="114.14"/><path class="cls-2" d="M140.06,160.1c0,1.33-1.08,2.41-2.41,2.41h-4.61c-1.33,0-2.41-1.08-2.41-2.41h0c0-1.33,1.08-2.41,2.41-2.41h4.61c1.33,0,2.41,1.08,2.41,2.41h0Z"/><path class="cls-2" d="M136.69,36.55c0,.74-.6,1.34-1.34,1.34s-1.34-.6-1.34-1.34.6-1.34,1.34-1.34,1.34.6,1.34,1.34Z"/></g></g></svg>');
                --width4blocs_md: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 200"><defs><style> .cls-1 { fill: none; } .cls-2 { fill: %23d4d4d4; } .cls-3 { fill: %23c9c9c9; } .cls-4 { fill: %23c9d0db; } .cls-5 { fill: %23464648; } </style></defs><g id="Hintergrund"><rect class="cls-1" y="-.16" width="272" height="200"/></g><g id="devices"><g id="macbook"><path class="cls-5" d="M232.79,157.1V48.42c0-6.01-4.87-10.88-10.88-10.88H50.03c-6.01,0-10.88,4.87-10.88,10.88v108.68h193.64Z"/><rect class="cls-4" x="46.23" y="44.07" width="180.58" height="103.88"/><path class="cls-3" d="M23.9,155.13v2.67c0,3,5.45,5.44,12.17,5.44h199.8c6.72,0,12.17-2.44,12.17-5.44v-2.67H23.9Z"/><path class="cls-2" d="M136.97,40.55c0,.55-.45,1-1,1s-1-.45-1-1,.45-1,1-1,1,.45,1,1Z"/></g></g></svg>');
                --width4blocs_lg: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 200"><defs><style> .cls-1 { fill: none; } .cls-2 { fill: %23d4d4d4; } .cls-3 { fill: %23c9d0db; } .cls-4 { fill: %23464648; } .cls-5 { fill: %23999; } </style></defs><g id="Hintergrund"><rect class="cls-1" y="-.16" width="272" height="200"/></g><g id="devices"><g id="imac"><rect class="cls-5" x="103.26" y="140.2" width="65.76" height="40.52"/><path class="cls-4" d="M43.36,15.13h185.55c6.48,0,11.74,5.26,11.74,11.74v120.96c0,6.48-5.26,11.74-11.74,11.74H43.36c-6.48,0-11.74-5.26-11.74-11.74V26.88c0-6.48,5.26-11.74,11.74-11.74Z"/><rect class="cls-3" x="39.25" y="22.18" width="194.94" height="112.14"/><path class="cls-2" d="M31.62,142.08v5.76c0,6.49,5.26,11.74,11.74,11.74h185.55c6.49,0,11.74-5.26,11.74-11.74v-5.76H31.62Z"/><rect class="cls-4" x="99.13" y="178.1" width="74.01" height="6.14"/></g></g></svg>');
                --width4blocs_xl: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 200"><defs><style> .cls-1 { fill: none; } .cls-2 { fill: %23d4d4d4; } .cls-3 { fill: %23c9d0db; } .cls-4 { fill: %23464648; } .cls-5 { fill: %23999; } </style></defs><g id="Hintergrund"><rect class="cls-1" y="-.16" width="272" height="200"/></g><g id="devices"><g id="imac"><rect class="cls-5" x="103.26" y="140.2" width="65.76" height="40.52"/><path class="cls-4" d="M43.36,15.13h185.55c6.48,0,11.74,5.26,11.74,11.74v120.96c0,6.48-5.26,11.74-11.74,11.74H43.36c-6.48,0-11.74-5.26-11.74-11.74V26.88c0-6.48,5.26-11.74,11.74-11.74Z"/><rect class="cls-3" x="39.25" y="22.18" width="194.94" height="112.14"/><path class="cls-2" d="M31.62,142.08v5.76c0,6.49,5.26,11.74,11.74,11.74h185.55c6.49,0,11.74-5.26,11.74-11.74v-5.76H31.62Z"/><rect class="cls-4" x="99.13" y="178.1" width="74.01" height="6.14"/></g></g></svg>');
                --width4blocs_xxl:url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 200"><defs><style> .cls-1 { fill: none; } .cls-2 { fill: %23d4d4d4; } .cls-3 { fill: %23c9d0db; } .cls-4 { fill: %23464648; } .cls-5 { fill: %23999; } </style></defs><g id="Hintergrund"><rect class="cls-1" y="-.16" width="272" height="200"/></g><g id="devices"><g id="imac"><rect class="cls-5" x="103.26" y="140.2" width="65.76" height="40.52"/><path class="cls-4" d="M43.36,15.13h185.55c6.48,0,11.74,5.26,11.74,11.74v120.96c0,6.48-5.26,11.74-11.74,11.74H43.36c-6.48,0-11.74-5.26-11.74-11.74V26.88c0-6.48,5.26-11.74,11.74-11.74Z"/><rect class="cls-3" x="39.25" y="22.18" width="194.94" height="112.14"/><path class="cls-2" d="M31.62,142.08v5.76c0,6.49,5.26,11.74,11.74,11.74h185.55c6.49,0,11.74-5.26,11.74-11.74v-5.76H31.62Z"/><rect class="cls-4" x="99.13" y="178.1" width="74.01" height="6.14"/></g></g></svg>');
            }

	body::after {   
        content: '..';
		position: fixed;
        display: var(--width4blocs_v);
		top: var(--width4blocs_t);
		left:var(--width4blocs_t);
/*		background: white;
		opacity: 0.5;
*/		padding: 3px 3px;
		border-radius: 5px;
		font-family: monospace;
		font-size: var(--width4blocs_font);
		font-weight: bold;
		text-align: center;
		z-index: 9999;
		pointer-events: none;
		border: 2px solid grey;
		background-size: var(--width4blocs_w);
		background-repeat: no-repeat;
		background-position: bottom center;
		background-color: rgba(255, 255, 255, 0.9);
	}

	/*
	//	Blocs v6.3 , 4 Breakpoints
	//
	//	XS	:  000 -  575
	//	SM  :  576 -  767
	//	MD  :  768 -  991
	//	LG  :  992 - 1200
	//	XL. :  992 - ....
	//	XXl :  922 - ....
	*/	
	@media (min-width: 0px)	   {  body::after { content: 'XS';  background-image: var(--width4blocs_xs); width: var(--width4blocs_w); height: var(--width4blocs_h);}}
	@media (min-width: 576px)  {  body::after { content: 'SM';  background-image: var(--width4blocs_sm); width: var(--width4blocs_w); height: var(--width4blocs_h);}}
	@media (min-width: 768px)  {  body::after { content: 'MD';  background-image: var(--width4blocs_md); width: var(--width4blocs_w); height: var(--width4blocs_h);}}
	@media (min-width: 992px)  {  body::after { content: 'LG';  background-image: var(--width4blocs_lg); width: var(--width4blocs_w); height: var(--width4blocs_h);}}
	@media (min-width:1200px)  {  body::after { content: 'XL';  background-image: var(--width4blocs_xl); width: var(--width4blocs_w); height: var(--width4blocs_h);}}
	@media (min-width:1400px)  {  body::after { content: 'XXL'; background-image: var(--width4blocs_xxl);width: var(--width4blocs_w); height: var(--width4blocs_h);}}