/* === Custom Block Styling === */
.servicesGrid__wrapper{
    padding-bottom: 64px;
}
.servicesGrid__headerWrapper{
    padding-bottom: 64px;
    padding-top: 64px;
}
.servicesGrid__header{
    text-align: center;
    font-size: var(--FC-font-size-90);
}
.servicesGrid__item{
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 25%;
    width: 100%;
    height: 300px;
}

.servicesGrid__overlay{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--FC-white);
    opacity: 50%;
    transition: .5s;
}

.servicesGrid__contentWrapper{
    width: 100%;
    height: 100%;
}
.servicesGrid__item:hover .servicesGrid__overlay, .servicesGrid__item:focus .servicesGrid__overlay{
    transform: scale(.7);
}

.servicesGrid__image img{
    position: absolute;
    left: 0;
    width: 100%;
    height: 300px;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
}

.servicesGrid__title{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.servicesGrid__title h2{
    font-size: 24px;
    font-family: "Outfit";
    font-weight: 500;
}

@media screen and (max-width: 992.98px){
    .servicesGrid__item{
        max-width: 33.33%;
    }
}

@media screen and (max-width: 768.98px){
    .servicesGrid__item{
        max-width: 50%
    }
}

@media screen and (max-width: 390.98px){
    .servicesGrid__item{
        max-width: 100%;
    }
}