/* =========================================================
   YOUTUBE STATS V2 - MI PIACE, COMMENTI E TOP VIDEO
   ========================================================= */

.youtube-stat-grid-5{
  grid-template-columns:repeat(5,1fr);
}

.youtube-top-video{
  margin-top:12px;
  display:grid;
  grid-template-columns:140px 1fr auto;
  align-items:center;
  gap:15px;
  padding:10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:#0d1015;
  transition:.2s;
}

.youtube-top-video[hidden]{
  display:none;
}

.youtube-top-video:hover{
  border-color:#3c4552;
  transform:translateY(-1px);
}

.youtube-top-thumb{
  width:140px;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:11px;
  background:#171b22;
}

.youtube-top-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.youtube-top-kicker{
  color:var(--yellow);
  font-size:.68rem;
  font-weight:950;
  letter-spacing:.08em;
}

.youtube-top-info strong{
  color:#fff;
  font-size:.94rem;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.youtube-top-info > span:last-child{
  color:#9299a4;
  font-size:.78rem;
  font-weight:750;
}

.youtube-top-play{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--red);
  color:#fff;
  font-size:.85rem;
  font-weight:950;
}

@media (max-width:900px){
  .youtube-stat-grid-5{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:620px){
  .youtube-stat-grid-5{
    grid-template-columns:1fr;
  }

  .youtube-top-video{
    grid-template-columns:100px 1fr;
  }

  .youtube-top-thumb{
    width:100px;
  }

  .youtube-top-play{
    display:none;
  }
}
