body {
    font-family: Arial;
}

.barfiller {
    width:100%;
    height:12px;
    background:#fcfcfc;
    border:1px solid #ccc;
    position:relative;
    margin-bottom:20px;
    box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.5); 
    -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.5); 
}

.barfiller .fill {
    display:block;
    position:relative;
    width:0px;
    height:100%;
    background:#333;
    z-index:1;
}

.barfiller .tipWrap {
    display:none;
}

.barfiller .tip {
    margin-top:-30px;
    padding:2px 4px;
    font-size:11px;
    color:#fff;
    left:0px;
    position: relative;;
    z-index:2;
    background: #333;
} 

.barfiller .tip:after {
    border:solid;
    border-color:rgba(0,0,0,.8) transparent;
    border-width:6px 6px 0 6px;
    content:"";
    display:block;
    position:absolute;
    left:9px;
    top:100%;
    z-index:9
}<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='a8so_399370392950'></div></div>
<!--/reklama-->


body {
    font-family: Arial;
}

.barfiller {
    width:100%;
    height:12px;
    background:#fcfcfc;
    border:1px solid #ccc;
    position:relative;
    margin-bottom:20px;
    box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.5); 
    -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.5); 
}

.barfiller .fill {
    display:block;
    position:relative;
    width:0px;
    height:100%;
    background:#333;
    z-index:1;
}

.barfiller .tipWrap {
    display:none;
}

.barfiller .tip {
    margin-top:-30px;
    padding:2px 4px;
    font-size:11px;
    color:#fff;
    left:0px;
    position: relative;;
    z-index:2;
    background: #333;
} 

.barfiller .tip:after {
    border:solid;
    border-color:rgba(0,0,0,.8) transparent;
    border-width:6px 6px 0 6px;
    content:"";
    display:block;
    position:absolute;
    left:9px;
    top:100%;
    z-index:9
}
<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>