.image-gallery{--close-margin:3em;--caption-height:7.5em;--control-height:2em;--margin:1em;z-index:2000;width:100dvw;height:100dvh;padding:var(--close-margin)var(--margin)var(--margin);box-sizing:border-box;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000bf;flex-direction:column;justify-content:center;align-items:center;gap:3em;animation:.5s forwards fadeIn;display:flex;position:fixed;inset:0}.image-gallery .close{position:absolute;top:1em;right:2em}.inspace-mode .image-gallery .close{z-index:200;box-sizing:border-box;aspect-ratio:1;width:3rem;height:3rem;top:calc(50% - var(--margin));background-color:#ffffff40;border:1px solid #fff;border-radius:50%;justify-content:center;align-items:center;display:flex;transform:translateY(-50%)}.inspace-mode .image-gallery .close svg{max-width:60%;max-height:60%}.image-gallery .image-wrapper{gap:var(--margin);width:fit-content;min-height:0;max-height:calc(100% - var(--caption-height));flex-direction:column;display:flex;position:relative}.image-gallery .image-wrapper nav{width:100%;transform:translateY(calc(-50% - var(--control-height)/2));justify-content:space-between;align-items:center;display:flex;position:absolute;top:50%}.image-gallery .image-wrapper nav button.disabled{visibility:hidden}.image-gallery .image-wrapper nav button img{width:3rem}.image-gallery .image-wrapper nav button.next{transform:scaleX(-1)}.image-gallery .image-wrapper img{width:100%;height:auto;max-height:calc(100% - var(--control-height));object-fit:contain}.image-gallery .image-wrapper .controls{height:var(--control-height);justify-content:flex-end;gap:.5em;width:100%;display:flex}.image-gallery .image-wrapper .controls .pagination{color:#000;background:#ffffffa6;border-radius:999px;margin-right:auto;padding:.7em 1em;font-size:.7em;box-shadow:inset 0 0 0 1px #ffffffa6}.image-gallery .image-wrapper .controls button{opacity:.3;transition:opacity .3s}.image-gallery .image-wrapper .controls button.active{opacity:1}.image-gallery .caption{width:90%;min-height:var(--caption-height);text-align:center;text-wrap:balance;font-size:.875em;line-height:1.5em}
.hero-image{margin:0 1px;position:sticky;top:0}main.dark-mode .hero-image{margin:0}.hero-image img{object-fit:cover;width:100%;max-width:768px;height:auto;margin-top:0;aspect-ratio:768/435!important}@media (min-width:768px) and (min-height:768px){.hero-image img{margin-top:60px}}@media (max-width:480px) and (min-height:850px){.hero-image img{aspect-ratio:373/338!important}}