/* Portfolio cards use locally stored project visuals, not placeholder stock files. */
.portfolio-visual { background-position: center; background-repeat: no-repeat; }

.container-case {
  background-color: #d7ff39;
  background-image: linear-gradient(90deg, #d7ff39 0%, #d7ff39 40%, rgba(215, 255, 57, .18) 68%, rgba(215, 255, 57, .03)), url('сайт/assets/generated/feature-spread.webp');
  background-position: left top, right center;
  background-size: cover, 63% auto;
}

.casa-case,
.casa-case.asset-visible {
  background-image: linear-gradient(90deg, rgba(13, 22, 20, .34), rgba(13, 22, 20, .08)), url('casa-alba-real-estatev5/assets/generated/mediterranean-villa.webp');
  background-position: center;
  background-size: cover;
}

.teplo-case,
.teplo-case.asset-visible {
  background-color: #f0d15e;
  background-image: linear-gradient(90deg, #f0d15e 0%, #f0d15e 43%, rgba(240, 209, 94, .13) 69%, rgba(240, 209, 94, .02)), url('teplo-bakery/assets/images/generated/menu-croissant-framed.webp');
  background-position: left top, right center;
  background-size: cover, 54% auto;
}

.uds-case { overflow: hidden; }
.uds-case::after { opacity: .28; }
.uds-preview {
  position: absolute;
  z-index: 1;
  right: 9%;
  top: 20%;
  width: min(38%, 220px);
  aspect-ratio: .82;
  padding: 17px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 17px;
  background: linear-gradient(145deg, #f4f8ff, #dae9ff);
  box-shadow: 11px 13px 0 rgba(55, 115, 242, .72);
  color: #111827;
  transform: rotate(4deg);
}
.uds-preview-bar { display: block; width: 48%; height: 6px; border-radius: 6px; background: #405bed; }
.uds-preview-title { display: block; margin-top: 20%; font: 700 clamp(9px, 1.25vw, 15px)/1.1 var(--sans); }
.uds-preview-stat { display: block; margin-top: 11px; font: 800 clamp(17px, 2.4vw, 28px)/1 var(--sans); letter-spacing: -.06em; }
.uds-preview-chart { display: block; height: 28%; margin-top: 15%; border-radius: 8px; background: linear-gradient(135deg, transparent 0 21%, #5d75f4 22% 25%, transparent 26% 38%, #68d9c5 39% 43%, transparent 44% 57%, #405bed 58% 62%, transparent 63%); }
.uds-preview-card { display: block; height: 16%; margin-top: 9%; border-radius: 8px; background: #f4c75f; }

@media (max-width: 560px) {
  .container-case { background-size: cover, 64% auto; }
  .teplo-case { background-size: cover, 59% auto; }
  .uds-preview { right: 8%; top: 24%; width: 42%; padding: 14px; }
}