/* Full screenshots inside the template's existing media frames. */
.project-shot { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .65rem; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: .75rem; border: 1px solid #ffffff24; border-radius: 1rem; background: #101d36; color: #fff; cursor: zoom-in; text-decoration: none; }
.project-shot img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; border-radius: .4rem; }
.project-shot__hint { justify-self: end; font-size: .8125rem; line-height: 1.25; color: #d9e5ff; }
.project-shot:hover .project-shot__hint { color: #fff; text-decoration: underline; }
.project-shot:focus-visible { outline: 3px solid #68a3ff; outline-offset: 4px; }
#hero .hero__media { top: 18%; bottom: 18%; left: 50%; right: var(--space-1); z-index: 3; overflow: visible; mask-image: none; }
#hero .hero__media .project-shot img { object-fit: contain; object-position: center; animation: none; }
#rooms .rooms__place { background: linear-gradient(145deg, #101d36, #1d48a4); }
#rooms .rooms__place::after { background: none; }
#rooms .rooms__place .project-shot { position: absolute; z-index: 1; inset: 3.5rem .75rem 6rem; width: auto; height: auto; padding: .5rem; border-radius: .75rem; }
#rooms .rooms__place .project-shot img { position: static; width: 100%; height: 100%; object-fit: contain; object-position: center; }
#rooms .rooms__lines { z-index: 0; }
#voices .voices__photo .project-shot img, #contact .contact__photo .project-shot img { object-fit: contain; object-position: center; }
#start .start__window { background: linear-gradient(135deg, #101d36, #193b82); clip-path: none; }
#start .start__window::after { display: none; }
#start .start__window .project-shot { position: absolute; inset: 14% 2rem 14% 49%; width: auto; height: auto; }
#start .start__window .project-shot img { object-fit: contain; object-position: center; }
#start .start__copy { pointer-events: none; }
#start .start__copy a { pointer-events: auto; }
@media (max-width: 47.99rem) {
  #hero .hero__media { position: relative; flex: none; order: 2; inset: auto; width: auto; height: clamp(13rem, 65vw, 24rem); aspect-ratio: auto; margin: 0 var(--space-1) 3rem; }
  #hero .hero__copy { flex: 1; }
  #rooms .rooms__place .project-shot { inset-inline: .625rem; }
  #start .start__window { height: 100%; }
  #start .start__window .project-shot { inset: 1rem 1rem auto; height: 12.5rem; }
  #start .start__copy { max-width: none; padding-top: 15rem; }
}