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

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

.fullScreenContainer figure {
    width: 100%
}

.imageGroup figure {
    transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out
}

.imageGroup:hover figure {
    -webkit-filter: brightness(.8);
    filter: brightness(.8)
}

.textGroupContainerSquare:hover .groupItemTitleSquare {
    text-decoration: underline;
    text-underline-offset: 5px;
}


.imageGroupSquare figure {
    transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out
}

.imageGroupSquare:hover figure {
    -webkit-filter: brightness(.8);
    filter: brightness(.8)
}

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

.imageGroup {
    float: right;
    position: relative;
    width: calc((100% / 3) - 2px);
    margin-bottom: 8rem;
    margin-right: 15px;
}

.imageGroupSquare {
    float: right;
    position: relative;
    width: calc((94%/3) - (10px));
    overflow: hidden;
    margin: 0 5px
}

.imageGroupImage,.imageGroupSquareImage {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: all 1.5s ease;
    transition: all 1.5s ease
}

.groupItemTitle,.groupItemTitleSquare {
    font-size: 1.6rem;
    letter-spacing: 1px;
    font-weight: 500;
    position: absolute;
    bottom: 50px
}

.textGroupContainer,.textGroupContainerSquare {
    position: absolute;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    text-transform: uppercase;
    text-align: center;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.imageGroupSquare:hover .imageGroupSquareImage {
    transform: scale(1.1);
}


.textGroupContainer p,.textGroupContainerSquare p {
    color: var(--white)
}

.imageGroup a,.imageGroup img,.imageGroup figure {
    display: block;
    width: 100%
}

.imageGroupSquare a,.imageGroupSquare img,.imageGroupSquare figure {
    display: block;
    width: 100%;
    overflow: hidden
}

.imageGroup:hover .textGroupContainer p:not(.groupItemTitle) {
    -webkit-animation: slide-in-blurred .8s cubic-bezier(.23,1,.32,1) 0.3s both;
    animation: slide-in-blurred .8s cubic-bezier(.23,1,.32,1) 0.3s both
}

.textGroupContainer p:not(.groupItemTitle),.textGroupContainerSquare p:not(.groupItemTitleSquare) {
    margin-top: 58px;
    opacity: 0;
    bottom: 55px;
    position: absolute;
    text-transform: initial;
    display: none;
    border-bottom: 1px solid transparent
}

.textGroupContainerSquare p:not(.groupItemTitleSquare):hover {
    border-bottom: 1px solid
}

.imageGroupSquare:hover .textGroupContainerSquare p:not(.groupItemTitleSquare) {
    -webkit-animation: slide-in-blurred .1s cubic-bezier(.23,1,.32,1) 0.1s both;
    animation: slide-in-blurred 0.1s cubic-bezier(.23,1,.32,1) 0.1s both
}

.leftMargin {
    margin-left: calc(3% + 5px);
}

.rightMargin {
    margin-right: calc(3% + 5px);
}

@-webkit-keyframes slide-in-blurred {
    0% {
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0
    }

    100% {
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1
    }
}

@keyframes slide-in-blurred {
    0% {
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0
    }

    100% {
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1
    }
}

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

            

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

    .imageGroupContainer {
        grid-template-columns: repeat(1,1fr);
        margin-bottom: 20px
    }

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

    .fullScreenContainer {
        justify-content: center
    }

    .fullImgTitle {
        right: unset
    }

    .imageGroup {
        width: 100%
    }

    .imageGroup {
        margin-bottom: 3px;
        margin-right: 0px !important;
    }

    .imageGroupSquare {
        width: 100%;
        margin-bottom: 0
    }
            .imageGroup:last-child {
    display: none;
}

    .imageGroupImage,.imageGroupSquareImage {
        position: relative;
        width: 100%;
        height: auto;
        background-repeat: no-repeat;
        background-size: cover
    }

    .imageGroupImage {
        height: 58vh
    }

    .groupItemTitle,.groupItemTitleSquare {
        bottom: 50%;
        display: block;
        -webkit-animation: slide-in-blurred 2.7s cubic-bezier(.23,1,.32,1) 0.3s both;
        animation: slide-in-blurred 2.7s cubic-bezier(.23,1,.32,1) 0.3s both;
        font-size: 1.8rem;
        text-transform: initial
    }

    .textGroupContainer p:not(.groupItemTitle) {
        bottom: unset;
        -webkit-animation: slide-in-blurred 2.8s cubic-bezier(.23,1,.32,1) 0.3s both;
        animation: slide-in-blurred 2.8s cubic-bezier(.23,1,.32,1) 0.3s both
    }

    .textGroupContainerSquare p:not(.groupItemTitleSquare) {
        bottom: unset;
        -webkit-animation: slide-in-blurred 2.2s cubic-bezier(.23,1,.32,1) 0.3s both;
        animation: slide-in-blurred 2.2s cubic-bezier(.23,1,.32,1) 0.3s both
    }

    .imageGroup:hover .imageGroupImage {
        -webkit-filter: unset;
        filter: unset
    }

    .imageGroupSquare.rightMargin,.imageGroupSquare {
        margin: 0 5vw 5vw;
        width: 90vw;
    }

    .imageGroupSquare:hover .imageGroupSquareImage {
        -webkit-filter: unset;
        filter: unset
    }

    .imageGroupImage {
        -webkit-filter: brightness(80%);
        filter: brightness(80%)
    }

    .imageGroupSquareImage {
        -webkit-filter: brightness(80%);
        filter: brightness(80%)
    }
}