.background-heading-section{
    padding: 70px 0;
    @media (min-width: 768px){
        padding: 90px 0;
    }
    @media (min-width: 1024px){
        padding: 110px 0;
    }
    h2{
        font-size: 44px !important;
        line-height: 1 !important;
        color: #e5e5e5 !important;
        font-weight: 700 !important;
        text-align: center !important;
        margin: 0 auto !important;
        @media (min-width: 768px){
            font-size: 80px !important;
            width: 91%;

        }
        @media (min-width: 1024px){
            width: 74%;
            font-size: 101px !important;
        }
        span{
            margin: -20px 30px 0 !important;
            color: #1c1b1b !important;
            display: block !important;
            line-height: 1.2 !important;
            font-size: 24px !important;
            @media (min-width: 768px){
                margin-top: -40px !important;
                font-size: 28px !important;
            }
            @media (min-width: 1024px) {
                font-size: 34px !important;
            }
        }
    }
    .description{
        font-size: 16px;
        line-height: 1.68;
        color: #1c1b1b;
        margin: 20px auto 0;
        @media (min-width: 768px){
            width: 80%;
        }
        @media (min-width: 1024px){
            width: 74%;
        }
    }
    .tiles{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 32px;
        margin: 40px auto 0;
        @media (min-width: 768px){
            flex-direction: row;
            width: 80%;
        }
        @media (min-width: 1024px){
            margin: 60px auto 0;
            width: 60%;
        }
        > div, > a{
            width: 100%;
            @media (min-width: 768px){
                width: calc(50% - 16px);
            }
            .image{
                margin-bottom: 20px;
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: center center;
                overflow: hidden;
                transition: all 0.3s ease-in-out;
                padding-bottom: 56.3%;
                height: 0;
                @media (min-width: 768px){
                    margin-bottom: 25px;
                }
            }
            h3{
                font-size: 19px;
                line-height: 24px;
                color: #002c5f;
                margin: 0;
                text-align: center;
                @media (min-width: 768px){
                    font-size: 22px;
                    line-height: 28px;
                }
            }
        }
        a{
            &:hover, &:active{
                .image{
                    background-size: 105%;
                }
                h3{
                    text-decoration: underline;
                }
            }
        }
    }
}