/* Position and crop values come directly from each picture in the PPTX. */
.cover{display:flex;align-items:center;justify-content:center}
.ppt-layout{position:relative;width:100%;background:white;flex:none;margin:auto}
.ppt-picture{position:absolute;overflow:hidden}
.ppt-picture img,#detail-images .ppt-picture img{position:absolute;display:block;max-width:none;margin:0;object-fit:fill;transform:none;transition:none;background:none}
.project:hover .ppt-picture img{transform:none}
.cover .ppt-layout{width:min(100%,calc(246px * var(--board-ratio)))}
dialog{width:min(1440px,96vw);max-height:94dvh}
#detail-images>.ppt-layout{width:min(100%,calc((100dvh - 210px) * var(--board-ratio)))}
@media(max-width:700px){.cover .ppt-layout{width:min(100%,calc(226px * var(--board-ratio)))}dialog{padding:16px}.dialog-head h2{font-size:21px}#detail-desc{font-size:14px}#detail-images>.ppt-layout{width:100%}}
.project-wide{grid-column:1/-1}
.cover.social-cover{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:center;padding:16px}
.social-cover img{display:block;width:100%;height:auto;object-fit:contain;transform:none!important}
#detail-images.social-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:16px;margin-top:20px}
#detail-images.social-detail img{width:100%;height:auto;max-width:100%;margin:0;object-fit:contain}
@media(max-width:700px){.cover.social-cover,#detail-images.social-detail{grid-template-columns:1fr;gap:12px}.cover.social-cover{padding:10px}}