div[data-id$=opin] {
/* contain: 
strict - включает в себя layout style paint size
size - подходит только для контейнеров размеры которых определены
и не зависят от содержания
https://css-live.ru/articles/css-izolyaciya.html 
https://dev-gang.ru/article/davaite-gluboko-pogruzimsja-v-svoistvo-css-container-th1nbyi3xt/
*/
contain: layout style paint;
}


div[data-id$=opin] > div > div[data-id$=tabl] {
border:0px solid #0000ff;
}


div[data-id$=opin] > div div {
  box-sizing: border-box;
  font-family:Helvetica, Arial, sans-serif;
  width:97%
}

.jsn {width:100%}

div[data-id$=tabl] > div{
position:relative;
background-color: #FFFFFF; 
border: 1px solid #dddddd;
border-radius:10px;
padding:10px;
margin:10px;
margin-bottom: calc(10px + 25 * ((100vw - 320px) / (1920 - 320))); 
}


.date{
color:#000000;
font-size: calc(10px + 5 * ((100vw - 320px) / (1920 - 320))); 
padding-left:0px;
font-weight:200;
}

.shop{
color:#000000;
font-size: calc(13px + 5 * ((100vw - 320px) / (1920 - 320))); 
font-weight:200;
padding-left:10px;
}

.autor{
color:#000000;
font-size: calc(15px + 5 * ((100vw - 320px) / (1920 - 320))); 
padding-left:10px;
font-weight:300;
}


div[data-id$=tabl] > div .opin_full,  div[data-id$=tabl] > div .opin{
cursor:pointer;
color:#000000;
font-size: calc(12px + 5 * ((100vw - 320px) / (1920 - 320))); 
text-align: justify;
font-weight:400;
line-height:1.4em;
margin-bottom:10px;
}

div[data-id$=tabl] > div .opin{
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
-ms-line-clamp: 2;
-webkit-line-clamp: 2;
line-clamp: 2;
display: -webkit-box;
display: box;
word-wrap: break-word;
-webkit-box-orient: vertical;
box-orient: vertical;
}

.opin i, .opin_full i{color:#222222;font-weight:550;}

.stars{
position:absolute;
border: 0px solid #dddddd;
top:5px;
right:5px;
width:calc(350px - 10vw);
margin-bottom:5px;
text-align:right;
margin-top:-15px;
}

.star{margin:3px;}


.icnt{
position:absolute;
border: 0px solid #eeeeee;
color:#eeeeee;
top:5px;
right:250px;
margin-bottom:5px;
text-align:right;
margin-top:-5px;
}


div[data-id$=opin] > div div[data-id$=hdr] {margin-left:20px;}

div[data-id$=opin] > div div[data-id$=hdr] .product{
color:#000000;
font-size: calc(12px + 5 * ((100vw - 320px) / (1920 - 320))); 
}

div[data-id$=opin] > div div[data-id$=hdr] .product:before{
color:#000000;
/* content: "отзывы покупателей о " */
}

div[data-id$=opin] > div div[data-id$=hdr] .country{
color:#aaaaaa;
font-weight:bold;
display:none;
}

div[data-id$=opin] > div div[data-id$=hdr] .country:after{
content: ", "
}


@media (max-width: 499px){
.stars{position:relative; text-align:left;}
.star{width:20px;}
}

@media (min-width: 500px) and (max-width: 981px){
.stars{position:absolute;margin-top:-5px;margin-bottom:3px;}
.star{width:20px;}
}

@media (min-width: 982px) and (max-width: 1200px){
.stars{position:absolute;margin-top:0px;margin-bottom:3px;}
.star{width:20px;}
}


@media (min-width: 1201px) and (max-width: 1920px){
.stars{position:absolute;margin-top:0px;margin-bottom:3px;}
.star{width:15px;}
}