html { position: relative }
.popup-global-wrapper { background: rgba(0,0,0,0.7); text-align: left; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1050; pointer-events: none; opacity: 0; transition: opacity 0.6s ease-in-out; z-index: 999999999 }
.popup-global-wrapper * { box-sizing: border-box; }
.popup-global-wrapper.open { pointer-events: auto; opacity: 1; }
.popup-wrapper > div { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; background: #272727; z-index: 1050; }
.popup-wrapper > div > div { width: 600px; aspect-ratio: 1; overflow: hidden; }
.popup-wrapper > div > div > .popup-close { position: absolute; cursor: pointer; right: 0; top: -1px; z-index: 110; width: 40px; height: 40px; background: var(--primary-color); }
.popup-wrapper > div > div > .popup-close > svg { width: 14px; height: 14px; fill: #FFF; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; }
.popup-wrapper > div > div > .popup-content { display: flex; justify-content: space-between; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.popup-wrapper > div > div > .popup-content .popup-info { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 0 5%; }
.popup-wrapper > div > div > .popup-content .popup-info .popup-title { font-size: 4em; line-height: 1.05em; font-weight: 700; text-transform: uppercase; margin-bottom: 25px; color: var(--primary-color) }
.popup-wrapper > div > div > .popup-content .popup-info .popup-text { font-size: 1.75em; line-height: 1.25em; margin-bottom: 60px; color: #FFF }
.popup-wrapper > div > div > .popup-content .popup-info .popup-link a { display: inline-block; padding: 20px 25px 15px 25px; background-color: var(--primary-color); color: #FFF; text-transform: uppercase; font-size: 1.4em; line-height: 1.05em; font-weight: 700; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.popup-wrapper > div > div > .popup-content .popup-image-container { width: 100%; }
.popup-wrapper > div > div > .popup-content .popup-image-container img { height: 100%; width: 100%; object-fit: cover; }
.popup-wrapper .popup-image-container .popup-image { width: 100% }
.popup-link-wrapper { display: block; }

@media (pointer:fine) {
    .popup-wrapper > div > div > .popup-content .popup-info .popup-link a:hover { background-color: #FFF; color: var(--primary-color); }
}

@media (max-width: 640px) {
    .popup-wrapper > div > div { width: 400px; }
}

@media (max-width: 480px) {
    .popup-wrapper > div > div { width: 340px; }
}

@media (max-height: 600px) {
    @media (orientation: landscape) {
        .popup-wrapper > div > div { width: 350px; }
    }
}