.image-modal{display:none;place-items:center;position:fixed;top:0;left:0;width:100vw;width:100dvw;height:100vh;height:100dvh}.image-modal.open{display:grid;animation-name:backdropFilterModal;animation-duration:1s;animation-fill-mode:forwards}.image-modal>.image-modal-background{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#fff;opacity:0;z-index:-1}.image-modal.open>.image-modal-background{animation-name:opacityModalBackground;animation-duration:1s;animation-fill-mode:forwards}.image-modal>ul.image-modal-buttons{position:absolute;display:flex;flex-direction:row;justify-content:flex-end;gap:1rem;width:90%;left:50%;transform:translateX(-50%);top:0;opacity:0;z-index:1;padding:.25rem 2rem}.image-modal.open>ul.image-modal-buttons{animation-name:displayModalButtons;animation-duration:1s;animation-fill-mode:forwards}.image-modal>ul.image-modal-buttons>li{width:80px;height:40px;display:grid;place-items:center;cursor:pointer}.image-modal>.image-modal-image{display:grid;position:absolute;place-items:center;animation-name:zoomInModal;animation-duration:1s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}.image-modal>.image-modal-image>img{max-width:100%;max-height:100%;animation-name:maxSizeModalImage;animation-duration:1s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}@keyframes backdropFilterModal{0%{backdrop-filter:blur(0)}to{backdrop-filter:blur(3px)}}@keyframes zoomInModal{to{left:0;top:0;width:100%;height:100%}}@keyframes opacityModalBackground{0%{opacity:0}to{opacity:.8}}@keyframes maxSizeModalImage{to{max-width:90%;max-height:90%}}@keyframes displayModalButtons{0%{opacity:0}to{opacity:1}}