<div class="widget-and-events-wrapper">
    <div class="widget-grid-container">
        {% include "widget_course_progress" %}
    </div>
    <div class="events-grid-container">
        {% include "training_events_dashboard" %}
    </div>
    <div class="announcements-grid-container">
        {% include "announcements" %}
    </div>
</div>
<style>
    .widget-and-events-wrapper {
        display: flex;
        gap: 40px;
    }
    .widget-grid-container {
        width: 33%;
    }
    .events-grid-container {
        width: 33%;
    }
    .event-card, .np-card-content-training-event {
        height: 100%;
    }
    .announcements-grid-container {
        width: 33%;
    }
@media only screen and (max-width: 1000px) {
    .widget-and-events-wrapper {
        flex-direction: column;
    }
    .widget-grid-container, .events-grid-container, .announcements-grid-container {
        width: 100%;
    }
}
</style>