/* MN MEDIA · STEP54 · Unterseiten QA / aktuelle Referenzen */

#referenzen.portfolio-list{
  gap:clamp(28px,4vw,54px);
}

#referenzen .project{
  overflow:hidden;
}

#referenzen .project-visual--image{
  position:relative;
  min-height:clamp(330px,34vw,520px);
  padding:0;
  background:#111311;
  align-items:stretch;
}

#referenzen .project-visual--image img{
  display:block;
  width:100%;
  height:100%;
  min-height:inherit;
  object-fit:cover;
  object-position:center top;
  transition:transform .65s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}

#referenzen .project-image-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.24),transparent 28%,transparent 64%,rgba(0,0,0,.44)),
    linear-gradient(90deg,rgba(0,0,0,.12),transparent 50%);
  pointer-events:none;
}

#referenzen .project-type{
  z-index:2;
  color:#fff;
  background:rgba(15,17,16,.76);
  border:1px solid rgba(255,255,255,.14);
  padding:8px 11px;
  backdrop-filter:blur(8px);
}

#referenzen .project-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

#referenzen .project-body h3{
  max-width:13ch;
}

@media (hover:hover) and (pointer:fine){
  #referenzen .project:hover .project-visual--image img{
    transform:scale(1.035);
    filter:saturate(1.04) contrast(1.01);
  }
}

@media (max-width:760px){
  #referenzen .project-visual--image{
    min-height:68vw;
  }
}