Фоновый градиент наложения изображений на отдельные слайды

Question

Используя fullpage.js, я пытаюсь добавить градиенты наложения к фоновым изображениям на отдельных слайдах, однако, если я добавлю класс к 1 конкретному слайду в разделе, он скопирует наложение на каждый слайд в последовательности.Мне нужно сделать определенные градиенты наложения для отдельных слайдов.

http://www.pulsecreative -clients.com / staging / hogshead / # размещение

<section id="section-4" class="section">
        <div class="hh-upper">
            <a href="#golf"><div class="arrow-up"></div></a>
        </div>

        <div id="specific-slide" class="slide fp-bg s4-s1 desktop-gradient mobile-gradient" style="background-image: url('<?php echo site_url(); ?>/wp-content/themes/bones/images/accom1.png');">
            <div class="hh-content-box">
                <h2>ACCOMMODATIONS</h2>
                <p class="italic">
                    Designed with modern luxury and ultimate comfort, whether at the lodge or in our private cottages, our peaceful accommodations optimize your downtime for maximum restfulness and tranquility.
                </p>
            </div>
        </div>

        <div class="slide fp-bg s4-s2 mobile-gradient" style="background-image: url('<?php echo site_url(); ?>/wp-content/themes/bones/images/accom2.png');">
            <div class="hh-content-box">
                <h2 >THE LODGE</h2>
                <p>Set on the shores of the beautiful and serene *** in ***, The Lodge at *** is warm, welcoming and steeped in the tradition of its Kerry, Ireland past.  The Lodge has woven together luxurious comfort, old world charm and elegant interiors, which is what makes this 48-bedroom Lodge breathtaking and unique.</p>
            </div>
        </div>
        <div class="slide fp-bg s4-s3  mobile-gradient" style="background-image: url('<?php echo site_url(); ?>/wp-content/themes/bones/images/accom3.png');">
            <div class="hh-content-box">
                <h2>COTTAGES</h2>
                <p>In addition to the Lodge, ***** Members will be able to enjoy a home away from home experience in one of our exclusive four-bedroom Cottages.  Members can relax in a private residence for the ultimate escape.  There are five modern, luxurious cottages at the Lodge.
                </p>
            </div>
        </div>
        <div class="hh-downer">
            <a href="#health"><div class="arrow-down"></div></a>
        </div>
    </section>

CSS

.desktop-gradient:before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 50%, rgb(0, 0, 0) 100%) !important;
    opacity: .6;
}

Я пробовал вложениев разделах и с использованием уникального класса.Каким-то образом используя: до или: после копирования на каждый слайд.