:root{--modal-color:var(--color-black);--modal-padding-x:clamp(1rem,5vw,4rem);--modal-margin-y:clamp(3rem,5vw,4rem);--modal-background-color:var(--color-white);--modal-backdrop-color:var(--color-black);--modal-width:calc(100% - 2rem);--modal-max-width:45rem;--modal-max-height:90rem;--modal-close-size:1rem;--modal-close-opacity:0.5}.details-modal{transition:var(--transition-fast);background:var(--color-white);background:var(--modal-background-color);box-shadow:var(--shadow);pointer-events:none;position:fixed;z-index:1000;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 2rem);width:var(--modal-width);max-width:45rem;max-width:var(--modal-max-width);max-height:90rem;max-height:var(--modal-max-height);text-align:left;display:flex;flex-direction:column}.details-modal-close{align-items:center;display:flex;height:1rem;height:var(--modal-close-size);width:1rem;width:var(--modal-close-size);justify-content:center;pointer-events:none;position:absolute;right:1rem;top:1rem;opacity:.5;opacity:var(--modal-close-opacity)}.details-modal-close svg{width:100%;height:auto}.details-modal-content{padding-left:clamp(1rem,5vw,4rem);padding-left:var(--modal-padding-x);padding-right:clamp(1rem,5vw,4rem);padding-right:var(--modal-padding-x);margin-top:clamp(3rem,5vw,4rem);margin-top:var(--modal-margin-y);margin-bottom:clamp(3rem,5vw,4rem);margin-bottom:var(--modal-margin-y);pointer-events:all;overflow:auto}.details-modal-overlay{background:var(--color-black);background:var(--modal-backdrop-color);transition:opacity .2s ease-out;pointer-events:none;cursor:pointer;position:fixed;z-index:500;opacity:0;bottom:0;right:0;left:0;top:0}details[open] .details-modal-overlay{pointer-events:all;opacity:.5}details summary{list-style:none}details summary:focus{outline:none}details summary::-webkit-details-marker{display:none}