.modal{background-color:transparent;border:0;padding:20px;transition:all .3s ease-in-out}.modal[aria-state=closed]{opacity:0}.modal[aria-state=open]{opacity:1}.modal[aria-state=closed]::backdrop{background-color:transparent}.modal[aria-state=open]::backdrop{background-color:rgba(0,0,0,.3)}.modal__wrapper{background-color:#fff;border-radius:4px;box-shadow:0 4px 10px rgba(0,0,0,.2);height:707px;max-width:100%;padding:20px;position:relative;width:910px}.modal__close{--size:28px;aspect-ratio:1;background:#000;border:0;border-radius:50%;color:#fff;cursor:pointer;display:grid;font-weight:700;place-items:center;position:absolute;right:calc(var(--size)/2*-1);text-align:center;top:calc(var(--size)/2*-1);width:var(--size)}