/* Front grid */
.nd-grid{
  --nd-gap: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nd-gap);
}

@media (max-width: 1024px){
  .nd-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .nd-grid{ grid-template-columns: 1fr; }
}

/* Card */
.nd-card{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius: 26px;
  text-decoration:none;
  transform: translateZ(0);
}

.nd-media{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  background: #0a0f1f;
}

.nd-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.02) contrast(1.02);
  transform: scale(1.001);
}

.nd-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 100%);
  opacity: 1;
  transition: opacity .25s ease, transform .25s ease;
}

/* Title */
.nd-title{
  position:absolute;
  left:22px;
  bottom:22px;
  right:22px;
  color:#fff;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 36px);
  line-height: 1.05;
  text-shadow: 0 10px 24px rgba(0,0,0,.45);
  z-index: 2;
}

/* Hover */
@media (hover:hover){
  .nd-card:hover .nd-overlay{ opacity: .92; }
  .nd-card:hover .nd-img{ transform: scale(1.03); transition: transform .35s ease; }
}

/* Focus */
.nd-card:focus{
  outline: none;
}
.nd-card:focus-visible{
  box-shadow: 0 0 0 3px rgba(0, 183, 255, .45);
}