.portfolio-page .project-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 88px) clamp(20px, 3vw, 44px);
}

.project-card .product-cover {
  aspect-ratio: 3 / 2;
}

.product-cover {
  --cover-base: #151827;
  --cover-light: #33374d;
  --cover-ink: #f7f8fb;
}

.project-card .product-cover,
.case-page .case-cover.product-cover,
html[data-theme=light] .case-page .case-cover.product-cover {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  color: var(--cover-ink);
  background: radial-gradient(ellipse at 64% 30%, var(--cover-light), var(--cover-base) 82%);
}

.case-page .case-cover.product-cover {
  height: clamp(275px, 45svh, 460px);
  margin-bottom: 20px;
}

.cover-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  max-width: 900px;
  margin-inline: auto;
}

.product-cover[data-cover="yumo"] {
  --cover-base: #09215a;
}

.project-card .product-cover[data-cover="yumo"] {
  background: #09215a url("preview-assets/yumo-ux-backdrop.webp") center / cover;
}

.product-cover[data-cover="partner"] { --cover-base: #071b1a; --cover-light: #256256; }
.product-cover[data-cover="crm"] { --cover-base: #0c192f; --cover-light: #204677; }
.product-cover[data-cover="navis"] { --cover-base: #0b2524; --cover-light: #267367; }
.product-cover[data-cover="tkeeper"] { --cover-base: #101b31; --cover-light: #375da2; }
.product-cover[data-cover="exploit"] { --cover-base: #231d1b; --cover-light: #695953; }
.product-cover[data-cover="rps"] { --cover-base: #1f1961; --cover-light: #5c4fc7; }
.product-cover[data-cover="fashion"] { --cover-base: #39142e; --cover-light: #a04c8a; }
.product-cover[data-cover="workflows"] { --cover-base: #1d162c; --cover-light: #594479; }
.product-cover[data-cover="sunrise"] { --cover-base: #29121c; --cover-light: #572336; }
.product-cover[data-cover="meta"] { --cover-base: #151325; --cover-light: #3b3155; }
.product-cover[data-cover="bank"] { --cover-base: #14263e; --cover-light: #365f86; }
.product-cover[data-cover="aim"] { --cover-base: #202331; --cover-light: #494d66; }
.product-cover[data-cover="figma-archive"] { --cover-base: #111823; --cover-light: #23324a; }
.product-cover[data-cover="roadmap"] { --cover-base: #0c0717; --cover-light: #201535; }

.cover-archive-title {
  align-content: center;
  justify-items: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  font-size: clamp(22px, 3.3vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
}

.product-cover .cover-archive-title .icon {
  width: 28px;
  height: 28px;
}

.cover-phones {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
}

.project-card .project-card-art .cover-phones img,
.cover-phones img {
  width: auto;
  height: 86%;
  max-width: 28%;
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 20px 14px #0007);
}

.cover-phones img:first-child { translate: 0 5%; rotate: -7deg; }
.cover-phones img:last-child { translate: 0 4%; rotate: 7deg; }
.cover-phones img:nth-child(2) { z-index: 1; }

.cover-phones.cover-pair { gap: 4%; }
.project-card .project-card-art .cover-pair img,
.cover-pair img {
  max-width: 41%;
  height: 89%;
  border-radius: 10px;
}
.cover-pair img:first-child { translate: 0 4%; rotate: -5deg; }
.cover-pair img:last-child { translate: 0 -4%; rotate: 6deg; }

.cover-web {
  place-items: center;
  max-width: 880px;
}

.cover-web img {
  width: 83%;
  height: auto;
  max-height: 85%;
  object-fit: cover;
  object-position: center 17%;
  border-radius: 9px;
  box-shadow: 0 18px 32px #0008;
  translate: -5% 0;
}

.cover-web img + img {
  position: absolute;
  right: 5%;
  bottom: 7%;
  width: 22%;
  max-height: 79%;
  object-position: top;
  translate: none;
}

.cover-studio {
  overflow: hidden;
}
.cover-studio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-cover .cover-studio {
  max-width: 720px;
}
.case-cover .cover-studio img {
  object-fit: contain;
}

.cover-archive img {
  width: auto;
  max-width: 94%;
  height: 110%;
  object-fit: contain;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.cover-document {
  width: min(86%, 690px);
  max-width: none;
  align-content: center;
  justify-items: stretch;
  gap: clamp(12px, 2vw, 22px);
}

.cover-document-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(15px, 1.75vw, 24px);
  font-weight: 700;
  line-height: 1.15;
}

.cover-document-title img {
  width: clamp(32px, 4vw, 48px);
  height: auto;
  border-radius: 7px;
}

.cover-document dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(7px, 1vw, 12px);
  margin: 0;
}

.cover-document .cover-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cover-document dl > div {
  padding: clamp(9px, 1.45vw, 19px);
  background: #071219ad;
  border-radius: 9px;
}

.cover-document dt { font-size: clamp(12px, 1.65vw, 22px); font-weight: 700; }
.cover-document dd {
  margin: 5px 0 0;
  color: #e0ebf3;
  font-size: clamp(11px, 1.1vw, 15px);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.product-cover[data-cover="workflows"] .cover-document {
  inset-block: 12%;
  width: min(86%, 640px);
  padding: clamp(12px, 2vw, 26px);
  align-content: center;
  border-radius: 12px;
  background: #161321;
}

.product-cover[data-cover="workflows"] .cover-document dt {
  color: #dbcbff;
}

.project-card .project-card-tags li {
  color: var(--text-primary, #f3f3f1);
  background: var(--art-surface, #111113);
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .project-card-link .cover-art {
    transition: transform .45s var(--ease);
  }
  .project-card-link:is(:hover, :focus-visible) .cover-art {
    transform: scale(1.025);
  }
}

@media (max-width: 690px) {
  .portfolio-page .project-grid { grid-template-columns: minmax(0, 1fr); }
  .project-card .product-cover { aspect-ratio: 5 / 4; }
  .cover-document dl > div { padding: 9px; }
}

@media (max-width: 700px) {
  .case-page .case-cover.product-cover { height: clamp(254px, 41svh, 340px); }
}