.ovrl {display: none; background-color: #000; background-color: rgba(0,0,0,0.8); position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 100000000; justify-content: center; align-items: center;  overflow: hidden;}
.ovrl > div {top: 50%; transform: translateY(-50%); position: absolute;}
.ovrl > div > a,
.ovrl > div > .wo-link {display: flex; flex-direction: column; gap: 35px; padding: 100px 30px 30px 30px; background-color: #fff; color: var(--dark); width: calc(100% - 30px); height: auto; justify-content: center; align-items: center;  margin: auto;}
.ovrl > div > a img,
.ovrl > div > .wo-link img {width: 100%; height: auto;}
.ovrl > div > a:hover {color: var(--);}
.ovrl > div > a *,
.ovrl > div > .wo-link * {margin: 0; padding: 0;}
.ovrl > div a img {}
.ovrl > div .popup-btn {position: absolute; top: 30px; right: 45px; padding: 10px 30px; background-color: var(--two); color: var(--one); }
.ovrl > div .popup-btn:hover {background-color: var(--two-dark); cursor: pointer;}
.ovrl > div .popup-btn.icon {background: 0; padding: 0;}
.ovrl > div .popup-btn.icon svg * {fill: var(--two);}
.ovrl > div .popup-btn:hover {background-color: var(--two-dark); cursor: pointer;}
.ovrl > div .popup-btn.icon:hover {background-color: var(--two-dark); cursor: pointer; background: 0; padding: 0;}
.ovrl > div .popup-btn.icon:hover svg * {fill: var(--two-dark);}
.ovrl > div .popup-btn:has(svg) {position: absolute; top: 30px; right: 45px; padding: 0; color: var(--one); background: 0;}
.ovrl > div .popup-btn:has(svg):hover {background: 0;}
.ovrl > div .popup-btn:has(svg) svg * {fill: var(--two);}
.ovrl > div .popup-btn:has(svg):hover svg * {fill: var(--two-dark);}

body.ks-rounding-light .ovrl > div > a,
body.ks-rounding-light .ovrl > div > .ovrl-link {border-radius: 8px;}
body.ks-rounding-strong .ovrl > div > a,
body.ks-rounding-strong .ovrl > div > .ovrl-link {border-radius: 32px;}
body.ks-rounding-light .ovrl > div .popup-btn {border-radius: 8px;}
body.ks-rounding-strong .ovrl > div .popup-btn {border-radius: 32px;}