Cards

:root{

    --spacerSectionCard: 16px;
    --backgroundCard: linear-gradient(161deg, #FBFBFB 0%, #F5F5F5 100%);
    --backgroundCardIns:linear-gradient(-20deg, #1279ab 0%, #025095 100%);
    --subTextColorCard: #757575;
    --widthCard: 33.3333%;
    --shadowCard: 2px 2px 10px rgba(0, 0, 0, 0.25);


    --cardTitleSectionPageFontSize: 32px;
    --cardTitleSectionPageFontWeight: 500;



    --iconCardColor: #ffffff;
    --iconCardSize: 50px;


    --cardTitleFontSize:22px;
    --cardTitleFontWeight:500;
    --cardTitleMarginTop:8px;
    --cardTitleMarginBottom:8px;
    --cardTitleColor: #4a4a4a;


    --subTextColorCard: #757575;
    --subTextFontSizeCard: 14px;
    --subTextLineHeightCard: normal;

}
            

   <div class="containerAppList">
      <h2 class="titleSectionPage">HR <span>App</span></h2>
      <div class="appList">
         <div class="hr-card">
            <div class="hrCard-icon-container">
               <span class="material-icons">
               account_box
               </span>
            </div>
            <div class="hrCard-content">
               <div class="hrCard-title">
                  Morbi vel elementum felis
               </div>
               <div class="hrCard-description">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget purus eu tellus fermentum interdum. Maecenas nec bibendum neque, at pulvinar nisl.
               </div>
            </div>
         </div>
         <div class="hr-card">
            <div class="hrCard-icon-container">
               <span class="material-icons">
               account_box
               </span>
            </div>
            <div class="hrCard-content">
               <div class="hrCard-title">
                  Morbi vel elementum felis
               </div>
               <div class="hrCard-description">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget purus eu tellus fermentum interdum. Maecenas nec bibendum neque, at pulvinar nisl.
               </div>
            </div>
         </div>
         <div class="hr-card">
            <div class="hrCard-icon-container">
               <span class="material-icons">
               account_box
               </span>
            </div>
            <div class="hrCard-content">
               <div class="hrCard-title">
                  Morbi vel elementum felis
               </div>
               <div class="hrCard-description">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget purus eu tellus fermentum interdum. Maecenas nec bibendum neque, at pulvinar nisl.
               </div>
            </div>
         </div>
         <div class="hr-card">
            <div class="hrCard-icon-container">
               <span class="material-icons">
               account_box
               </span>
            </div>
            <div class="hrCard-content">
               <div class="hrCard-title">
                  Morbi vel elementum felis
               </div>
               <div class="hrCard-description">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget purus eu tellus fermentum interdum. Maecenas nec bibendum neque, at pulvinar nisl.
               </div>
            </div>
         </div>
      </div>
   </div>