.fullScreenContainer {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    height: auto;
    overflow: hidden;
    color: var(--base)
}

.square.leftClass .promoColumnImage {
    margin-right: 10px
}

.fullImgTitle {
    position: absolute;
    right: 7%;
    text-transform: uppercase;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--base);
    font-size: 2rem
}

.fullScreenContainer figure {
    width: 100%
}

.fullScreenContainer:hover .fullImgTitle {
    color: #8b8b8b;
    border-bottom: 1px solid #8b8b8b
}

.fullScreenPromo {
    width: 100%;
    display: block
}

.promoWideImage .groupItemTitle {
    font-size: 2.3rem;
    position: relative
}

.promoWideImage:hover .groupItemTitle::after,.imageWithTextGroupContainer:hover .groupItemTitle::after {
    width: calc(100% - 5px);
    left: 2.5px
}

.imageGroupContainer {
    width: 90%;
    margin: 0 auto
}

.promoWideImage .groupItemTitle {
    font-size: 1.4rem;
    color: #000;
    opacity: 1;
    font-size: 1.5rem;
    font-weight: 400;
    text-decoration: underline
}

.promoColumnImage {
    position: relative;
    display: block;
    width: calc(50% - 5px);
    height: 668px;
    float: left;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer
}

.imageWithTextGroupContainer:hover .groupItemTitle {
    -webkit-animation: slide-in-blurred-bottom 1.2s cubic-bezier(.23,1,.32,1) both;
    animation: slide-in-blurred-bottom 1.2s cubic-bezier(.23,1,.32,1) both
}

.imageWithTextGroupContainer:hover .groupItemText {
    -webkit-animation: slide-in-blurred-bottom 1.2s cubic-bezier(.23,1,.32,1) 0.3s both;
    animation: slide-in-blurred-bottom 1.2s cubic-bezier(.23,1,.32,1) 0.3s both
}

@-webkit-keyframes slide-in-blurred-bottom {
    0% {
        -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(.2);
        transform: translateY(1000px) scaleY(2.5) scaleX(.2);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
        transform: translateY(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1
    }
}

@keyframes slide-in-blurred-bottom {
    0% {
        -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(.2);
        transform: translateY(1000px) scaleY(2.5) scaleX(.2);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
        transform: translateY(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1
    }
}

.grayscaleImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.4s ease-out;
    -moz-transition: opacity 0.4s ease-out;
    -webkit-transition: opacity 0.4s ease-out;
    -o-transition: opacity 0.4s ease-out
}

/* .promoWideImage:hover .grayscaleImg,.promoColumnImage:hover .grayscaleImg {
    opacity: 1
}

.promoWideImage:hover .promoImageColumnText,.promoColumnImage:hover .promoImageColumnText {
    color: #58595b
} */

.square .promoColumnImage:hover .groupItemText{
    transition: .5s;  
    opacity: 1;
}

.promoWideImage {
    position: relative;
    float: left;
    width: calc((100% - 40px) / 3);
    height: auto;
    cursor: pointer;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px
}

.promoWideImage.middleClass {
    margin: 0 20px
}

.promoWideImage figure {
    width: 100%
}

.promoWideImage figcaption {
    position: absolute;
    text-transform: uppercase;
    font-size: 2.3rem
}

.promoWideImage img {
    display: block;
    width: 100%;
    -webkit-transition: -webkit-filter 0.5s;
    transition: -webkit-filter 0.5s;
    -o-transition: filter 0.5s;
    transition: filter 0.5s;
    transition: filter 0.5s,-webkit-filter 0.5s
}

.promoImageColumnText {
    position: absolute;
    bottom: 20px;
    height: 20px;
    line-height: 4px;
    left: 20px;
    background-color: #fff;
    color: #555;
    text-align: left;
    font-size: 31px;
    font-weight: 600;
    letter-spacing: 2px;
    transition: color 0.4s ease-out;
    -moz-transition: color 0.4s ease-out;
    -webkit-transition: color 0.4s ease-out;
    -o-transition: color 0.4s ease-out
}

.promoWideImage .promoImageColumnText {
    display: none
}

.bkgHovered {
    opacity: .8
}

.textHovered {
    opacity: 1
}

@media screen and (max-width: 1100px) {
    .promoColumnImage {
        width:100%;
        height: 100vw;
        margin: 0 auto;
        display: block;
        float: none;
        margin-bottom: 7px;
    }

    .promoWideImage {
        width: 100%;
        margin-bottom: 30px
    }

    .promoWideImage img {
        width: 90%;
        margin: 30px auto
    }

    .promoWideImage.middleClass {
        margin: 2px 0;
        margin: unset;
        margin-top: -30px
    }

    .promoImageColumnText {
        font-size: 17px;
        left: 15px;
        bottom: 15px;
        height: 16px
    }

    .promoColumnImage .promoImageColumnText {
        font-size: 25px
    }

    .fullScreenPromo {
        margin-left: 0%;
        width: 100%;
        margin-top: 0
    }

    .fullScreenContainer {
        justify-content: center
    }

    .square .groupItemText {
    /* display: none !important; */
    opacity: 1;
    display: flex;
    justify-content: flex-start;
    margin-left: 0px;
    height: auto;
    margin-top: 3px;
    font-size: 16px;
}

    .fullImgTitle {
        right: unset
    }
}