<div class="recommended-courses-carousel">
    {% if courses.featured.any? %}
        {% for course in courses.featured %}
            {% include 'homepage_recommended_course_card' with course %}
        {% endfor %}
    {% endif %}
</div>

<style>
    .rcmmnd-card {
        display: flex !important;
        width: 100%;
        justify-content: space-between;
        --bs-gutter-x: 0;
    }
    .rcmmnd-card-left-wrapper {
        display: flex;
        padding-left: 0;
    }
    .rcmmnd-card-left {
        display: flex;
        flex-direction: column;
        align-self: center;
        justify-content: center;
        margin-left: 8%;
        width: 90%;
    }
    .rcmmnd-card-left-lessons {
        font-weight: 500;
        font-size: 0.9375rem;
        line-height: 24px;
        letter-spacing: 3px;
    }
    .rcmmnd-card-left-title {
        font-weight: 800;
        line-height: 1.15;
        font-family: 'Faktum', sans-serif;
        height: 220px;
        width: 95%;
        overflow: clip;

    }
    .rcmmnd-card-left-subtitle {
        font-size: 1.375rem;
        font-weight: 300;
        line-height: 33px;
        margin: 40px 0;
        max-height: 100px;
        overflow: clip;
        width: 80%;
    }
    .rcmmnd-card-left-button {
        background-color: #2F8481;
        border-radius: 10px;
        font-weight: 500px;
        font-size: 1.06rem;
        line-height: 20px;
        padding: 10px 70px;
        border: none;
        color: white;

    }
    .rcmmnd-card-left-button:hover {
        background: #246b69;
    }
    .rcmmnd-card-right-wrapper {
        display: flex;
    }
    .rcmmnd-card-right {
        position: relative;
        overflow-x: clip;
        margin: auto;
        margin-right: 0;
        display: flex;
        justify-content: end;
    }
    .rcmmnd-card-right-image {
        width: 100%;
        top: 15%;
        position: relative;
        margin: 30px 0;
        border-radius: 10px 0 0 10px;
    }
    .rcmmnd-card-right-background {
        height: 100%;
        top: 0;
        z-index: -1;
        width: 100%;
        background: #88D880;
        border-radius: 20px;
        left: 20%;
        position: absolute;
    }
    .tns-nav {
        text-align: center;
    }
    .tns-nav > * {
        width: 9px;
        height: 9px;
        padding: 0;
        margin: 0 5px;
        border-radius: 50%;
        background: #ddd;
        border: 0;
    }
    .tns-nav-active {
        background: gray;
    }

    @media only screen and (min-width: 1800px) {
        .rcmmnd-card-left {
            margin-left: 20%;
        }
    }
    @media only screen and (max-width: 991px) {
        .rcmmnd-card-right {
            display: none;
        }
        .rcmmnd-card-left {
            width: 92%;
            margin: 4%;
            height: auto;
        }
        .rcmmnd-card-left-title {
            width: 90%;        }
        .rcmmnd-card-left-subtitle {
            width: 90%;
            margin: 20px 0;
        }
    }
    @media only screen and (max-width: 476px) {
        .rcmmnd-card-left-button {
            width: 100%;
            text-align: center;
        }
    }
    .textFitted {
        white-space: normal !important;
    }
</style>

<script>
    var slider = tns({
        container: '.recommended-courses-carousel',
        mouseDrag: true,
        autoHeight: true,
        autoplay: true,
        controls: false,
        autoplayButtonOutput: false,
        navPosition: 'bottom'
    });
    function resizeTitle() {
        for (element of document.getElementsByClassName('rcmmnd-card-left-title')) {
            if (element.textContent.trim().length < 25 ) {
                minFont = 50
            }
            else {
                minFont = 30
            }
            textFit(element,
                {
                    minFontSize: minFont,
                    maxFontSize: 76,
                    multiline: true
                }
            );
        };

        $('.rcmmnd-card-left-title').each(function() {
            $(this).height($(this).children().height() + 10)
        });
    }
    window.addEventListener('resize', resizeTitle);
    window.addEventListener('DOMContentLoaded', resizeTitle);
</script>