.turbo {
    position:relative;
    background-color:#f2f2f2;
    padding-block:5rem;
    background-image:url("/images/weblanding.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow:hidden;
    height:30rem;
}

.turbo .container:before {
    content:""; 
    top:0;
    left:0;
    display:block;
    position:absolute;
    background:rgba(0,0,0,0.55);
    width:100%;
    height:30rem;
    pointer-events:none;
    backdrop-filter:blur(5px);
    filter:saturate(50%);
    transition: filter 1.5s, backdrop-filter 1.5s, background 1.5s;
}

.turbo:hover .container:before {
    background:rgba(0,0,0,0.25);
    backdrop-filter:blur(2px);
    filter:saturate(80%);
    transition:filter 2.5s, backdrop-filter 2.5s, background 2.5s;
}


.turbo .container p {
    font-size:1.1rem;
    position:relative;
    color:white;
    z-index:2;
    transition:1s;
}

.turbo:hover .container p {
    position:relative;
    color:rgba(255,255,255,0.45);
    z-index:2;
    transition:1.55s;
}

.callToAction {
    width:50%;
    position:relative;
    color:white;
    z-index:3;
    margin:auto;
    display:flex;
    flex-direction:column;
    margin-top:4rem;
    transition:0.15s;
}
.callToAction a {
    font-size:1.5rem;
}

.turbo:hover .callToAction {
    scale:1.1;
    transition:0.25s;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

@media (min-width:300px){ 
    .turbo {
        height:50rem;

        & .container:before {
            height:50rem;
        }
    }
}

@media (min-width:450px){ 
    .turbo {
        height:55rem;

        & .container:before {
            height:55rem;
        }
    }
}

@media (min-width:768px){ 
    .turbo {
        height:35rem;

        & .container:before {
            height:35rem;
        }
    }
}