<div class="recommended-wrapper">
    <div class="heading">
       Your Webinars
    </div>

    <div class="upcoming-webinars-cards-wrapper">
        {% for training_event in training_events.enrolled %}
            <div class="carousel-card">
                {% include "your_cards_training_event" with training_event%}
            </div>
        {% endfor %}
    </div>

</div>

<style>
    .your-course-carousel {
        position: relative;
    }
    .slick-arrow {
        position: absolute;
        top: -30px;
        z-index: 111;
        cursor: pointer;
    }
    .right-arrow {
        margin-left: 30px;
    }
    .slick-dots button {
        display: block;
        width: 10px;
        height: 10px;
        padding: 0;
        border: none;
        border-radius: 1px;
        background: #8878FF;
        text-indent: -9999px;
    }
    .upcoming-webinars-cards-wrapper {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        margin-top: 40px;
        gap: 20px;
    }
    .slick-dots {
        list-style-type: none;
    }
    .slick-dots {
        display: flex;
        justify-content: center;
        margin: 0;
        padding-top: 3rem;
        list-style-type: none;
        gap: 10px;
    }
    .slick-dots li {
        margin: 0 0.25rem;
    }
    .slick-dots li.slick-active button {
        background: #6CF1C9;

    }
</style>

