/* To make this readable 
you can find a tiny Prism CSS external file 
in the Advanced Header Code as a  tag. 
It takes up no loading space, 
but it makes this code easier to read. */

<style>
:root {

   /* Defines your extra gold color */
  --color-gold: #b39610;
}

.header__link {

  /* Changes the Menu font to the Heading font*/
  font-family: var(--font-family-heading);


  font-size: 1.25rem; /* Changes the size of the menu text */
}

.hero__text {

   /* Changes the image banner text to fit header fonts and weights */
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-style: var(--font-style-heading);
  text-transform: var(--text-transform-heading);

   /* Dynamically changes the image banner subheader text size based on window width */
  font-size: clamp(0.5rem, 3.5vw, 2.25rem);
  margin-top: 0;
}

.header__link:hover,
.header__icon:hover,
.footer__list-item a:hover,
.footer__social-link:hover {

   /* Add a hover text color for all header and footer icons */
  color: var(--color-gold);
}

.highlight {

   /* Adds the extra color to the selected highlights in the image banner */
  color: var(--color-gold);
}

.hero__container .section-background .section-background__image {

   /* Forces image banners images to behave as expected (fit the box) */
  background-position: left top;
  background-size: contain;
}

.hero__container .hero__inner .container {

   /* Assists in aligning the image banner text */
  padding-right: 0;
}

.hero__content {

   /* Assists in aligning the image banner text */
  text-align: left;
  padding-bottom: 0;
}

.hero__content--center {

   /* Assists in aligning the image banner text */
  margin-right: 10px;
  width: 67%;
  padding-top: 0;
  margin-left: auto;
}

.hero__heading--large {

   /* Dynamically changes the image banner heading text size based on window width */
  font-size: clamp(1rem, 5.5vw, 4rem);
}

.hero__heading {

   /* Dynamically changes the image banner heading line height based on window width  to compensate*/
  line-height: clamp(0.5rem, 4.5vw, 3rem);
}

.hero__cta-container {

   /* Assists in aligning the image banner button */
  margin-top: auto;
  justify-content: left;
  margin-left: 20%;
}

.hero__cta {

   /* Assists in aligning the image banner button */
  flex-basis: auto;
}

.hero__cta a {

   /* adjusts the image banner button's padding for mobile*/
  padding: 6px 18px;
}

@media (min-width: 640px) {
  .hero__content--center {

   /* Assists in aligning the image banner button for desktop */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 640px) {
  .hero__cta-container {

   /* Assists in aligning the image banner button for desktop */
    margin-top: auto;
  }
  .hero__content--center {

   /* Assists in aligning the image banner text for desktop */
    text-align: left;
    margin-right: 0;
  }
  .hero__cta a {

   /* adjusts the image banner button's padding for desktop */
    padding: 16px 28px;
  }
}
</style>

// This script applies 
// a  tag around 
// the text from he image banner 
// that needs to be highlighted. 
// To change the conditions, 
// you can put this code 
// side by side with 
// the current result, 
// and replace the wordings. 
// If you want an additional condition, 
// you can copy paste this code again. 
// Don't hesitate to reach out to me if this needs changing, 
// It's a bit more complex than the CSS