#carouselExample .carousel-item,
#carouselExample .news-slide {
    height: 50vh;
}

.news-slide-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.news-slide {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    cursor: pointer;
    background: #e9ecef;
}

.news-slide-img,
.news-slide-placeholder {
    width: 100%;
    height: 100%;
    display: block;
}

.news-slide-img {
    object-fit: contain;
    object-position: center;
    background: #f3f3f3;
}

.news-slide-placeholder {
    background: #e9ecef;
}

.news-slide-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 33%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem 1.25rem 3rem 1.25rem;
    text-align: center;
    background: linear-gradient( to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.00) );
    color: #fff;
}

    .news-slide-overlay h3 {
        margin: 0;
        max-width: 90%;
        font-size: 1.5rem;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    }

.news-slide-link:hover .news-slide-overlay {
    background: linear-gradient( to top, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.00) );
}

#carouselExample .carousel-indicators {
    margin-bottom: 0.75rem;
}

#carouselExample .carousel-control-prev,
#carouselExample .carousel-control-next {
    width: 8%;
}

#carouselExample .carousel-control-prev-icon,
#carouselExample .carousel-control-next-icon {
    background-size: 70% 70%;
}

@media (max-width: 768px) {
    #carouselExample .carousel-item,
    #carouselExample .news-slide {
        height: 36vh;
    }

    .news-slide-overlay {
        padding: 0.75rem 1rem 2.5rem 1rem;
    }

        .news-slide-overlay h3 {
            max-width: 92%;
            font-size: 1.1rem;
        }

    #carouselExample .carousel-indicators {
        margin-bottom: 0.5rem;
    }
}

#carouselExample .carousel-control-prev,
#carouselExample .carousel-control-next {
    width: 8%;
    opacity: 1;
}

#carouselExample .carousel-control-prev-icon,
#carouselExample .carousel-control-next-icon {
    background-size: 65% 65%;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.38);
    transition: background-color 0.2s ease;
}

#carouselExample .carousel-control-prev:hover .carousel-control-prev-icon,
#carouselExample .carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.58);
}