/* Featured and technical project cards. */
.work-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:stretch
}
.work-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:570px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  background:rgba(255,255,255,.06);
  box-shadow:0 20px 62px rgba(0,0,0,.17);
  overflow:hidden;
  transition:top .25s,box-shadow .25s,border-color .25s,background .25s;
  top:0
}
.work-card:hover{
  top:-8px;
  border-color:rgba(121,242,192,.28);
  background:rgba(255,255,255,.085);
  box-shadow:0 34px 88px rgba(0,0,0,.3)
}
.work-card:focus-within{
  outline:3px solid rgba(121,242,192,.5);
  outline-offset:4px
}
.work-card__media{
  position:relative;
  margin:15px 15px 0;
  aspect-ratio:16/9;
  border:1px solid rgba(255,255,255,.12);
  border-radius:21px;
  background:#070a10;
  overflow:hidden;
  box-shadow:0 18px 48px rgba(0,0,0,.22)
}
.work-card__media picture,.work-card__media img{
  display:block;
  width:100%;
  height:100%
}
.work-card__media img{
  object-fit:cover;
  image-rendering:auto;
  transform:none;
  filter:none
}
.work-card__body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:12px;
  padding:20px
}
.work-card__label{
  padding-right:54px;
  color:rgba(201,255,233,.82);
  font-family:var(--mono);
  font-size:11px;
  font-weight:900
}
.work-card__title{
  margin:0;
  font-size:26px;
  line-height:1.08;
  letter-spacing:-.04em
}
.work-card__title-link::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1
}
.work-card__summary{
  margin:0;
  color:rgba(248,245,236,.72);
  font-size:16px;
  line-height:1.65
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.tags span{
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:rgba(248,245,236,.68);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:850
}
.work-card__action{
  margin-top:auto;
  padding-top:12px;
  color:var(--green);
  font-weight:900
}
.work-card__corner{
  position:absolute;
  z-index:3;
  top:27px;
  right:27px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(7,10,16,.82);
  color:var(--text);
  backdrop-filter:blur(12px)
}
a.work-card__corner{
  transition:background .2s,color .2s,transform .2s
}
a.work-card__corner:hover{
  transform:translateY(-2px);
  background:rgba(121,242,192,.18);
  color:var(--green)
}
.work-card__corner svg{
  width:22px;
  height:22px
}
.work-card__corner[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  right:0;
  top:52px;
  width:max-content;
  max-width:190px;
  padding:7px 9px;
  border-radius:9px;
  background:#05080d;
  color:var(--text);
  font-family:var(--sans);
  font-size:12px;
  font-weight:750;
  opacity:0;
  pointer-events:none;
  transform:translateY(-3px);
  transition:.18s
}
.work-card__corner:hover::after,.work-card__corner:focus-visible::after{
  opacity:1;
  transform:none
}
.work-card__corner:focus-visible{
  outline:3px solid rgba(121,242,192,.55);
  outline-offset:3px
}
.work-card__corner.lock{
  color:rgba(248,245,236,.65);
  cursor:default
}