.modal:where(.astro-pkabmrrv){width:100%;height:100dvh;height:100vh;z-index:var(--z-modal);transition:opacity 0.3s ease,visibility 0.3s ease;position:fixed;top:50%;left:50%;translate:-50% -50%;&.is-shown{opacity:1;visibility:visible}&:not(.is-shown){opacity:0;visibility:hidden}&::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--surface-primary);opacity:0.8;z-index:-1}}:where(.modal):where(.astro-pkabmrrv){.inner { --w: calc((343 / var(--comp-w)) * 100%); --pad-y: min(calc(var(--vh) * 24), calc(var(--vw) * 24)); width: 100%; position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; grid-template: "button" max-content "." var(--pad-y) "video" max-content / var(--w); justify-content: center; pointer-events: none; * { pointer-events: auto; } @media screen and (min-width: 768px) { --w: calc((1010 / var(--comp-w)) * 100%); --pad-y: 0; } } .close-button { --button-width: 30; grid-area: button; display: block; position: relative; width: calc(var(--vw) * var(--button-width)); height: auto; aspect-ratio: 1/1; justify-self: end; cursor: pointer; @media screen and (min-width: 768px) { --button-width: 60; position: absolute; top: 0; right: 0; translate: calc(var(--vw) * 30 + 100%); } .bar { display: block; width: calc((var(--vw) * var(--button-width)) * 1.414213562); height: 2px; transition: transform 0.3s var(--ease-in-out-quart), background-color 0.3s var(--ease-in-out-quart); position: absolute; top: 50%; left: 50%; translate: -50% -50%; &:first-child { rotate: 45deg; } &:last-child { rotate: -45deg; } } } .video-wrapper {pointer-events: auto; grid-area: video; width: 100%; aspect-ratio: 16/9;}}