.project-tab-portfolio-grid { column-count: 1; column-gap: 1.5rem; }
@media (min-width: 40rem) {
  .project-tab-portfolio-grid { column-count: 2; }
}
@media (min-width: 80rem) {
  .project-tab-portfolio-grid { column-count: 4; }
}
.project-tab-portfolio-grid .portfolio-card { display: inline-block; position: relative; overflow: hidden; width: 100%; margin: 0px 0px 1.5rem; contain: layout style paint; border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 2rem; background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(241, 245, 249, 0.68)); box-shadow: rgba(15, 23, 42, 0.12) 0px 24px 65px; break-inside: avoid; transform: translateZ(0px); isolation: isolate; transition: none; }
.project-tab-portfolio-grid .portfolio-card:hover { transform: translateZ(0px); box-shadow: rgba(15, 23, 42, 0.12) 0px 24px 65px; border-color: rgba(255, 255, 255, 0.82); }
.project-tab-portfolio-grid .portfolio-card-head { margin-bottom: 0.75rem; }
.project-tab-portfolio-grid .portfolio-card-copy { margin-bottom: 1rem; color: rgb(51, 65, 85); }
.project-tab-portfolio-grid .portfolio-browser-frame { position: relative; border-radius: 1.5rem; border: 1px solid rgba(15, 23, 42, 0.08); background: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)); padding: 0.85rem; transform: translateZ(0px); }
.project-tab-portfolio-grid .portfolio-browser-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.85rem; padding: 0.7rem 0.95rem; border-radius: 999px; background: rgba(226, 232, 240, 0.72); color: rgb(51, 65, 85); font-size: 0.9rem; }
.project-tab-portfolio-grid .portfolio-browser-link { color: inherit; transition: color 180ms; }
.project-tab-portfolio-grid .portfolio-browser-link:hover { color: rgb(15, 23, 42); }
.project-tab-portfolio-grid .portfolio-browser-dots { position: absolute; left: 0.95rem; top: 50%; display: flex; gap: 0.45rem; transform: translateY(-50%); }
.project-tab-portfolio-grid .portfolio-browser-dots span { display: block; width: 0.65rem; height: 0.65rem; border-radius: 999px; background: rgb(203, 213, 225); }
.project-tab-portfolio-grid .portfolio-card-screen { position: relative; overflow: hidden; border-radius: 1.8rem; background: rgb(226, 232, 240); mask-image: -webkit-radial-gradient(center, white, black); }
.project-tab-portfolio-grid .portfolio-card-screen img { display: block; width: 100%; height: auto; }

body .logo-reference-grid--checker > :nth-child(n),
body.logo-design-page .logo-reference-grid--checker > :nth-child(n),
body.index-page-bg .logo-reference-grid--checker > :nth-child(n),
body .logo-reference-grid--checker > :nth-child(n) .flex.aspect-square,
body.logo-design-page .logo-reference-grid--checker > :nth-child(n) .flex.aspect-square,
body.index-page-bg .logo-reference-grid--checker > :nth-child(n) .flex.aspect-square {
  --checker-card-bg: #fff !important;
  --checker-shell-bg: #fff !important;
  --checker-logo-bg: #fff !important;
  --checker-img-filter: none !important;
  background: #fff !important;
  background-color: #fff !important;
}

body .logo-reference-grid--checker > :nth-child(n) img,
body.logo-design-page .logo-reference-grid--checker > :nth-child(n) img,
body.index-page-bg .logo-reference-grid--checker > :nth-child(n) img {
  filter: none !important;
}

body .logo-reference-grid--checker > article:nth-child(n),
body.logo-design-page .logo-reference-grid--checker > article:nth-child(n),
body.index-page-bg .logo-reference-grid--checker > article:nth-child(n),
body .logo-reference-grid--checker > article:nth-child(n) .flex.aspect-square,
body.logo-design-page .logo-reference-grid--checker > article:nth-child(n) .flex.aspect-square,
body.index-page-bg .logo-reference-grid--checker > article:nth-child(n) .flex.aspect-square {
  --checker-card-bg: #fff !important;
  --checker-shell-bg: #fff !important;
  --checker-logo-bg: #fff !important;
  --checker-img-filter: none !important;
  background: #fff !important;
  background-color: #fff !important;
}

body .logo-reference-grid--checker > article:nth-child(n) img,
body.logo-design-page .logo-reference-grid--checker > article:nth-child(n) img,
body.index-page-bg .logo-reference-grid--checker > article:nth-child(n) img {
  filter: none !important;
}

body .logo-reference-grid--checker > article .flex.aspect-square,
body.logo-design-page .logo-reference-grid--checker > article .flex.aspect-square,
body.index-page-bg .logo-reference-grid--checker > article .flex.aspect-square {
  padding: clamp(0.45rem, 2.4vw, 1rem) !important;
}

body .logo-reference-grid--checker > article img,
body.logo-design-page .logo-reference-grid--checker > article img,
body.index-page-bg .logo-reference-grid--checker > article img {
  width: 100% !important;
  height: 100% !important;
  max-width: 96% !important;
  max-height: 96% !important;
  object-fit: contain !important;
}
.portfolio-shell nav[aria-label="Breadcrumbs"] ol, .portfolio-shell nav[aria-label="Breadcrumbs"] ol a, .portfolio-shell nav[aria-label="Breadcrumbs"] ol li { color: rgb(255, 255, 255) !important; -webkit-text-fill-color: rgb(255, 255, 255) !important; }
.portfolio-shell nav[aria-label="Breadcrumbs"] ol .text-slate-300, .portfolio-shell nav[aria-label="Breadcrumbs"] ol .text-slate-500, .portfolio-shell nav[aria-label="Breadcrumbs"] ol .text-slate-900 { color: rgb(255, 255, 255) !important; -webkit-text-fill-color: rgb(255, 255, 255) !important; }
.subpage-breadcrumb-hero h1, .subpage-breadcrumb-hero p, section[aria-labelledby="subpage-breadcrumb-title"] h1, section[aria-labelledby="subpage-breadcrumb-title"] p, .portfolio-shell nav[aria-label="Breadcrumb"] ~ * h1, .portfolio-shell nav[aria-label="Breadcrumb"] ~ * p { color: rgb(0, 0, 0) !important; -webkit-text-fill-color: rgb(0, 0, 0) !important; }
.subpage-breadcrumb-hero h1 *, .subpage-breadcrumb-hero p *, section[aria-labelledby="subpage-breadcrumb-title"] h1 *, section[aria-labelledby="subpage-breadcrumb-title"] p * { color: rgb(0, 0, 0) !important; -webkit-text-fill-color: rgb(0, 0, 0) !important; }