Яркий вид материалов в 2 колонки для uCoz

<div class="block_wid">
<div class="dega-muryn">
  <div class="dega-muryn-title-detali">
<div class="dega-muryn-title">
  <p class="geratulakerybu"><a href="$ENTRY_URL$">$TITLE$</a></p>  
  </div>
  <div class="dega-muryn-detali">
  <span><i class="fa fa-calendar"></i> $DATE$</span><i class="fa fa-user-circle-o"></i> <a href="$PROFILE_URL$">$USERNAME$</a> <i class="fa fa-check-square-o" aria-hidden="true"></i> <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> <i class="fa fa-eye" aria-hidden="true"></i> $READS$
</div>
</div>
  <div class="dega-muryn-img-message">
  <div class="dega-muryn-img invert">
  <a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a>
  </div>  
<div class="dega-muryn-message">$MESSAGE$</div>
  </div>
</div>
</div>

.dega-muryn{
padding: 10px;
background-color: rgba(249, 245, 245, 0.99);
border-radius: 3px;
margin: 0px 0px 10px 0px;
border: 1px solid #9b9c9e;
box-shadow: 0px 2px 0px 1px rgba(93, 90, 90, 0.22), 0px 3px 0px 0px rgba(72, 69, 69, 0.27);
}

.dega-muryn-title{
padding: 0 0 10px 0;
}

.dega-muryn-title a{
color: rgba(45, 77, 128, 0.97);
font-size: 18px;
display:block;
font-weight: bold;
padding-left: 3px;
text-shadow: 0 1px 0 rgba(255, 247, 247, 0.97);
}

.dega-muryn-title a:hover{
color: #206ed2;
}

.dega-muryn-detali{
background-color: #191717;
display: inline-block;
width: 99%;
height: 33px;
line-height: 30px;
margin: 0 0 10px 0;
border: solid 2px rgba(197, 192, 192, 0.99);
border-radius: 3px;
font-size: 12px;
color: rgba(246, 248, 249, 0.99);
}

.dega-muryn-detali span{
background-color: rgba(49, 45, 45, 0.99);
color: #fffbfb;
padding: 7px 23px 10px 12px;
border-radius: 3px 0px 50px 3px;
margin: 0 10px 0 0;
border: 1px solid rgb(101, 95, 95);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.97);
}

.dega-muryn-detali a{
color: #fff;
font-size: 12px;
padding: 0px 10px 0px 0;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.97);
}

.dega-muryn-detali a:hover{
color: rgba(252, 255, 229, 0.98);
}

.dega-muryn-comments{
float: right;
padding: 0 10px 0 0;
}

.dega-muryn-img-message{
min-height: 158px;
}

.dega-muryn-img{
float: left;
width: 98%;
height: 150px;
padding: 1px;
border: solid 2px rgba(173, 173, 173, 0.99);
border-radius: 3px;
box-shadow: 0px 4px 10px rgba(255, 255, 255, 0), 0px 9px 5px 0px rgba(255, 255, 255, 0.96);
}

.dega-muryn-img img{
width: 100%;
height: 150px;
}

.dega-muryn-message{
text-align: justify;
height: 87px;
overflow: hidden;
line-height: 135%;
padding: 10px 3px 0px 3px;
color: #222325;
font-size: 13px;
}

.block_wid{
width: 49%;
float:left;
margin: 0px 2px 1px 5px;
}

.geratulakerybu{
white-space: nowrap;
overflow: hidden;
padding: 5px;
background: #f8f4f4;
position: relative;
margin: 0px 10px 0px 0px;
}

.geratulakerybu::after{
content: '';
position: absolute;
right: 0;
top: 0;
width: 41px;
height: 73%;
background: -moz-linear-gradient(left, rgba(248, 244, 244, 0.99), rgba(248, 244, 244, 0.99) 100%);
background: -webkit-linear-gradient(left, rgb(248, 244, 244), rgba(248, 244, 244, 0.99) 100%);
background: -o-linear-gradient(left, rgba(248, 244, 244, 0.97), rgba(248, 244, 244, 0.95) 100%);
background: -ms-linear-gradient(left, rgba(248, 244, 244, 0.99), rgba(248, 244, 244, 0.95) 100%);
background: linear-gradient(to right, rgba(248, 244, 244, 0.32), rgba(248, 244, 244, 0.97) 100%);
}

.invert img{
transition: all 1s cubic-bezier(0.46, 0.31, 0, 1.06);
}

.invert img:hover{
-webkit-filter: invert(100%);
}

@media only screen and (max-width:480px){
.dega-muryn-img{
float: none;
width: 100%;
height: auto;
}

.dega-muryn-img img{
width: 100%;
height: auto;
}

}

@media screen and (min-width: 120px) and (max-width: 1080px){
.block_wid{
width:auto;
float:none;
margin:0}

.dega-muryn-img img{
width:100%;
height:100%;
object-fit:cover}

.dega-muryn-img{
float:none;
width:auto;
height:200px;
padding:2px;
border:0;
}

}

@media screen and (max-width: 450px){
.dega-muryn-detali{
display:none}

}