:root{
  --bg:#0b0c10; --tile:#16181d; --fg:#e6e6e6; --muted:#b7bec8;
  --r:16px; --gap:14px; --shadow:0 6px 18px rgba(0,0,0,.25);
}
.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:var(--gap);
}
.album{
  /* background:var(--tile); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); */
  /* position:relative; transition:transform .18s ease, filter .18s ease; outline:none; */
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  aspect-ratio: 1 / 1;   /* square */
}
/* enforce square */
.album .art {
  width: 100%;
  aspect-ratio: 1 / 1;   /* square */
  overflow: hidden;
  position: relative;
  background: #111;
  margin: 0;
}

.album .art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.album:hover{ transform:translateY(-2px); }
.album:focus-visible{ box-shadow:0 0 0 3px #7aa2ff, var(--shadow); }
.art{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:#0d0f13; }
.art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.album:hover .art img{ transform:scale(1.05); }
.title{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px; font-weight:600;
  background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0)); color:#fff; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px rgba(0,0,0,.6);
}
/* optional mosaic variants */
.album.wide{ grid-column:span 2; }
.album.tall{ grid-row:span 2; }
.album.big{ grid-column:span 2; grid-row:span 2; }
@media (max-width:720px){
  .album.wide,.album.tall,.album.big{ grid-column:span 1; grid-row:span 1; }
}

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

.modal-content {
  background: white;
  max-width: 600px;
  padding: 8rem;
  border-radius: 6px;
}

.modal .close {
  float: right;
  font-size: 1.5rem;
  cursor: pointer;
}