_popup.scss

.popup {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba($color-black, .8);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    
    @supports (-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem)) {
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    background-color: rgba($color-black, .3);
    }
    
    &__content {
        @include absCenter;

        width: 75%;
        background-color: $color-white;
        box-shadow: 0 2rem 4rem rgba($color-black, .2);
        border-radius: 3px;
        display: table;
        overflow: hidden;
        //opacity: 0;
        transform: translate(-50%, -50%) scale(.25);
        transition: all .5s .2s;

        @include respond(tab-port) {
            text-align: center;
        }
    }

    &__left {
        width: 33.333333%;
        display: table-cell;
        vertical-align: middle;

        @include respond(tab-port) {
            display: table-row;
            width: 100%;
        }
    }

    &__right {
        width: 66.6666667%;
        display: table-cell;
        vertical-align: middle;
        padding: 3rem 5rem;

        @include respond(tab-port) {
            display: block;
            width: 100%;
        }
    }

    &__img {
        display: block;
        width: 100%;

        @include respond(tab-port) {
            display: inline-block;
            width: 50%;
            height: 30rem;
        }
 
        @include respond(phone) {
            height: 20rem;
        }
    }

    &__text {
        font-size: 1.4rem;
        margin-bottom: 4rem;

        -moz-column-count: 2;
        -moz-column-gap: 4rem; //1em = 14px;
        -moz-column-rule: 1px solid $color-grey-light-2;

        column-count: 2;
        column-gap: 4rem; //1em = 14px;
        column-rule: 1px solid $color-grey-light-2;

        -moz-hyphens: auto;
        -ms-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    //OPEN STATES
    &:target {
        opacity: 1;
        visibility: visible;
    }

    &:target &__content {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    &__close {
        &:link,
        &:visited {
            color: $color-grey-dark;
            position: absolute;
            top: 2.5rem;
            right: 2.5rem;
            font-size: 3rem;
            text-decoration: none;
            display: inline-block;
            transition: all .2s;
            line-height: 1;
        }

        &:hover {
            color: $color-primary;
        }
    }
}