CSS in Frontmatter in Mache theme Works but no in Quark Theme

media_order: 'image-1.jpg,image-2.jpg,image-3.jpg'
slides:
    -
        image: image-1.jpg
        heading: 'Text <strong>MESSAGE 1</strong>'
        subheading: 'SUBMESSAGE1'
        button_text: PAGE1
        button_url: 'page1'
    -
        image: image-2.jpg
        heading: 'Text, text <strong>MESSAGE2</strong>'
        subheading: '<strong>SUBMESSAGE2</strong>'
        button_text: PAGE2
        button_url: 'page2'
    -
        image: image-3.jpg
        heading: 'More text <strong>MESSAGE3</strong>'
        subheading: '<strong>SUBMESSAGE3</strong>'
        button_text: PAGE3
        button_url: 'page3'
lightslider:
    slideMove: 1
    slider_type: text
    type_text_vertical_padding: 70px;
    type_text_horizontal_padding: 50px;
    mode: slide
    auto: 'true'
    loop: 'true'
    pager: 'true'
    controls: 'true'
    keyPress: 'true'
    pauseOnHover: 'true'
    adaptiveHeight: 'false'
    vertical: 'false'
    verticalHeight: 500
    thumbItem: 10
    pager: 'true'
    gallery: 'false'
    galleryMargin: 5
    thumbMargin: 5
    enableTouch: 'true'
    enableDrag: 'true'
    pause: 5000
    speed: 1000

{# partials/lightslider.html.twig #}
{# {% extends 'blog.html.twig' %} #}
{% set settings = {} %}

{% if header.lightslider %}
    {% set settings =  header.lightslider %}
{% endif %}

{% if page.header.lightslider %}
    {% set settings = settings|merge(page.header.lightslider) %}
{%  endif %}

{% block lightslider %}
<script type="text/javascript">
  $(document).ready(function() {
    $("#lightSlider").lightSlider({
        item: {{ settings.item|default(1) }},
        slideMove: {{ settings.slideMove|default(3) }},
        slideMargin: {{ settings.slideMargin|default(5) }},
        mode: '{{ settings.mode|default('slide') }}',
        cssEasing: '{{ settings.cssEasing|default('ease') }}',
        easing: '{{ settings.easing|default('') }}',
        speed: {{ settings.speed|default(1000) }},
        auto: {{ settings.auto|default('false') }},
        loop: {{ settings.loop|default('false') }},
        pause: {{ settings.pause|default(2000) }},
        pauseOnHover: {{ settings.pauseOnHover|default(false) }},
        controls: {{ settings.controls|default('true') }},
        keyPress: {{ settings.keyPress|default('true') }},
        adaptiveHeight: {{ settings.adaptiveHeight|default('true') }},
        vertical: {{ settings.vertical|default('false') }},
        verticalHeight: {{ settings.verticalHeight|default(500) }},
        pager: {{ settings.pager|default('true') }},
        gallery: {{ settings.gallery|default('false') }},
        galleryMargin: {{ settings.gallery_margin|default(5) }},
        thumbMargin: {{ settings.gallery_thumb_margin|default(5) }},
        enableTouch: {{ settings.enableTouch|default('true') }},
        enableDrag: {{ settings.enableDrag|default('true') }},

    });
  });
</script>

<style  type="text/css">
.bannerppl {
    width:100%;
}
ul {
    list-style: none outside none;
    padding-left: 0;
    margin-bottom:0;
}
li {
    display: block;
    margin-right: 0px;
    cursor:pointer;
}
img {
    display: block;
    height: auto;
    max-width: 100%;
}
</style>

<div class="bannerppl">
<ul id="lightSlider">
{% for slide in page.header.slides %}
  <li><{% if page.media[slide.image] %}img src="{{ page.media[slide.image].url }}" {% endif %}/>
    <div class="caption" align="center">
       <h1>{{ slide.heading |raw }}</h1>
       <h2>{{ slide.subheading |raw }}</h2>
       <a class="button" href="{{ slide.button_url |raw }}">{{ slide.button_text |raw }}</a>
    </div>
  </li>
 {% endfor %}
</ul>
</div>
{% endblock %}

{% block lightslider %}
    {% include 'partials/lightslider.html.twig' %}
{% endblock %}

{% block lightslider %} {% endblock %}

/* LightSlider Style */

.lightSlider > li {
    position: relative;
}
.caption {
    height: 5vh;
    position: absolute;
    top: 9vw;
    left: 0;
    padding: 20px;
    color: white !important;
    width: 100%;
    text-align: center;
    margin:0 auto;
    font-weight: normal;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px black;
}
.caption p {
    margin:0;
}

.caption h1 {
    color: white;
    font-size: 6.5vh;
}

.caption h2 {
    color: white;
    font-size: 6vh;
}

.caption a {
    text-align: center;
}

.caption strong {color: #6FAE46; text-shadow: 1px 1px 1px black;}

.caption .button {
color: #6fae46;
padding: 2vh;
background: rgba(255, 255, 255, 0);
border: 2px solid #ED145B;
border-radius: 5vw;
box-shadow: 1px 1px 1px #000;
font-size: 2.5vw;
font-weight: 900;
text-shadow: 1px 1px 1px black;
margin: 4vh auto;
text-align: center;
width: 15vw;
height: auto;
}

/* change slightSlider Next-Prev buttons */
.lSAction > a {
    opacity: 1;
 filter: brightness(0) saturate(100%) invert(63%) sepia(57%) saturate(444%) hue-rotate(53deg) brightness(88%) contrast(84%);
}

.lightSlider img {width: 100%;}

@media screen and (max-width: 740px) {
.header-dark.header-transparent #header:not(.scrolled) #header{
 background-color: transparent !important;/* For browsers that do not support gradients */
  background-image: none;
}
.caption {
    height: 2vw;
    top: 1vw;
    left: 0;
    padding: 10px;
}
.caption h1 {
    color: white;
    font-size: 3.5vw;
}
.caption h2 {
    color: white;
    font-size: 3vw;
}
.caption .button {
padding: 0.5vh;
border-radius: 4vw;
margin: 2vw auto;
}

.lightSlider img {width: 100%; height:30%}
}
/* Color Scheme mobil: Cards (Summaries title, and tags, labels and its background*/
.card h5 a:visited {
    color: darkgreen;
}

.card h5 a: {
    color: #6fae46;
}

.tags a:visited {
    color: darkgreen;
}

.tags a: {
    color: #6fae46;
}

.label.label-secondary {
    color: #6fae46;
    background: #e1edfd;
}
/* Color Scheme mobil: general links and buttons*/
a { 
    text-decoration: none;
    color: #6fae46;
    outline: 0;
}

a:visited {
    color: darkgreen;
}

.btn, .button {
    color:  #6fae46;
    border: .05rem solid  #6fae46;;
}
}

/* LightSlider Style */

{% extends 'blog.html.twig' %}