All of my custom text styles in multicolumn change when site is resized to mobile

[Cloven]

Hey there,

All of my custom text styles that I have defined in the base.css for my multicolumns change when the site is resized to mobile. 

Here is a link to the site: 

Some of the styling code:

  /* Target headings inside the specific multicolumn section */
#shopify-section-template--17260799361207__multicolumn .multicolumn-card__info h3.inline-richtext {
  font-family: 'the-seasons', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: #333333 !important; 
  opacity: 1 !important; 
  filter: none !important; 
}

  /* Target paragraphs inside the specific multicolumn section */
#shopify-section-template--17260799361207__multicolumn .multicolumn-card__info .rte p {
  font-family: 'Muli', sans-serif !important; 
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #333333 !important; 
  opacity: 1 !important; 
  filter: none !important; 
}

[WalkYourStyle · Accepted solution]

There are 2 ways to fix this:
1st Way:

Move the styling code at the top of the 'base.css' file

2nd Way:

Add the styling code inside the 'theme.liquid' file before the closing head tag '</head>' in this format:

<style>
  /* Target headings inside the specific multicolumn section */
  #shopify-section-template--17260799361207__multicolumn .multicolumn-card__info h3.inline-richtext {
    font-family: 'the-seasons', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: #333333 !important; 
    opacity: 1 !important; 
    filter: none !important; 
  }

  /* Target paragraphs inside the specific multicolumn section */
  #shopify-section-template--17260799361207__multicolumn .multicolumn-card__info .rte p {
    font-family: 'Muli', sans-serif !important; 
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #333333 !important; 
    opacity: 1 !important; 
    filter: none !important; 
  }
</style>

[WalkYourStyle · Accepted solution]

There are 2 ways to fix this:
1st Way:

Move the styling code at the top of the 'base.css' file

2nd Way:

Add the styling code inside the 'theme.liquid' file before the closing head tag '</head>' in this format:

<style>
  /* Target headings inside the specific multicolumn section */
  #shopify-section-template--17260799361207__multicolumn .multicolumn-card__info h3.inline-richtext {
    font-family: 'the-seasons', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: #333333 !important; 
    opacity: 1 !important; 
    filter: none !important; 
  }

  /* Target paragraphs inside the specific multicolumn section */
  #shopify-section-template--17260799361207__multicolumn .multicolumn-card__info .rte p {
    font-family: 'Muli', sans-serif !important; 
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #333333 !important; 
    opacity: 1 !important; 
    filter: none !important; 
  }
</style>

[Cloven · Accepted solution]

Amazing thank you!! Moving it to theme.liquid worked the best.