<div class="lp-card-container">
    <a class="learning-path-homepage" href="{% route learning_path, id: learning_path.id %}">
        <h3 class="lp-card-title">
            {{ learning_path.name }}
        </h3>
    <img
        alt="{{ learning_path.name }}"
        class="learning-path-image-homepage"
        src="{{ learning_path.image_url }}"
    />
</a>
</div>
  
<style>
    .learning-path-homepage {
        display: flex;
        flex-direction: column;
    }
    .learning-path-image-homepage {
        object-fit: cover;
        width: 100%;
        border-radius: 0 0 20px 20px;
        height: 100%;
    }
    .lp-card-container {
        display: flex;
        height: 100%;
        margin: 0.5rem;
        box-shadow: 0 2px 4px 0 rgba(72,103,118,.5);
        border-radius: 20px;
    }
    .lp-card-title {
        background: #fff;
        margin: 0;
        text-align: center;
        padding: 2rem;
        border-radius: 20px 20px 0 0;
        min-height: 120px;
    }
    learning-paths-wrapper-homepage {
        height: 100%;
    }
</style>