vf-hero--excerpt.SCSS

.vf-hero {
  --vf-hero-content-position: 0;
  --vf-hero-content-box-shadow:
    2px 0 3px rgba(0, 0, 0, var(--vf-hero-content-shadow-alpha, 0)),
    -2px 0 3px rgba(0, 0, 0, var(--vf-hero-content-shadow-alpha, 0)),
    0 2px 3px rgba(0, 0, 0, var(--vf-hero-content-shadow-alpha, 0));
  --vf-hero-content-shadow-alpha: .1;
  --vf-hero-heading-bg-color: 1;
  --vf-hero-heading-text-color: 0;

  --vf-hero-text-bg-color: 0;
  --vf-hero-text-bg-color--r: #{red(#18974c)};
  --vf-hero-text-bg-color--g: #{green(#18974c)};
  --vf-hero-text-bg-color--b: #{blue(#18974c)};
  --vf-hero-text-color: 1;
}

.vf-hero__content {

  background-color: #fff;
  background-color: rgba(
      calc( (0 + var(--vf-hero-bg-color) ) * 255),
      calc( (0 + var(--vf-hero-bg-color) ) * 255),
      calc( (0 + var(--vf-hero-bg-color) ) * 255),
      calc( (0 + var(--vf-hero-bg-color) ) * 100)
  );

  box-shadow: 2px 0 3px rgba(0, 0, 0, .1), -2px 0 3px rgba(0, 0, 0, .1), 0 2px 3px rgba(0, 0, 0, .1);
  box-shadow: var(--vf-hero-content-box-shadow);

  bottom: -24%;
  bottom: calc( (0 - var(--vf-hero-content-position) ) * 24% );

  left: 12%;
  left: calc( (0 + var(--vf-hero-content-position) ) * 12% );
}


.vf-hero__heading {
  background-color: rgb(
      calc( (0 + var(--vf-hero-heading-bg-color) ) * 255),
      calc( (0 + var(--vf-hero-heading-bg-color) ) * 255),
      calc( (0 + var(--vf-hero-heading-bg-color) ) * 255)
  );
  color: rgb(
    calc( (0 + var(--vf-hero-heading-text-color) ) * 255),
    calc( (0 + var(--vf-hero-heading-text-color) ) * 255),
    calc( (0 + var(--vf-hero-heading-text-color) ) * 255)
  );
}

.vf-hero__text {
  --vf-hero-text-bg-color--default: calc( var(--vf-hero-text-bg-color) * 255);

  background-color: rgb(
      var(--vf-hero-text-bg-color--r, var(--vf-hero-text-bg-color--default)),
      var(--vf-hero-text-bg-color--g, var(--vf-hero-text-bg-color--default)),
      var(--vf-hero-text-bg-color--b, var(--vf-hero-text-bg-color--default))
  );

  color: rgb(
    calc( (0 + var(--vf-hero-text-color) ) * 255),
    calc( (0 + var(--vf-hero-text-color) ) * 255),
    calc( (0 + var(--vf-hero-text-color) ) * 255)
  );
}