.flavoursContainer{
    position: relative;
    top: 55px;
    width: 100%;
    overflow: hidden;
    overflow-y: hidden;
}

.blankHeading{
    display: none;
    visibility: hidden;
}

.pageHeading{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(90deg,#ECE3F0, #D3BBDD, #ECE3F0);
}

.heading{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(90deg,#ECE3F0, #D3BBDD, #ECE3F0);
}

.heading2{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(90deg,#ECE3F0,#ECE3F0,#ECE3F0,#D3BBDD,#ECE3F0,#ECE3F0, #ECE3F0);
}

.flavours{
    text-wrap: pretty;
    word-break: break-word;
    text-align: center;
    background-color: #ECE3F0;
}

.sideImagesContainer{
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 30vh;
}

.sideImages{
    width: 100%;
    height: 100%;
    position: relative;
}

.sideImage{
    display:block;
    width: 100%;
    height: 100%; 
    object-fit:cover;
    position: absolute;
    top: 0;
    left: 0
}

.items{
    height: 100%;
    flex-direction: column;
}

.itemFlavours{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.textAlign{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    align-content: center;
    width: 100%;
    flex: 0 0 0;
}

.textAlign>h4{
    /*line-height: 45px;*/
    display: flex;
    justify-content: center;
    flex: 1;
    margin: 0;
    font-size: 1rem;
}

.footer{
    bottom: -55px !important;
}

@media only screen and (min-width: 992px){ 
    .flavoursContainer{
        top: 100px;
    }

    .blankHeading{
        display: unset;
        visibility: unset;
    }

    .items{
        height: 100%;
        flex-direction: row;
    }

    .itemFlavours{
        display: flex;
        flex-direction: column;
        width: 50%;
    }

    .sideImagesContainer{
        width: 50%;
        display: flex;
        flex-direction: row;
        /*flex: 1; */
        height: unset;
    }

    .sideImages{
        width: 100%;
        height: 100%;
        position: relative;
    }

    .sideImage{
        display:block;
        width: 100%;
        height: 100%; 
        object-fit:cover;
        position: absolute;
        top: 0;
        left: 0
    }

    .footer{
        bottom: -100px !important;
    }

    .textAlign>h4{
        font-size: 1.3rem;
    }
    
}