/* A shared frame for five distinct digital identities. */
.portfolio-sites-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(2rem,3.5vw,3.5rem) clamp(1rem,2vw,2rem);
  max-width:1680px;
  margin-inline:auto;
}
.portfolio-site {
  grid-column:span 2;
  display:flex;
  min-width:0;
  scroll-margin-top:7.5rem;
}
.portfolio-site:nth-child(-n+2) { grid-column:span 3; }
.portfolio-site__link {
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  color:#f1edf4;
  text-decoration:none;
}
.portfolio-site__cover {
  display:block;
  width:100%;
  aspect-ratio:4/3;
  margin:0;
  overflow:hidden;
  background:#111019;
  border:1px solid #cab5dd30;
  box-shadow:0 1.2rem 3rem #02030966;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.portfolio-site__cover img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:none;
}
.portfolio-site__body {
  display:flex;
  flex:1;
  flex-direction:column;
  padding:1.25rem .1rem 1.5rem;
  border-bottom:1px solid #c7b4d72e;
}
.portfolio-site__eyebrow {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin:0 0 .55rem;
  color:#bcb2c8;
  font:450 .6875rem/1.5 var(--ui);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.portfolio-site__eyebrow > span:last-child { font-variant-numeric:tabular-nums; }
.gmx-edition .portfolio-site__title {
  margin:0 0 .7rem;
  color:#f1edf4;
  font-size:clamp(1.5rem,2.2vw,2.65rem);
  font-weight:450;
  line-height:1.12;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.portfolio-site__description {
  max-width:32rem;
  margin:0;
  color:#c2b9ca;
  font:400 .875rem/1.65 var(--ui);
}
.portfolio-site__cta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:auto;
  padding-top:1.35rem;
  color:#dfc9f1;
  font:500 .8125rem/1.5 var(--ui);
}
.portfolio-site__cta > span:last-child { font-size:1.15rem; transition:transform .3s ease; }
.portfolio-site__link:hover .portfolio-site__cover,
.portfolio-site__link:focus-visible .portfolio-site__cover {
  border-color:#d7b4ee99;
  box-shadow:0 1.2rem 3rem #02030966,inset 0 0 0 1px #d7b4ee22;
}
.portfolio-site__link:hover .portfolio-site__cta > span:last-child,
.portfolio-site__link:focus-visible .portfolio-site__cta > span:last-child { transform:translate(2px,-2px); }
.gmx-edition .portfolio-site__link:focus-visible { outline:2px solid #e3c8ff; outline-offset:6px; }
.portfolio-sites-sr {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@media(max-width:760px) {
  .portfolio-sites-grid { grid-template-columns:minmax(0,1fr); gap:2.25rem; }
  .portfolio-site,.portfolio-site:nth-child(-n+2) { grid-column:1; }
  .gmx-edition .portfolio-site__title { font-size:clamp(1.65rem,6.3vw,2.3rem); }
  .portfolio-site__body { padding-top:1rem; }
}
@media(prefers-reduced-motion:reduce) {
  .portfolio-site__cover,.portfolio-site__cta > span:last-child { transition:none; }
  .portfolio-site__link:hover .portfolio-site__cta > span:last-child,
  .portfolio-site__link:focus-visible .portfolio-site__cta > span:last-child { transform:none; }
}