#containerOver {
	position: absolute;
	margin: auto auto auto auto;
	padding: 0;
	left: 0;
	top: 0;
	z-index: 3000;
	background: black;
	display: none;
	opacity: 0;
	filter: alpha(opacity=0);
	overflow: hidden;
	width: 100%;
	height: auto;
}

#panoramBox {
	position: absolute;
	z-index: 3100;
	display: none;
	opacity: 0;
	filter: alpha(opacity=0);
    top: 0;
    left: 0;
	width: 100%;	
	height: 100%;
}

#win {
	background: url(images/loading.gif) no-repeat center center;
/*	background: url(https://zeto-pskov.ru/usr/templates/images/bg.gif) repeat-x left top white;  */	
	width: 10%;
	height: 10%;
	padding: 0;
	margin: 0;
/*	filter: progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=230,strength=4);	*/	
} 

#win td {
	padding: 0;
	margin: 0;
/*    border: 5px solid white;  */  
}

#win img {
    border: none;
	padding: 0;
	margin: 0;          
}

#panoramBoxHeader {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
	padding: 1em;
    margin: 1em auto; 
	border: none;
	font: 12px Arial; 
	text-transform: none;
/*	opacity: 0.6;
	filter: alpha(opacity=60);
	background: black;
*/
    background: url(images/000-bg-60.png);
    color: #fff !important;
}

a#description:hover #panoramBoxHeader {
    visibility: visible;
}

#panoramBoxImg {
    visibility: hidden;  
}

#panoramBoxObject {
    width: 640px;
    height: 480px;
}

#panoramBoxEmbed {
    width: 640px;
    height: 480px;
}

#panoramBoxContent {
	text-align: center;
}

a#description {
    cursor: default;
    display: block;
    position: relative;
}

#panoramBoxCloseButton {
    cursor: pointer;
    position: absolute;
    z-index: 4000;
    top: -32px;
    right: -32px;
    margin: 0; 
    width: 32px;
    height: 32px;
/*    visibility: hidden;   */
	opacity: 0.6;
	filter: alpha(opacity=60);
	background: url(images/closebox.png) no-repeat;
}
a#description:hover #panoramBoxCloseButton {
	opacity: 1;
	filter: alpha(opacity=100);
/*    visibility: visible;  */
}
#panoramBoxCloseButton:hover {
	opacity: 1;
	filter: alpha(opacity=100);
/*	background-position: 0 -32px;    */
}

#panoramBoxFooter {
	text-align: center;
	margin: 2em;
    display: none;
}

#win a {
	text-decoration: none;
}<link rel="stylesheet" type="text/css" href="/usr/templates/_pr_ext.css" /><div class="demo" title="Внимание! Это демо версия!">DEMO</div>
<!--reklama-->

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script-->
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-3927128035772323",
          enable_page_level_ads: true
     });
</script>

<!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3927128035772323" crossorigin="anonymous"></script> -->

<div class="sp_old">
<h2 class="hidden"><a href="/links/">Реклама спонсоров</a></h2><!--399370392950--><div id='bjKR_399370392950'></div></div>
<!--/reklama-->


#containerOver {
	position: absolute;
	margin: auto auto auto auto;
	padding: 0;
	left: 0;
	top: 0;
	z-index: 3000;
	background: black;
	display: none;
	opacity: 0;
	filter: alpha(opacity=0);
	overflow: hidden;
	width: 100%;
	height: auto;
}

#panoramBox {
	position: absolute;
	z-index: 3100;
	display: none;
	opacity: 0;
	filter: alpha(opacity=0);
    top: 0;
    left: 0;
	width: 100%;	
	height: 100%;
}

#win {
	background: url(images/loading.gif) no-repeat center center;
/*	background: url(https://zeto-pskov.ru/usr/templates/images/bg.gif) repeat-x left top white;  */	
	width: 10%;
	height: 10%;
	padding: 0;
	margin: 0;
/*	filter: progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=230,strength=4);	*/	
} 

#win td {
	padding: 0;
	margin: 0;
/*    border: 5px solid white;  */  
}

#win img {
    border: none;
	padding: 0;
	margin: 0;          
}

#panoramBoxHeader {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
	padding: 1em;
    margin: 1em auto; 
	border: none;
	font: 12px Arial; 
	text-transform: none;
/*	opacity: 0.6;
	filter: alpha(opacity=60);
	background: black;
*/
    background: url(images/000-bg-60.png);
    color: #fff !important;
}

a#description:hover #panoramBoxHeader {
    visibility: visible;
}

#panoramBoxImg {
    visibility: hidden;  
}

#panoramBoxObject {
    width: 640px;
    height: 480px;
}

#panoramBoxEmbed {
    width: 640px;
    height: 480px;
}

#panoramBoxContent {
	text-align: center;
}

a#description {
    cursor: default;
    display: block;
    position: relative;
}

#panoramBoxCloseButton {
    cursor: pointer;
    position: absolute;
    z-index: 4000;
    top: -32px;
    right: -32px;
    margin: 0; 
    width: 32px;
    height: 32px;
/*    visibility: hidden;   */
	opacity: 0.6;
	filter: alpha(opacity=60);
	background: url(images/closebox.png) no-repeat;
}
a#description:hover #panoramBoxCloseButton {
	opacity: 1;
	filter: alpha(opacity=100);
/*    visibility: visible;  */
}
#panoramBoxCloseButton:hover {
	opacity: 1;
	filter: alpha(opacity=100);
/*	background-position: 0 -32px;    */
}

#panoramBoxFooter {
	text-align: center;
	margin: 2em;
    display: none;
}

#win a {
	text-decoration: none;
}
<style>
	.portfolio li.good a {
	}
	.portfolio li.good a:before {
/*		--thumbnail: attr(data-img);*/
/*		content: var(--thumbnail);*/
		content: '';
		background-image: var(--thumbnail);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		height: 20vh;
		widht: 100%;
		display: block;
	}
/*	
	.portfolio li a[data-img]:before {
		content: attr(data-img);
		background-image: attr(data-img);
		background-repeat: no-repeat;
		background-size: cover;
		widht: 100%;
		padding: 20vh 20vh 20px 20px;
		display: block;
	}
*/
	.portfolio {
 		display: grid; 
  		grid-template-columns: 20% 20% 20% 20%;  
  		grid-column-gap: 5%;
  	}
	.portfolio li {
		list-style: none;
		margin-bottom: 2em;
/*		height: 20vh;*/
/*		width: 20%;*/
	}
	.portfolio li:not(.good) {
		display: none !important;
	}
</style>
<ul class="portfolio">

</ul>