
.v63-project-visual {
  min-height: 0;
  aspect-ratio: var(--v64-desktop-aspect, 16 / 10);
}

.v62-project[data-layout='large'] .v63-project-visual,
.v62-project[data-layout='tall'] .v63-project-visual {
  min-height: 0;
}

.v63-project-visual .v63-desktop-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}


.v64-mobile-frame {
  position: absolute;
  z-index: 2;
  top: auto;
  right: clamp(1rem, 4.4vw, 4.5rem);
  bottom: clamp(0.85rem, 3vw, 2.5rem);
  left: auto;
  width: clamp(74px, 17%, 142px);
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border-radius: 0.7rem;
  box-shadow: 0 18px 30px rgba(27, 49, 56, 0.24);
}

.v64-mobile-frame::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 4px #f5eee3;
  content: '';
  pointer-events: none;
}

.v64-mobile-frame .v63-mobile-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 780px) {
  .v64-mobile-frame {
    right: clamp(0.75rem, 4.4vw, 1.25rem);
    bottom: clamp(0.65rem, 3vw, 1rem);
    width: clamp(68px, 23%, 104px);
  }
}

@media (max-width: 900px) {
  .v62-project[data-layout='large'] .v63-project-visual,
  .v62-project[data-layout='tall'] .v63-project-visual {
    min-height: 0;
  }
}

@media (max-width: 780px) {
  .v63-project-visual,
  .v62-project[data-layout='large'] .v63-project-visual,
  .v62-project[data-layout='tall'] .v63-project-visual {
    min-height: 0;
  }
}
