.popup-section {
    display: none;
    position: fixed;
    z-index: 3;
    width: 100%;
    height: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
}
  
.popup-section .popup-content {
    background-color: var(--color-paper);
    position: relative;
    width: var(--wide-width);
    margin: 0 auto;
    top: calc( 50vh / 2);
    border-radius: var(--element-border-radius);
    display: flex;
}

.popup-section .popup-text {
    padding: calc(var(--page-padding) * 2);
}
  
.popup-section .popup-section-close {
    color: var(--color-paper);
    position: absolute;
    right: 0;
    top: -4rem;
    font: var(--font-headline-2);
    transition: 0.3s ease all;
}
  
.popup-section .popup-section-close:is(:hover, :active, :focus) {
    color: var(--color-forest-floor);
    cursor: pointer;
}

@media (min-width: 768px) {
    .popup-section .popup-content {
        width: calc(var(--wide-width) / 2);
    }

    .popup-section .popup-section-close {
        right: -1rem;
        top: -4rem;
    }
}

@media (min-width: 1200px) {
    .popup-section .popup-text {
        padding: var(--page-padding);
    }

    .popup-section .popup-section-close {
        top: -5rem;
    }
}