/* home uses base.css grid & cards */
.hero{padding:36px 0;text-align:center}
.hero h1{font-size:2rem;margin:0 0 8px}
.hero p{color:var(--muted);margin:0 0 18px}

/* Recent / Trending sections */
.video-section{width:100%;max-width:var(--max-width);margin:0 auto 32px;padding:0 18px}
.video-grid{grid-auto-rows:1fr}

/* make 5 columns on large desktops as requested */
@media(min-width:1400px){
  .video-grid{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:1399px) and (min-width:1000px){
  .video-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:999px) and (min-width:700px){
  .video-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:699px){
  .video-grid{grid-template-columns:repeat(1,1fr)}
}

/* hover preview: show preview video when hovered (JS will toggle display) */
.thumbnail-wrapper .preview{display:none}
.card:hover .thumbnail{opacity:1}