a.school-image-popup { cursor: zoom-in; }
.school-image-dialog-open { overflow: hidden; }
dialog.school-image-dialog {
    box-sizing: border-box;
    border: 0;
    border-radius: 6px;
    padding: 44px 16px 12px;
    margin: auto;
    max-width: 96vw;
    max-height: 96vh;
    background: #fff;
    color: #222;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .35);
}
dialog.school-image-dialog::backdrop { background: rgba(0, 0, 0, .8); }
dialog.school-image-dialog > img {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(96vw - 32px);
    max-height: calc(96vh - 110px);
    margin: auto;
}
dialog.school-image-dialog > .school-image-dialog-close {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 40px;
    height: 40px;
    border: 0;
    padding: 0;
    background: #fff;
    color: #222;
    font: 32px/40px sans-serif;
    cursor: pointer;
}
dialog.school-image-dialog > .school-image-dialog-close:focus-visible { outline: 2px solid #175da8; }
dialog.school-image-dialog > .school-image-dialog-caption { margin: 8px 0 0; text-align: center; overflow-wrap: anywhere; }