.portfolio-showcase {
  --showcase-ink: #0b0a08;
  --showcase-paper: #f4ede1;
  --showcase-accent: #f25532;
  background: var(--showcase-paper) !important;
  color: var(--showcase-ink);
  padding: clamp(80px, 7vw, 120px) 0 !important;
}

.portfolio-showcase__header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 470px) !important;
  gap: clamp(48px, 8vw, 140px) !important;
  align-items: end !important;
  margin: 0 0 clamp(42px, 4vw, 68px) !important;
}

.portfolio-showcase__heading h2 { color: var(--showcase-ink) !important; }
.portfolio-showcase__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.25vw, 22px); }

.portfolio-card {
  position: relative;
  isolation: isolate;
  display: block;
  min-width: 0;
  min-height: clamp(430px, 32vw, 550px);
  overflow: hidden;
  border-radius: 26px;
  background: #15120f;
  color: #fff;
  text-decoration: none;
}

.portfolio-card__media,
.portfolio-card__shade,
.portfolio-card__body { position: absolute; inset: 0; }
.portfolio-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1.015); transition: transform .65s cubic-bezier(.2, .7, .2, 1); }
.portfolio-card__shade { z-index: 1; background: linear-gradient(180deg, rgba(6, 5, 4, .3) 0%, rgba(6, 5, 4, .11) 36%, rgba(6, 5, 4, .91) 76%, rgba(6, 5, 4, .98) 100%); }
.portfolio-card__body { z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 2.4vw, 38px); }
.portfolio-card__meta { margin-bottom: 14px; color: #ff7352; font-size: 13px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.portfolio-card__title { display: block; margin-bottom: clamp(26px, 2.4vw, 40px); color: #fff; font-size: clamp(31px, 2.55vw, 45px); font-weight: 620; line-height: 1.04; letter-spacing: -.045em; }

.portfolio-card__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 58px;
  gap: clamp(14px, 1.6vw, 26px);
  align-items: end;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .28);
}

.portfolio-card__fact { min-width: 0; }
.portfolio-card__fact small { display: block; margin-bottom: 7px; color: rgba(255, 255, 255, .53); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.portfolio-card__fact b { display: block; color: #fff; font-size: 13px; font-weight: 560; line-height: 1.35; }
.portfolio-card:hover .portfolio-card__media img { transform: scale(1.06); }

@media (max-width: 1180px) {
  .portfolio-showcase__header { grid-template-columns: minmax(0, 1fr) 360px !important; gap: 42px !important; }
  .portfolio-card { min-height: 460px; }
  .portfolio-card__footer { grid-template-columns: minmax(0, 1fr) 54px; }
  .portfolio-card__fact:nth-child(2) { display: none; }
}

@media (max-width: 900px) {
  .portfolio-showcase__header { grid-template-columns: 1fr !important; gap: 28px !important; }
  .portfolio-showcase__aside { max-width: 620px; }
  .portfolio-showcase__grid { grid-template-columns: 1fr; }
  .portfolio-card { min-height: min(600px, 78vw); }
}

@media (max-width: 600px) {
  .portfolio-showcase { padding: 66px 0 !important; }
  .portfolio-card { min-height: 460px; border-radius: 20px; }
  .portfolio-card__body { padding: 24px; }
}