Switch CSS management for [Varbase Media Hero Slider] from LESS to SCSS with Gulp as the task manager and make use of the (RFS) Responsive Font Size SCSS library

Shifted the Bootstrap breakpoints to work with Bootstrap 4

// Grid breakpoints ( Bootstrap 4 )
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

Bootstrap 4 vs Bootstrap 3

Varbase Media Mapping Bootstrap 3 into Bootstrap 4

Switched BS3 XS max ( < 768px) to BS4 SM max ( <767.98px)

Switched BS3 SM min ( >=768px) to BS4 MD min ( >=768px)

Switched BS3 MD min ( >=992px) to BS4 LG min ( >=992px)

Switched BS3 LG min ( >=1200px) to BS4 XL min ( >=1200px)

Switched Custom Varbase Hero slider media variables of sm to md in Bootstrap 4

// Custom Varbase Hero slider media variables.
// -----------------------------------------------------------------------------

// Text color.
$hero-title-text-color: #fff;
$hero-brief-text-color: #fff;
$hero-link-text-color: #fff;

// Font sizes with responsive sizes.
$hero-xlarge-title-font-size-xs: 3.3rem;
$hero-xlarge-title-font-size-sm: 3.3rem;
$hero-xlarge-title-font-size-md: 57px;
$hero-xlarge-title-font-size-lg: 57px;
$hero-xlarge-title-font-size-xl: 57px;

// Hero content style.
$hero-content-hover-opacity: 0.7;
$hero-content-background-color1: rgb(0,0,0);
$hero-content-background-color2: rgba(0,0,0,0.3);

// Empty hero background color.
$hero-empty-view-background: #e0e0e0;

// Gutter for arrow of navigation.
$hero-arrow-gutter: 10px;

// Height for screen size and less.
$hero-min-height: 300px;
$hero-max-height: 300px;

// For screen size sm and more.
$hero-min-height-sm: 300px;
$hero-max-height-sm: 300px;

// For screen size md and more.
$hero-min-height-md: 600px;
$hero-max-height-md: 600px;

$hero-container-v-padding: 60px;