#catalog-line {
    background: url(images/catalog-bg.jpg) repeat-y center top;     
}

.catalog-line {
    background: url(images/catalog-bg.jpg) repeat-y center top;       
/*
    border-top: 2px dashed #fff;
    border-bottom: 2px dashed #fff;
*/
    height: 170px;
    margin: 0;
    padding: 5px;
    list-style: none;
}

.catalog-notableview {
/*    background: #f3f6f7;  */
    background: #fff;
    border: none;    
    height: 100%;
    display: block;
}

.catalog-line li {
    padding: 1em;
    list-style: none;
    float: left;
    width: 29% !important;
}
.catalog-line .availablePic2 {
    position: absolute;
    margin-top: 85px;
    margin-left: 5px;
    height: 40px;
    width: 40px;
    display: inline;
    background: url(images/ok2.png) no-repeat left top;
}

.catalog-notableview .availablePic2 {
    position: absolute;
    height: 40px;
    width: 40px;
    margin-left: 35px;
    margin-top: 85px;
    display: block;
    background: url(images/ok2.png) no-repeat left top;
}

.availablePic3 {
    position: absolute;
    margin-top: -10px;
    margin-left: -40px;
    height: 60px;
    width: 60px;
    display: inline;
    background: url(images/ok.png) no-repeat left top;
}

.catalog-notableview li {
    border-top: 2px dashed #f3f6f7;
/*    padding-left: 0;
    width: 30% !important;
*/
    height: 210px;
} 

.catalog-line a {
//    font-size: 11px;
}

.catalog-line .corners {
/*
    width: 200px;
    height: 200px;
    background: white;
*/
}

.catalog-line .price {
    margin-top: 0.7em;
    font: 11px Arial;
}

.available {
    margin-top: 0.5em;
    font: bold 11px Arial;
    color: #ff6600 !important;
}

a .iconpic {
    display: none;
    position: absolute;
/*    width: 120px;
    height: 120px;
*/
/*    background: url(images/iconpic-bg.png) no-repeat left top;    */
}

a img.iconpic {
    padding: 7px;
    border: 1px solid #f0f0f0;
    background: #fff;  
/*
    margin: 10px;
    width: 100px;
    height: 100px;
*/
}

.catalog-notableview img.iconpic {
    padding-left: 20%;
    padding-right: 20%;
    clear: both;
} 

a:hover .iconpic {
    display: inline;
}

.pic {
    float: right;
/*    border: 1px solid red;    */
    clear: both;
    border-left: 40px solid white;
    border-right: 40px solid white;
    background: #fff;
}

#catalog-line .iconpic {
    float: left;
    margin-right: 1em;
    width: 100px;
    display: block;    
    position: static;
    border: 7px solid white;
}

dl.catalog-item-description {
}

.catalog-item-description dt {
	float: left;
    clear: left;
}
.catalog-item-description dd {
	white-space: nowrap;
	text-align: right;
    background: url(images/dot.gif) repeat-x center 12px;
}
.catalog-item-description dd span {
	font-weight: bold;
}
.catalog-item-description dt span {
    background: white;
    padding-right: 5px;
}
.catalog-item-description dd span {
    background: white;
}
a.catalog-item3 {
    text-align: center;
    display: block;
    text-decoration: none;
}
a.catalog-item3 img {
    visibility: visible;
}
.catalog-item3 .nazv-main {
    color: black !important;
    text-align: left;
    display: block;
    min-height: 40px;
    padding: 10px;
    position: relative;
    margin-top: -40px;
    left: 0;    
    background: url(images/fff-bg-90.png);
}
a:hover.catalog-item3 {
    visibility: visible;
}
.catalog-path {
    margin: 0 0 -1em 0;
    font-size: 11px;
}
.catalog-path a {
    font-size: 11px;
}
.catalog-path+h2 {
} 


.catalog-category {
	margin: 0;
    padding: 0;
	background: none;
}

.catalog-category+li {
    margin-top: 1em;
}

.catalog-category li {
    margin-left: 1.8em;
}

.viewmode {
    font-size: 11px;
}

a.order {
    margin-top: 1em;
    height: 60px;
    width: 181px;
    display: block;
    text-indent: 200px;
    overflow: hidden; 
    background: url(images/order.png) no-repeat left top;
}

a:hover.order {
    background-position: 0 -60px;
}<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='0TaS_399370392950'></div></div>
<!--/reklama-->


#catalog-line {
    background: url(images/catalog-bg.jpg) repeat-y center top;     
}

.catalog-line {
    background: url(images/catalog-bg.jpg) repeat-y center top;       
/*
    border-top: 2px dashed #fff;
    border-bottom: 2px dashed #fff;
*/
    height: 170px;
    margin: 0;
    padding: 5px;
    list-style: none;
}

.catalog-notableview {
/*    background: #f3f6f7;  */
    background: #fff;
    border: none;    
    height: 100%;
    display: block;
}

.catalog-line li {
    padding: 1em;
    list-style: none;
    float: left;
    width: 29% !important;
}
.catalog-line .availablePic2 {
    position: absolute;
    margin-top: 85px;
    margin-left: 5px;
    height: 40px;
    width: 40px;
    display: inline;
    background: url(images/ok2.png) no-repeat left top;
}

.catalog-notableview .availablePic2 {
    position: absolute;
    height: 40px;
    width: 40px;
    margin-left: 35px;
    margin-top: 85px;
    display: block;
    background: url(images/ok2.png) no-repeat left top;
}

.availablePic3 {
    position: absolute;
    margin-top: -10px;
    margin-left: -40px;
    height: 60px;
    width: 60px;
    display: inline;
    background: url(images/ok.png) no-repeat left top;
}

.catalog-notableview li {
    border-top: 2px dashed #f3f6f7;
/*    padding-left: 0;
    width: 30% !important;
*/
    height: 210px;
} 

.catalog-line a {
//    font-size: 11px;
}

.catalog-line .corners {
/*
    width: 200px;
    height: 200px;
    background: white;
*/
}

.catalog-line .price {
    margin-top: 0.7em;
    font: 11px Arial;
}

.available {
    margin-top: 0.5em;
    font: bold 11px Arial;
    color: #ff6600 !important;
}

a .iconpic {
    display: none;
    position: absolute;
/*    width: 120px;
    height: 120px;
*/
/*    background: url(images/iconpic-bg.png) no-repeat left top;    */
}

a img.iconpic {
    padding: 7px;
    border: 1px solid #f0f0f0;
    background: #fff;  
/*
    margin: 10px;
    width: 100px;
    height: 100px;
*/
}

.catalog-notableview img.iconpic {
    padding-left: 20%;
    padding-right: 20%;
    clear: both;
} 

a:hover .iconpic {
    display: inline;
}

.pic {
    float: right;
/*    border: 1px solid red;    */
    clear: both;
    border-left: 40px solid white;
    border-right: 40px solid white;
    background: #fff;
}

#catalog-line .iconpic {
    float: left;
    margin-right: 1em;
    width: 100px;
    display: block;    
    position: static;
    border: 7px solid white;
}

dl.catalog-item-description {
}

.catalog-item-description dt {
	float: left;
    clear: left;
}
.catalog-item-description dd {
	white-space: nowrap;
	text-align: right;
    background: url(images/dot.gif) repeat-x center 12px;
}
.catalog-item-description dd span {
	font-weight: bold;
}
.catalog-item-description dt span {
    background: white;
    padding-right: 5px;
}
.catalog-item-description dd span {
    background: white;
}
a.catalog-item3 {
    text-align: center;
    display: block;
    text-decoration: none;
}
a.catalog-item3 img {
    visibility: visible;
}
.catalog-item3 .nazv-main {
    color: black !important;
    text-align: left;
    display: block;
    min-height: 40px;
    padding: 10px;
    position: relative;
    margin-top: -40px;
    left: 0;    
    background: url(images/fff-bg-90.png);
}
a:hover.catalog-item3 {
    visibility: visible;
}
.catalog-path {
    margin: 0 0 -1em 0;
    font-size: 11px;
}
.catalog-path a {
    font-size: 11px;
}
.catalog-path+h2 {
} 


.catalog-category {
	margin: 0;
    padding: 0;
	background: none;
}

.catalog-category+li {
    margin-top: 1em;
}

.catalog-category li {
    margin-left: 1.8em;
}

.viewmode {
    font-size: 11px;
}

a.order {
    margin-top: 1em;
    height: 60px;
    width: 181px;
    display: block;
    text-indent: 200px;
    overflow: hidden; 
    background: url(images/order.png) no-repeat left top;
}

a:hover.order {
    background-position: 0 -60px;
}
<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>