#productFamilyOverview{
    margin-top: 90px;
    margin-bottom: 10rem;
}
#productFamilyOverviewGrid{
    width : 60%;
    position:relative;
    left : 21%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 80px;
    column-gap: 10%;
    text-align: left;
}

.productHeroImg{
    width: 100%
}

.productTitle{
    margin-bottom: 1rem;  
    color: #888B8D;
    text-align: left;
    font: normal normal 500 30px/38px Montserrat;
    text-transform: uppercase;   
    margin-top: 15px;   
}
.productBlurb{
    font: normal normal normal 13px/26px Montserrat;
    letter-spacing: 0px;
    color: #5F5F5F;
    opacity: 1;    
}


/*------------------------------------------------------------------------------------------------*\
| xs breakpoint
\*------------------------------------------------------------------------------------------------*/

@media (max-width: 575px) {

    #productFamilyOverviewGrid{
        width : 80%;
        left : 10%;
        grid-template-columns: 1fr;
        row-gap: 80px;
    }
}
 
/*------------------------------------------------------------------------------------------------*\
| sm breakpoint
\*------------------------------------------------------------------------------------------------*/
@media (min-width: 576px) and (max-width: 767px) {

    #productFamilyOverviewGrid{
        width : 80%;
        left : 10%;
        grid-template-columns: 1fr;
        row-gap : 80px;
    }
}

/*------------------------------------------------------------------------------------------------*\
| md breakpoint
\*------------------------------------------------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 991px)  {


    #productFamilyOverviewGrid{
        width : 65%;
        left : 17.5%;
        grid-template-columns: 1fr;
        row-gap : 80px;
    }
}

/*------------------------------------------------------------------------------------------------*\
| lg breakpoint
\*------------------------------------------------------------------------------------------------*/
@media (min-width: 992px) and (max-width: 1199px)  {

    #productFamilyOverviewGrid{
        width : 90%;
        left : 5%;
    }
}

/*------------------------------------------------------------------------------------------------*\
| xl breakpoint
\*------------------------------------------------------------------------------------------------*/
@media(min-width: 1200px) and (max-width: 1560px){


    #productFamilyOverviewGrid{
        width : 70%;
        left : 15%;
    }
}

/*------------------------------------------------------------------------------------------------*\
|xxl breakpoint
\*------------------------------------------------------------------------------------------------*/
@media (max-width: 1561px) {

}