.cle-ee-events-banner {
    display: flex;
    flex-direction: row;
    --banner-height: 480px;
    --carousel-width: 60%;
    --carousel-width-ratio: 0.6;
}

.cle-ee-events-banner-events-list {
    width: calc(100% - var(--carousel-width));
    padding: 1.5rem;
    border: 1px solid var(--cle-border);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(10, 39, 64, 0.11);
}

.cle-ee-events-banner-events-list h4,
.cle-ee-events-banner-events-list-items,
.cle-ee-events-banner-events-list a.cle-ee-events-banner-events-list-item-link {
    color: var(--cle-primary);
}

.cle-ee-events-banner-events-list a.cle-ee-events-banner-events-list-item-link {
    background-image: none;
    padding-bottom: 0;
}

.cle-ee-events-banner-events-list a.cle-ee-events-banner-events-list-item-link:hover {
    /* color: rgb(0, 0, 255, 0.2); */
}

.cle-ee-events-banner-events-list-item.is-active .cle-ee-events-banner-events-list-item-link {
    font-weight: 700;
}

.cle-ee-events-banner-carousel {
    width: var(--carousel-width);
}

.cle-ee-events-banner-carousel .cle-ee-events-banner-carousel-inner a {
    background-image: none;
    padding-bottom: 0;
}

.cle-ee-events-banner-carousel .cle-ee-events-banner-carousel-inner .banner-item {
    height: min(var(--banner-height), calc((100vw - 120px) * var(--carousel-width-ratio) * 9 / 16));
    overflow: hidden;
    position: relative;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

@media (min-width: 768px) and (max-width: 991px) {
    .cle-ee-events-banner-events-list {
        padding: 1rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 767px) {
    .cle-ee-events-banner {
        flex-direction: column-reverse;
    }

    .cle-ee-events-banner-events-list {
        padding: 1.5rem;
        width: auto;
    }

    .cle-ee-events-banner-carousel {
        width: 100%;
    }

    .cle-ee-events-banner-carousel .cle-ee-events-banner-carousel-inner .banner-item {
        height: 400px;
    }
}

.cle-ee-events-banner-carousel .slick-dotted.slick-slider {
    margin-bottom: 0px;
}

.cle-ee-events-banner-carousel .slick-dots {
    display: none !important;
}

@media (max-width: 640px) {
    .cle-ee-events-cards__inner {
        grid-template-columns: 1fr;
    }
}