CSS media queries lower px below higher or it doesn't catch it correctly in the cascade.

h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}

For a document that looks like this:

the style sheet looks like this:

div.container3 {
height: 10em;
position: relative } /* 1 */
div.container3 p {
margin: 0;
position: absolute; /* 2 */
top: 50%; /* 3 */
transform: translate(0, -50%) } /* 4 */
The essential rules are:


(function ($, Drupal) {
Drupal.behaviors.myModuleBehavior = {
attach: function (context, settings) {
$(window).once().on('load scroll', function () {
// ...
$('.your-class').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
});
}
};
})(jQuery, Drupal);