{% set moduleName = 'u4m-course-cards' %}
  {% set cardImageMax = 374 %}
  {% set bgImageMax = 1920 %}
    
  {% include "/broadcom-academy-unified4/modules/partials/u4-module-includes.html" %}

<div class="container layout-">
{% if module.heading || module.subheading || module.subhead_rich_text %}
  <div class="top-wrapper">
    {% if module.heading %}<h2 class="heading"></h2>{% endif %}
    {% if module.subhead_content == 'rich_text' %}
      {% if module.subhead_rich_text %}
        <div class="subheading"></div>
      {% endif %}
    {% else %}
      {% if module.subheading %}
        <p class="subheading"></p>
      {% endif %}
    {% endif %} 
  </div>
 {% endif %}
  
 <div class="resource-cards-wrapper">
    {# RECENT RESOURCES #}
    {% if module.post_feed_type == "recent" %}
      {% set table = hubdb_table_rows(module.resources_table, "&orderBy=-publish_date") %}
      {% set counter = 0 %}
      {% set idArray = [] %}
   
      {% if module.layout_type == "one_card" %}
        {# alt content #}
         <div class="alt-content">
            <div class="text">
              
            </div>
           
            {% set i = 0 %}
           
            {% for row in table %}
              
              {% if i <= 0 %}
            <div class="resource-card">
            
                <div class="image lazy" {% if row.image.url %}data-bg="" {% else %}data-bg=""{% endif %}></div> 
                <div class="content">
                  {% if row.icon.url %}<div class="icon"><img loading="lazy" src="" alt="icon" width="20" height="20"></div>{% endif %}  
             
                  {% for item in row.type %}
                    <span class="type"></span>
                  {% endfor %}  
                  {# <span class="date"></span> #}
                  {% if row.name %}<h3 class="card-heading"></h3>{% endif %}   
                  {% if row.description %}<p class="description"></p>{% endif %}     
                  {% if row.url %}
                    <div class="button-link">
                      <a href=""></a>
                    </div>
                  {% endif %}  
                </div>
             </div>


            {% set i = i + 1 %}
            {% endif %}
            {% endfor %}
          
    
          </div>
          {% if module.text_under_card %}
             <div class="bottom-text"></div>
          {% endif %}
   
      {% elif module.layout_type == "two_cards" %}
        {% for row in table %}
          {% if counter < 2 %}
            {% set counter = counter + 1 %}
            {% do idArray.append(row.hs_id) %}
          {% endif %} 
       {% endfor %}
       <div class="resource-cards-container">
      {# Loop through IDs stored in Array #}
       {% for row in table %}
           {% if row.hs_id is in idArray %}
            
              <div class="resource-card">
              <!---->
                  <div class="image lazy" {% if row.image.url %}data-bg="" {% else %}data-bg=""{% endif %}></div> 
                  <div class="content">
                    {% if row.icon.url %}<div class="icon"><img loading="lazy" src="" alt="icon" width="20" height="20"></div>{% endif %}  
                    {% for item in row.type %}
                      <span class="type"></span>
                    {% endfor %}  
{# <span class="date"></span> #}
                    {% if row.name %}<h3 class="card-heading"></h3>{% endif %}   
                    {% if row.description %}<p class="description"></p>{% endif %}     
                    {% if row.url %}
                      <div class="button-link">
                        <a href=""></a>
                      </div>
                    {% endif %}  
                  </div>
               </div>

         
          {% endif %}
        {% endfor %} 
        </div>
        {% if module.text_under_card %}
            <div class="bottom-text"></div>
        {% endif %}
      {% endif %}


    {# SORT BY TAG #}
    {% elif module.post_feed_type == "tag" %}
  
      {% set table = hubdb_table_rows(module.resources_table, "&orderBy=-publish_date") %}
      {% set counter = 0 %}
      {% set idArray = [] %}
   
      {% if module.layout_type == "one_card" %}
        {# alt content #}
         <div class="alt-content">
            <div class="text">
              
            </div>
      {% for row in table %}
   
        {% if counter < 2 %}
            {% set countArray = [] %}
            {% set count = 0 %}
              
            {% for topic in row.type %}
              {% if module.resource_tag == topic.name|lower|replace(' ','-')  %}
                {% set count = count + 1 %}
                {% do countArray.append(count) %}
                {% do idArray.append(row.hs_id) %}
              {% endif %}
            {% endfor %}

           {% set counter = counter + countArray|length %}

        {% endif %} 
        {% endfor %}
          {# Loop through IDs stored in Array #}
          {% for row in table %}
             {% if row.hs_id is in idArray %}
              <div class="resource-card">
                 <div class="image lazy" {% if row.image.url %}data-bg="" {% else %}data-bg=""{% endif %}></div>
                  <div class="content">
                    {% if row.icon.url %}<div class="icon"><img loading="lazy" src="" alt="icon" width="20" height="20"></div>{% endif %} 
                    <span class="type"></span>
                    {# <span class="date"></span> #}
                    {% if row.name %}<h3 class="card-heading"></h3>{% endif %}  
                    {% if row.description %}<p class="description"></p>{% endif %}      
                    {% if row.url %}
                      <div class="button-link">
                        <a href=""></a>
                      </div>
                    {% endif %}  
                  </div>
               </div>

            {% endif %}

          {% endfor %} 
      
   
         </div>
          {% if module.text_under_card %}
            <div class="bottom-text"></div>
          {% endif %}
   
      {% elif module.layout_type == "two_cards" %}
         {% for row in table %}
   
        {% if counter < 2 %}
            {% set countArray = [] %}
            {% set count = 0 %}
              
            {% for topic in row.type %}
              {% if module.resource_tag == topic.name|lower|replace(' ','-')  %}
                {% set count = count + 1 %}
                {% do countArray.append(count) %}
                {% do idArray.append(row.hs_id) %}
              {% endif %}
            {% endfor %}

           {% set counter = counter + countArray|length %}

        {% endif %} 
        {% endfor %}
        <div class="resource-cards-container">
        {# Loop through IDs stored in Array #}
        {% for row in table %}
             {% if row.hs_id is in idArray %}
                <div class="resource-card">
                 <div class="image lazy" {% if row.image.url %}data-bg="" {% else %}data-bg=""{% endif %}></div>
                  <div class="content">
                    {% if row.icon.url %}<div class="icon"><img loading="lazy" src="" alt="icon" width="20" height="20"></div>{% endif %} 
                    <span class="type"></span>
                    {# <span class="date"></span> #}
                    {% if row.name %}<h3 class="card-heading"></h3>{% endif %}  
                    {% if row.description %}<p class="description"></p>{% endif %}      
                    {% if row.url %}
                      <div class="button-link">
                        <a href=""></a>
                      </div>
                    {% endif %}  
                  </div>
               </div>
            {% endif %}

        {% endfor %}
        </div>
        {% if module.text_under_card %}
            <div class="bottom-text"></div>
        {% endif %}
      {% endif %}
        

  
    {# MANUAL RESOURCES #}
    {% elif module.post_feed_type == "manual" %} 
      {% if module.layout_type == "one_card" %}
        {# alt content #}
         <div class="alt-content">
            <div class="text">
              
            </div>

            {% for row in module.resources %}
              <div class="resource-card">
                <div class="image lazy" {% if row.resource_row.columns.image.url %}data-bg="" {% else %}data-bg=""{% endif %}></div> 
                <div class="content">
                  {% if row.resource_row.columns.icon.url %}<div class="icon"><img loading="lazy" src="https://academy.broadcom.com/hubfs/ESD_FY22_Academy_Resource-Icon_course_new.svg" alt="icon" width="20" height="20"></div>{% else %}<div class="icon"><img loading="lazy" src="https://academy.broadcom.com/hubfs/ESD_FY22_Academy_Resource-Icon_course_new.svg" alt="icon" width="20" height="20"></div>{% endif %}
                  {% for item in row.resource_row.columns.type %}
                      <span class="type"></span>
                  {% endfor %}  
                  {# <span class="date"></span> #}
                  {% if row.resource_row.columns.name %}<h3 class="card-heading"></h3>{% endif %}      
                  {% if row.resource_row.columns.description %}<p class="description"></p>{% endif %}  
                  
                    <div class="button-link">
                      <a href=""></a>
                    </div>
              
                </div>
            </div>

            {% endfor %}
       
        
        </div>
        {% if module.text_under_card %}
            <div class="bottom-text"></div>
        {% endif %}
   
      {% elif module.layout_type == "two_cards" %}
        <div class="resource-cards-container{% if module.enable_multi_table_select %} multi-table{% endif %}">
         {# manual multi-table option #}
         {% if module.enable_multi_table_select %}
           {% for row in module.multiple_table_resources %}
              {% if row.select_hubdb_table == "resources_hubdb" %}
                  <div class="resource-card resource-table">
                  <div class="image lazy" {% if row.resource_row.columns.image.url %}data-bg="" {% else %}data-bg=""{% endif %}></div> 
                  <div class="content">
                    {% if row.resource_row.columns.icon.url %}<div class="icon"><img loading="lazy" src="" alt="icon" width="20" height="20"></div>{% endif %} 
                    {% if row.resource_row.columns.type.name %}<span class="type"></span>{% endif %}
                    {# <span class="date"></span> #}
                    {% if row.resource_row.columns.title %}<h3 class="card-heading"></h3>{% endif %}      
                    {% if row.resource_row.columns.description %}<p class="description"></p>{% endif %}  
                    {% if row.resource_row.columns.url %}
                      <div class="button-link">
                        <a href=""></a>
                      </div>
                    {% endif %}

                  </div>
              </div>
              {% elif row.select_hubdb_table == "courses_hubdb" %}
                <div class="resource-card courses-table">
                  <div class="image lazy" {% if row.course_row.columns.image.url %}data-bg="" {% else %}data-bg=""{% endif %}></div> 
                  <div class="content">
                    {% if row.course_row.columns.icon.url %}<div class="icon"><img loading="lazy" src="" alt="icon" width="20" height="20"></div>{% endif %} 
                    {% for item in row.course_row.columns.type %}
                      <span class="type"></span>
                    {% endfor %}  
{# <span class="date"></span> #}
                    {% if row.course_row.columns.name %}<h3 class="card-heading"></h3>{% endif %}      
                    {% if row.course_row.columns.description %}<p class="description"></p>{% endif %}  
                    {% if row.course_row.columns.url %}
                      <div class="button-link">
                        <a href=""></a>
                      </div>
                    {% endif %}
                  </div>
              </div>
              {% elif row.select_hubdb_table == "catalog_hubdb" %}
               <div class="resource-card catalog-table">
                  <div class="image lazy" {% if row.catalog_row.columns.image.url %}data-bg="" {% else %}data-bg=""{% endif %}></div> 
                  <div class="content">
                    {% if row.catalog_row.columns.icon.url %}<div class="icon"><img loading="lazy" src="" alt="icon" width="20" height="20"></div>{% endif %} 
                    {% for item in row.catalog_row.columns.type %}
                      <span class="type"></span>
                    {% endfor %}  
{# <span class="date"></span> #}
                    {% if row.catalog_row.columns.name %}<h3 class="card-heading"></h3>{% endif %}      
                    {% if row.catalog_row.columns.description %}<p class="description"></p>{% endif %}  
                    {% if row.catalog_row.columns.url %}
                      <div class="button-link">
                        <a href=""></a>
                      </div>
                    {% endif %}
                  </div>
              </div>
              {% endif %}
            
          {% endfor %}
          
          {% else %}
            {# manual 1 table option #}
            {% for row in module.resources %}
                <div class="resource-card">
                    <div class="image lazy" {% if row.resource_row.columns.image.url %}data-bg="" {% else %}data-bg=""{% endif %}></div> 
                    <div class="content">
                      {% if row.resource_row.columns.icon.url %}<div class="icon"><img loading="lazy" src="https://academy.broadcom.com/hubfs/ESD_FY22_Academy_Resource-Icon_course_new.svg" alt="icon" width="20" height="20"></div>{% else %}<div class="icon"><img loading="lazy" src="https://academy.broadcom.com/hubfs/ESD_FY22_Academy_Resource-Icon_course_new.svg" alt="icon" width="20" height="20"></div>{% endif %} 
                      {% for item in row.resource_row.columns.type %}
                        <span class="type"></span>
                      {% endfor %}  
                      {# <span class="date"></span> #}
                      {% if row.resource_row.columns.name %}<h3 class="card-heading"></h3>{% endif %}      
                      {% if row.resource_row.columns.description %}<p class="description"></p>{% endif %}  
                      {% if row.resource_row.columns.url %}
                        <div class="button-link">
                          <a href=""></a>
                        </div>
                      {% endif %}
                    </div>
                </div>
            {% endfor %}
          
        {% endif %} 

        </div>
        {% if module.text_under_card %}
            <div class="bottom-text"></div>
        {% endif %}
      {% endif %}    

    {% endif %}  
    
  </div>  
  </div> 
  </section>

  html {
    font-size: 1px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  /* auto scale down elements on mobile */
  @media (max-width: 580px) {
    html {
      font-size: 1px;
    }
  }
  
  /* auto scale up elements on large displays */
  @media (min-width: 2560px) {
    html {
      font-size: 1px;
    }
  }
  
  section.u4m-course-cards {
    margin: 70rem 0rem;
  }
  section.u4m-course-cards.reverse-text h2.heading {
    color: #fff;
  }
  section.u4m-course-cards .container {
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280rem;
    padding-left: 20rem;
    padding-right: 20rem;
    max-width: 1000rem;
    display: flex;
    flex-direction: column;
  }
  section.u4m-course-cards .container.layout-two_cards .top-wrapper {
    padding: 0rem 10rem;
  }
  @media (max-width: 1024px) {
    section.u4m-course-cards .container.layout-two_cards .top-wrapper {
      padding: 0;
    }
  }
  section.u4m-course-cards .container div.top-wrapper {
    display: flex;
    flex-direction: column;
  }
  @media (max-width: 1024px) {
    section.u4m-course-cards .container div.top-wrapper {
      align-items: center;
    }
  }
  section.u4m-course-cards .container div.top-wrapper h2.heading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 39rem;
    font-weight: bold;
    letter-spacing: 0.25rem;
    margin-bottom: 30rem;
    line-height: 1.2;
    margin: 0 0 30rem;
    color: #1b1d36;
  }
  @media (max-width: 580px) {
    section.u4m-course-cards .container div.top-wrapper h2.heading {
      font-size: 32rem;
      margin-bottom: 20rem;
    }
  }
  @media (max-width: 1024px) {
    section.u4m-course-cards .container div.top-wrapper h2.heading {
      text-align: center;
      margin: 0 0 20rem;
    }
  }
  section.u4m-course-cards .container div.top-wrapper .subheading {
    max-width: 747rem;
    margin: 0 0 34rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 16rem;
    line-height: 1.6;
    letter-spacing: 0.25rem;
    margin-bottom: 20rem;
  }
  @media (max-width: 580px) {
    section.u4m-course-cards .container div.top-wrapper .subheading {
      font-size: 15rem;
    }
  }
  @media (max-width: 1024px) {
    section.u4m-course-cards .container div.top-wrapper .subheading {
      text-align: center;
    }
  }
  section.u4m-course-cards .container div.top-wrapper .subheading p {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 16rem;
    line-height: 1.6;
    letter-spacing: 0.25rem;
    margin-bottom: 20rem;
  }
  @media (max-width: 580px) {
    section.u4m-course-cards .container div.top-wrapper .subheading p {
      font-size: 15rem;
    }
  }
  section.u4m-course-cards .container div.top-wrapper .subheading ul {
    list-style: none;
    padding-left: 20rem;
    position: relative;
    margin-top: 20rem;
    text-align: left;
  }
  section.u4m-course-cards .container div.top-wrapper .subheading ul:last-child {
    margin-bottom: 0;
  }
  section.u4m-course-cards .container div.top-wrapper .subheading ul li {
    margin-bottom: 20rem;
    position: relative;
    padding-left: 28rem;
  }
  section.u4m-course-cards .container div.top-wrapper .subheading ul li:before {
    content: "";
    background-image: url("https://academy.broadcom.com/hubfs/NBM/Academy%2022/checkmark.svg");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    width: 16rem;
    height: 16rem;
    left: 0;
    top: 4rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0;
  }
  @media (max-width: 1024px) {
    section.u4m-course-cards .container div.resource-cards-wrapper {
      flex-direction: column;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content {
    display: flex;
    align-items: flex-start;
  }
  @media (max-width: 1024px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content {
      flex-direction: column;
      align-items: center;
      flex-direction: column;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.text {
    margin-right: 65rem;
    flex: 0 1 50%;
  }
  @media (max-width: 1024px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.text {
      margin-right: 0;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.text p,
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.text ul,
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.text ol,
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.text .b3 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 16rem;
    line-height: 1.6;
    letter-spacing: 0.25rem;
    margin-bottom: 20rem;
    color: #232629;
    letter-spacing: 0;
    line-height: 23px;
  }
  @media (max-width: 580px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.text p,
    section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.text ul,
    section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.text ol,
    section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.text .b3 {
      font-size: 15rem;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.text ul {
    list-style: none;
    padding-left: 20rem;
    position: relative;
    margin-top: 20rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.text ul:last-child {
    margin-bottom: 0;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.text ul li {
    margin-bottom: 20rem;
    position: relative;
    padding-left: 28rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.text ul li:before {
    content: "";
    background-image: url("https://academy.broadcom.com/hubfs/NBM/Academy%2022/checkmark.svg");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    width: 16rem;
    height: 16rem;
    left: 0;
    top: 4rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card {
    margin: 0rem 20rem;
    flex-basis: calc(33.33% - 40rem);
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0;
    background-color: #fff;
    border-radius: 5rem;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    max-width: 468rem;
    margin: 0rem;
    position: relative;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card:hover {
    box-shadow: 2px 1px 30px 1px rgba(67, 86, 100, 0.17) !important;
  }
  @media (max-width: 1024px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card {
      flex-basis: calc(50% - 40rem);
      margin: 0 10rem 30rem;
    }
  }
  @media (max-width: 768px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card {
      flex-basis: 100%;
      width: 100%;
      margin: 0 10rem 30rem;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.image {
    width: 100%;
    height: 50rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    border-radius: 5px;
    position: relative;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.image:before {
    content: "";
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    position: absolute;
    bottom: -10px;
    width: 100%;
    height: 30px;
    border-radius: 0 0 5rem 5rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32rem 24rem 16rem;
    height: calc(100% - 50rem);
    background: #fff;
    border-radius: 5rem;
    position: relative;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .icon {
    background-color: #1b1d36;
    border-radius: 50%;
    border: 2px solid #fff;
    height: 38rem;
    width: 38rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    position: absolute;
    top: -20rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .icon img {
    width: 20rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .type {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14rem;
    line-height: 1.6;
    letter-spacing: 0.35rem;
    margin-bottom: 20rem;
    color: #005c8a;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0;
    line-height: 16px;
    margin: 0 0 5rem;
  }
  @media (max-width: 580px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .type {
      font-size: 14rem;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .card-heading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18rem;
    font-weight: bold;
    letter-spacing: 0.25rem;
    margin-bottom: 30rem;
    line-height: 1.2;
    color: #1b1d36;
    margin: 0;
    text-align: left;
    letter-spacing: 0;
    line-height: 23px;
  }
  @media (max-width: 580px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .card-heading {
      margin-bottom: 18rem;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .description {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14rem;
    line-height: 1.6;
    letter-spacing: 0.35rem;
    margin-bottom: 20rem;
    color: #232629;
    letter-spacing: 0;
    margin: 13rem 0 23rem;
    line-height: 23px;
  }
  @media (max-width: 580px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .description {
      font-size: 14rem;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18rem;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #cc092f;
    margin: 20rem 0;
    cursor: pointer;
    transition: 0.1s ease-in;
    font-size: 14px;
    line-height: 16px;
    margin: auto 0 0 0;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .link:after {
    display: inline-block;
    content: "\f0a9";
    font-family: "Font Awesome 5 Pro";
    margin-left: 5rem;
    width: 9rem;
    height: 7rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .link:hover, section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .link:focus {
    color: #aa0727;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .button-link {
    margin: auto 0 0 0;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .button-link a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18rem;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #cc092f;
    margin: 20rem 0;
    cursor: pointer;
    transition: 0.1s ease-in;
    font-size: 14px;
    line-height: 16px;
    margin: 0 0 20px;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .button-link a:after {
    display: inline-block;
    content: "\f0a9";
    font-family: "Font Awesome 5 Pro";
    margin-left: 5rem;
    width: 9rem;
    height: 7rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .button-link a:hover, section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content .button-link a:focus {
    color: #aa0727;
  }
  @media (max-width: 1024px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card {
      margin: 30rem 0 0;
      max-width: 468rem;
      flex-basis: 100%;
    }
  }
  @media (max-width: 768px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card {
      margin: 30rem 0 0;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card:before {
    content: "";
    background-image: url("https://academy.broadcom.com/hubfs/NBM/Academy%2022/resource-cards-bg-design.svg");
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    bottom: -150rem;
    left: -100rem;
    width: 100%;
    height: 519rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.image {
    height: 72rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.alt-content div.resource-card div.content {
    background-color: #fff;
    border-radius: 5rem;
    height: calc(100% - 72rem);
  }
  section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 16rem;
    line-height: 1.6;
    letter-spacing: 0.25rem;
    margin-bottom: 20rem;
    color: #232629;
    letter-spacing: 0;
    line-height: 23px;
    margin: 20rem 0 0 0;
    width: 100%;
  }
  @media (max-width: 580px) {
    section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text {
      font-size: 15rem;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text p,
  section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text span,
  section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text ul,
  section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text ol,
  section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text .b3 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 16rem;
    line-height: 1.6;
    letter-spacing: 0.25rem;
    margin-bottom: 20rem;
    color: #232629;
    letter-spacing: 0;
    line-height: 23px;
  }
  @media (max-width: 580px) {
    section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text p,
    section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text span,
    section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text ul,
    section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text ol,
    section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text .b3 {
      font-size: 15rem;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text ul {
    list-style: none;
    padding-left: 20rem;
    position: relative;
    margin-top: 20rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text ul:last-child {
    margin-bottom: 0;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text ul li {
    margin-bottom: 20rem;
    position: relative;
    padding-left: 28rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper .bottom-text ul li:before {
    content: "";
    background-image: url("https://academy.broadcom.com/hubfs/NBM/Academy%2022/checkmark.svg");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    width: 16rem;
    height: 16rem;
    left: 0;
    top: 4rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container {
    display: flex;
  }
  @media (max-width: 1024px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container {
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card {
    margin: 0rem 20rem;
    flex-basis: calc(33.33% - 40rem);
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0;
    background-color: #fff;
    border-radius: 5rem;
    display: flex;
    flex-direction: column;
    flex: 0 1 calc(50% - 20rem);
    margin: 10rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card:hover {
    box-shadow: 2px 1px 30px 1px rgba(67, 86, 100, 0.17) !important;
  }
  @media (max-width: 1024px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card {
      flex-basis: calc(50% - 40rem);
      margin: 0 10rem 30rem;
    }
  }
  @media (max-width: 768px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card {
      flex-basis: 100%;
      width: 100%;
      margin: 0 10rem 30rem;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.image {
    width: 100%;
    height: 50rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    border-radius: 5px;
    position: relative;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.image:before {
    content: "";
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    position: absolute;
    bottom: -10px;
    width: 100%;
    height: 30px;
    border-radius: 0 0 5rem 5rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32rem 24rem 16rem;
    height: calc(100% - 50rem);
    background: #fff;
    border-radius: 5rem;
    position: relative;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .icon {
    background-color: #1b1d36;
    border-radius: 50%;
    border: 2px solid #fff;
    height: 38rem;
    width: 38rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    position: absolute;
    top: -20rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .icon img {
    width: 20rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .type {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14rem;
    line-height: 1.6;
    letter-spacing: 0.35rem;
    margin-bottom: 20rem;
    color: #005c8a;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0;
    line-height: 16px;
    margin: 0 0 5rem;
  }
  @media (max-width: 580px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .type {
      font-size: 14rem;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .card-heading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18rem;
    font-weight: bold;
    letter-spacing: 0.25rem;
    margin-bottom: 30rem;
    line-height: 1.2;
    color: #1b1d36;
    margin: 0;
    text-align: left;
    letter-spacing: 0;
    line-height: 23px;
  }
  @media (max-width: 580px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .card-heading {
      margin-bottom: 18rem;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .description {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14rem;
    line-height: 1.6;
    letter-spacing: 0.35rem;
    margin-bottom: 20rem;
    color: #232629;
    letter-spacing: 0;
    margin: 13rem 0 23rem;
    line-height: 23px;
  }
  @media (max-width: 580px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .description {
      font-size: 14rem;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18rem;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #cc092f;
    margin: 20rem 0;
    cursor: pointer;
    transition: 0.1s ease-in;
    font-size: 14px;
    line-height: 16px;
    margin: auto 0 0 0;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .link:after {
    display: inline-block;
    content: "\f0a9";
    font-family: "Font Awesome 5 Pro";
    margin-left: 5rem;
    width: 9rem;
    height: 7rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .link:hover, section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .link:focus {
    color: #aa0727;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .button-link {
    margin: auto 0 0 0;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .button-link a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18rem;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #cc092f;
    margin: 20rem 0;
    cursor: pointer;
    transition: 0.1s ease-in;
    font-size: 14px;
    line-height: 16px;
    margin: 0 0 20px;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .button-link a:after {
    display: inline-block;
    content: "\f0a9";
    font-family: "Font Awesome 5 Pro";
    margin-left: 5rem;
    width: 9rem;
    height: 7rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .button-link a:hover, section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content .button-link a:focus {
    color: #aa0727;
  }
  @media (max-width: 1024px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card {
      margin: 30rem 0 0;
      max-width: 468rem;
      flex-basis: 100%;
    }
  }
  @media (max-width: 768px) {
    section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card {
      max-width: 468rem;
      flex-basis: 100%;
      width: 100%;
      margin: 30rem 0 0;
    }
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.image {
    height: 72rem;
  }
  section.u4m-course-cards .container div.resource-cards-wrapper div.resource-cards-container div.resource-card div.content {
    background-color: #fff;
    border-radius: 5rem;
    height: calc(100% - 72rem);
  }