Hi new to coding, I have built the following page and cannot figure out how to make the Heading, SubHeading display bold.  Here is my component and style sheet that are not working:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="selTabId" type="string" default="1" />
    <aura:attribute name="PageHeading" type="String" default="Store 158 - A2 Reduced Fat 2% Milk"/>
    <aura:attribute name="PageSubHeading" type="String" default="Product Images"/>
    
    
    <div class="slds-text-heading--large">{!v.PageHeading}</div>
    <br/><br/>
    <div class="slds-text-heading--large ">{!v.PageSubHeading}</div>
    <br/><br/>

</aura:component>

Here is my CSS:

.THIS .slds-text-heading--large {
     font-weight: bold;
    }

I greatly appreciate any help that can be provided.