/* Final responsive QA overrides: preserve product proportions and touch clarity. */
.portfolio-card img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 225px;
  height: 365px;
  object-fit: contain;
  filter:
    drop-shadow(0 22px 15px rgba(8, 45, 85, .2))
    drop-shadow(0 5px 4px rgba(8, 45, 85, .12));
}

.portfolio-card::before {
  content: "";
  position: absolute;
  top: 4.7rem;
  left: 50%;
  width: 78%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.74) 0%, rgba(255,255,255,.25) 46%, rgba(255,255,255,0) 72%);
  pointer-events: none;
}

.portfolio-card > :not(img) {
  position: relative;
  z-index: 2;
}

.modal-color img {
  width: auto;
  max-width: 245px;
  height: 390px;
  object-fit: contain;
  filter:
    drop-shadow(0 24px 18px rgba(8, 45, 85, .24))
    drop-shadow(0 6px 4px rgba(8, 45, 85, .12));
}

.portfolio-card:active {
  transform: translateY(-2px) scale(.995);
}

@media (max-width: 900px) {
  .portfolio-card img {
    width: auto;
    max-width: 215px;
    height: 350px;
    object-fit: contain;
  }

  .modal-color img {
    width: auto;
    max-width: 185px;
    height: 295px;
    object-fit: contain;
  }
}

@media (max-width: 700px) {
  .portfolio-card img {
    max-width: 190px;
    height: 310px;
  }

  .modal-color img {
    max-width: 145px;
    height: 178px;
  }
}

@media (max-width: 380px) {
  .modal-color img {
    max-width: 128px;
    height: 156px;
  }
}