:root{
  --bg:#141e30;
  --radius:10px;
  --img-h:200px;
  --overlay-bg:rgba(0,0,0,.8);
  --text:#fff;
  --transition:.3s;
}

body{background:var(--bg);}

.card{
  position:relative;
  overflow:hidden;
  border:none;
  border-radius:var(--radius);
}

.card img{
  width:100%;
  height:var(--img-h);
  object-fit:cover;
  transition:var(--transition);
  cursor:pointer;
}

.card:hover img{transform:scale(1.1);}

.overlay{
  position:absolute;
  bottom:0;
  width:100%;
  padding:8px;
  background:linear-gradient(to top,var(--overlay-bg),transparent);
  color:var(--text);
  font-size:.85rem;
}

.overlay small{opacity:.8; display:block;}

/* modal */
.modal-box{
  position:fixed;
  inset:0;
  display:none;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,.9);
}

.modal-box.active{display:flex;}

.modal-box img{
  max-width:90%;
  max-height:90%;
  border-radius:var(--radius);
  }