:root {
  --bg:#ab8787;
  --fg:#dbdbdb;
  --accent:#22ab94;
  --gap:0.75rem;
  --card-bg:#1a1a1a;
  --card-border:#2a2a2a;
  --card-radius:8px;
  --card-height:35vh; /* reduced height */
  --font-stack:-apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,sans-serif;
  --transition:0.2s ease;
}
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;
  width:100%;height:100%;
  background:var(--bg);color:var(--fg);
  font-family:var(--font-stack);
}
main{
  width:100%;min-height:25vh;
  display:flex;flex-direction:column;
}
.site-grid{
  width:100%;
  padding:var(--gap);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-auto-rows: var(--card-height); /* ensure rows auto size */
  gap:var(--gap);
}
@media(max-width:1600px){.site-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:1200px){.site-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:900px){.site-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){
  .site-grid{grid-template-columns:1fr;}
  :root{--card-height:40vh;}
}
.grid-item{
  position:relative;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--card-radius);
  overflow:hidden;
  min-height:var(--card-height);
}
.grid-item iframe,
.grid-item img{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}
.grid-item-label{
  position:absolute;top:4px;left:8px;
  padding:1px 4px;font-size:12px;
  background:rgba(0,0,0,0.6);
  border-radius:4px;
  color:var(--fg);
  text-decoration:none;
  opacity:0;
  transition:opacity var(--transition);
  pointer-events:none;
}
.grid-item:hover .grid-item-label{opacity:1;pointer-events:auto;}
.grid-item-label:focus,
.grid-item-label:active{opacity:1;outline:1px solid var(--accent);}