.widget-popin{
  --section-space-small:10px;
  --section-space-normal:15px;
  --rounded-normal:10px;
  --article-thumb-size:95px;
  --color-link-primary:#FF7300;
  --color-link-secondary:#212121;
  --color-default:#757575;
}

.widget-popin .flex_ori{display:block; overflow:hidden; position:relative; line-height:0;}
.widget-popin .flex_ori img{position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; object-fit:cover;}

.widget-popin-head{position:relative; font-size:24px; font-style:italic; font-weight:900; text-transform:uppercase;
margin-bottom:var(--section-space-normal);}
.widget-popin-name{padding-right:130px; padding-left:16px; position:relative;}
.widget-popin-name:before{content:''; position:absolute; top:0; left:5px; width:5px; height:29px; transform:skew(-15deg) translate(0px,0px); background-color:var(--color-link-primary); 
background:linear-gradient(to bottom, var(--color-link-tertiary) 0%, var(--color-link-primary) 100%); border-radius:var(--rounded-normal);}
.widget-popin-label, .widget-popin-label *{display:flex; align-items:center;}
.widget-popin-label{position:absolute; top:8px; right:0; font-size:10px; font-weight:normal; font-style:normal; text-transform:none; opacity:0.6;}
.widget-popin-logo{width:40px; height:10px; margin-left:5px;}
.widget-popin-logo img{object-position:top;}

.widget-popin-container{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); grid-gap:5px; font-family:sans-serif, serif;}
.widget-popin-list{display:block; border-radius:var(--rounded-normal); background-color:#000; overflow:hidden;}
.widget-popin-list:hover{opacity:0.4;}
.widget-popin-thumb{position:relative;}
.widget-popin-thumb:before{content:''; display:block; padding-top:56.25%;}
.widget-popin-thumb:after{content:''; display:block; position:absolute; z-index:3; top:0; left:0; width:100%; height:100%;
background:linear-gradient(to bottom, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 100%);}
.widget-popin-info{padding:var(--section-space-small); display:grid; grid-row-gap:5px;}
.widget-popin-title{font-size:14px; line-height:140%; color:#FFF;}
.widget-popin-misc{font-size:11px; font-weight:normal; color:rgba(255,255,255,0.5);}

@media (prefers-color-scheme:dark){
  .widget-popin-logo{filter:invert(1);}
}