.grid-wrap {
  width: min(1400px, 100%);
  margin: 0 auto;
  padding: 16px;
}

/* replace the breakpoint-based columns with this */
.cover-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
}
/*1320*/
@media (max-width: 1600px){ .cover-grid{ grid-template-columns: repeat(5, minmax(160px, 1fr)); } }
@media (max-width: 1100px){ .cover-grid{ grid-template-columns: repeat(4, minmax(160px, 1fr)); } }
@media (max-width: 860px) { .cover-grid{ grid-template-columns: repeat(3, minmax(160px, 1fr)); } }
@media (max-width: 640px) { .cover-grid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); } }
@media (max-width: 420px) { .cover-grid{ grid-template-columns: 1fr; } }

/* Tile */
.cover {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #f3f3f3;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  text-decoration: none;
}

/* Lock to 480x768 ratio (5:8) */
.cover::before {
  content: "";
  display: block;
  aspect-ratio: 500 / 900; /* 5 / 8  768*/
}

/* Image fills the tile */
.cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* use 'contain' if you never want cropping or 'cover' for cropping */
  transition: transform .4s ease;
  display: block;
}

/* Keyboard focus */
.cover:focus-visible {
  outline: 3px solid rgba(0,0,0,0.35);
  outline-offset: 3px;
}

/* Optional hover */
.cover:hover img {
  transform: scale(1.03);
  transition: transform 180ms ease;
}