Серый вид материалов две колонки на uCoz

<div style="width: 48%;float:left;margin: 0px 0px 10px 10px;">  
<div class="karetunitor-vid clr">  
<div class="karetunitor-vid-title">  
<span class="title-icon"><a href="$ENTRY_URL$">$TITLE$</a></span>  
  </div>  
  <div class="karetunitor-vid-img-text">  
  <div class="karetunitor-vid-img sepia">  
<a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$"></a>  
  </div>  
  <div class="karetunitor-vid-text">  
$MESSAGE$  
  </div>  
</div>  
  <div class="karetunitor-vid-detali"><span class="dates"><i class="fa fa-check-square-o" aria-hidden="true"></i> $CATEGORY_NAME$</span><span class="reads"><i class="fa fa-eye" aria-hidden="true"></i> $READS$</span> <span class="coments"><i class="fa fa-comments" aria-hidden="true"></i>$COMMENTS_NUM$</span> <span><a href="$ENTRY_URL$">Далее</a></span></div>  
</div>

.karetunitor-vid{
margin: 0 0 20px 0;
background: #cccccc;
display: inline-block;
box-shadow: 0 1px 2px rgba(29, 27, 27, 0.91);
border-radius: 3px 3px 3px 3px;
border: 2px solid #d4d4d4;
}

.karetunitor-vid-title{
padding: 10px 0 10px 20px;
border-bottom: 1px solid #b5b3b3;
background-color: #ece8e8;
border-radius: 3px 3px 0px 0px;
}

.karetunitor-vid-title a{
font-size: 19px;
color: rgb(27, 28, 39);
display: block;
font-weight: bold;
font-family: PT Sans;
text-shadow: 0 1px 0 #ffffff;
}

.karetunitor-vid-title a:hover{
color: rgba(83, 106, 132, 0.89);
text-decoration: none;
}

.karetunitor-vid-title span{
letter-spacing: .1em;
font-size: 10px;
display: inline-block;
}

.karetunitor-vid-img-text{
display: inline-block;
padding: 10px;
}

.karetunitor-vid-img{
width: 100%;
height: 180px;
background: #9c9b9b;
padding: 2px;
float: left;
border-radius: 5px;
box-shadow: 1px 6px 16px 0px rgba(255, 255, 255, 0.94), 0px 9px 18px 3px rgba(107, 107, 107, 0.22);
}

.karetunitor-vid-img img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
}

.karetunitor-vid-text{
padding: 15px 15px 15px 10px;
text-align: justify;
height: 73px;
overflow: hidden;
line-height: 135%;
font-size: 15px;
color: #232020;
text-shadow: 0 1px 0 #ffffff;
}

.karetunitor-vid-detali{
background-color: #b3b3b3;
margin-top: 5px;
height: 40px;
line-height: 40px;
padding-left: 17px;
border-radius: 0px 3px 3px 3px;
}

.karetunitor-vid-detali span{
font-size: 13px;
color: #151519;
padding-right: 12px;
text-shadow: 0 1px 0 #ffffff;
font-weight: bold;
font-family: PT Sans;
}

.karetunitor-vid-detali span a{
float: right;
background-color: #119420;
display: block;
padding: 0 10px;
font-weight: bold;
color: #eae4e4;
letter-spacing: .1em;
text-transform: uppercase;
border-radius: 0px 0px 3px 0px;
text-shadow: 0 1px 0 #2b2a2a;
}

.karetunitor-vid-detali span a:hover{
text-decoration: none;
background-color: #35b2f2;
}

.dates{
padding-left: 1px!important;
}

.reads{
padding-left: 12px!important;
}

.coments{
padding-left: 12px!important;
}

@media screen and (max-width: 600px){
.karetunitor-vid-detali span{
display: block;
padding: 0px 10px!important;
background: #cccccc;
}

.karetunitor-vid-detali{
height: auto;
padding-left: 0px;
*/ }

.karetunitor-vid-detali span a{
float: none;
text-align: center;
margin: 5px 2px 10px 0px;
border-radius: 10px;
}

.dates, .reads, .coments, .cat_mm{
display: none!important;
}

}

.sepia img {
-webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.07, 1.11);
-moz-transition: all 1s cubic-bezier(0.25, 0.1, 0, 1.26);
-o-transition: all 1s cubic-bezier(0.25, 0.1, 0.02, 1.2);
-ms-transition: all 1s cubic-bezier(0.25, 0.1, 0, 0.87);
transition: all 1s cubic-bezier(0.79, 0.54, 0, 1.02);}
.sepia img:hover {
-webkit-filter: sepia(100%);}