/* Website references: calm virtual browser monitors instead of regular tiles. */
.references-grid-web{
  --monitor-ink:#101b25;
  --monitor-edge:#334552;
  --monitor-cyan:#68cad8;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:auto;
  gap:clamp(20px,2.4vw,38px);
  align-items:stretch;
  padding:clamp(8px,1.5vw,24px) 0 clamp(54px,6vw,96px);
}
.references-grid-web .reference-card{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  height:100%;
  min-height:0;
  padding:clamp(30px,2.5vw,38px) clamp(8px,.75vw,12px) 0;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(104,202,216,.3);
  border-radius:clamp(14px,1.5vw,22px);
  background:linear-gradient(145deg,#40515e,#172530 16%,#0a1118 100%);
  box-shadow:0 26px 44px rgba(8,17,25,.2),0 6px 0 #091018,0 7px 0 1px rgba(104,202,216,.16) inset;
  transition:transform .7s cubic-bezier(.2,.75,.2,1),box-shadow .7s cubic-bezier(.2,.75,.2,1);
}
.references-grid-web .reference-card::before{
  content:"";
  position:absolute;
  z-index:3;
  top:clamp(13px,1.05vw,17px);
  left:clamp(15px,1.3vw,21px);
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff7e73;
  box-shadow:13px 0 #f4c45f,26px 0 #67d3a6;
}
.references-grid-web .reference-card::after{
  position:relative;
  grid-area:1 / 1;
  z-index:1;
  inset:auto;
  background:linear-gradient(180deg,rgba(4,11,16,.05),rgba(4,11,16,.16));
  pointer-events:none;
}
.references-grid-web .reference-card img{
  position:relative;
  grid-area:1 / 1;
  z-index:0;
  inset:auto;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:16 / 9;
  object-fit:contain;
  object-position:center top;
  filter:saturate(.9) contrast(1.02);
  transform:none;
  transform-origin:center top;
  transition:filter .55s ease,transform .75s cubic-bezier(.2,.75,.2,1);
  animation:none;
}
.references-grid-web .reference-card>div{
  position:relative;
  grid-area:2;
  inset:auto;
  z-index:4;
  display:flex;
  flex-direction:column;
  padding:clamp(15px,1.45vw,23px) clamp(16px,1.7vw,28px) clamp(17px,1.6vw,25px);
  min-height:clamp(132px,10vw,170px);
  background:linear-gradient(180deg,rgba(9,16,23,.92),#0c151d 68%);
  border-top:1px solid rgba(142,213,222,.18);
}
.references-grid-web .reference-card p{color:var(--monitor-cyan)}
.references-grid-web .reference-card h3{font-size:clamp(1.25rem,1.7vw,2rem);line-height:1.02;max-width:22ch}
.references-grid-web .reference-card span{margin-top:auto;color:#bdcad0}
.references-grid-web .reference-card:hover{
  z-index:5;
  transform:translateY(-10px);
  box-shadow:0 42px 68px rgba(8,17,25,.32),0 8px 0 #091018,0 7px 0 1px rgba(104,202,216,.28) inset;
}
.references-grid-web .reference-card:hover img{filter:saturate(1.04) contrast(1.03)}
.references-grid-web .reference-card:hover::after{background:linear-gradient(180deg,rgba(4,11,16,0),rgba(4,11,16,.08))}

@keyframes monitor-site-drift{
  0%,15%{object-position:center top}
  82%,100%{object-position:center bottom}
}
@media(max-width:900px){
  .references-grid-web{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:18px}
  .references-grid-web .reference-card{min-height:0}
}
@media(max-width:700px){
  .references .references-grid.references-grid-web .reference-card{height:auto!important;min-height:0!important}
}
@media(max-width:580px){
  .references-grid-web{grid-template-columns:1fr;grid-auto-rows:auto;padding-bottom:55px}
  .references-grid-web .reference-card{height:auto!important;min-height:0!important;transform:none}
  .references-grid-web .reference-card:hover{transform:translateY(-5px)}
}
@media(prefers-reduced-motion:reduce){
  .references-grid-web .reference-card img{animation:none!important}
  .references-grid-web .reference-card,.references-grid-web .reference-card:hover{transform:none;transition:none}
}