.ce_jinews_header {
    padding-bottom: 1rem; /* 16px */
    margin: 0;
    text-align: center;
}

.ce_jinews_image {
    width: 100%;
    height: auto;
}

.ce_jinews_subheader {
    font-weight: 600;
}

.ce_jinews_image_container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

[id^="jiNewsCarousel"] .carousel-inner {
    padding: 0;
}

.ce_jinews_triangle_red img {
    height: 2.875rem; /* 46px */
    width: 2.875rem; /* 46px */
}

/* Desktop view */
@media (min-width: 992px) {
    .ce_jinews_item {
        position: relative;
        width: 100%;
        height: 100%;
        margin-bottom: 1rem;
        background: white;
        clip-path: polygon(-1% -1%, 101% -1%, 100% calc(100% - 2.8125rem), calc(100% - 2.8125rem) 100%, -1% 101%);
        border: 0.0625rem solid var(--ji-light-grey); /* 1px */
    }

    .ce_jinews_card_header {
        padding: 1.5625rem 1.5625rem 0; /* top 25px, horizontal 25px, bottom 0 */
        margin: 0;
    }

    .ce_jinews_subheader {
        padding: 1.25rem 1.5625rem 0; /* top 20px, horizontal 25px, bottom 0 */
        font-weight: 600;
    }

    .ce_jinews_text {
        padding: 1.25rem 1.5625rem 2.25rem; /* 20px 25px 36px */
    }

    .ce_jinews_link {
        position: absolute;
        bottom: 0.5rem; /* 8px */
        right: 3.5rem; /* a little more than the width of the red triangle */
        padding-bottom: 0.5rem; /* 8px */
    }

    .ce_jinews_triangle_red img {
        position: absolute;
        right: -1px;
        bottom: -1px;
        height: 2.875rem;
        width: 2.875rem;
    }

    /* carousel as a grid */
    [id^="jiNewsCarousel"] .carousel-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    [id^="jiNewsCarousel"] .carousel-item {
        display: flex !important;
        flex-direction: column;
        flex: 0 0 33% !important;
        max-width: 33% !important;
        margin-right: 0 !important;
        width: auto !important;

        .row {
            flex: 1;
            display: flex;
            margin: 0;
        }

        .col-12 {
            flex: 1;
            display: flex;
        }
    }

    [id^="jiNewsCarousel"] .ce_jinews_item {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* remove indicators and controls from the carousel */
    [id^="jiNewsCarousel"] .carousel-indicators, [id^="jiNewsCarousel"] .carousel-control-prev, [id^="jiNewsCarousel"] .carousel-control-next {
        display: none !important;
    }
}

/* Mobile view */
@media (max-width: 991px) {
    .ce_jinews_image_container::after {
        z-index: 1;
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 56px; /* not in rem, because image height is not in rem */
        background: black;
        opacity: 0.3;
        pointer-events: none;
    }

    .ce_jinews_card_header {
        padding: 1.5625rem 0 0 0; /* top: 25px, right: 0, bottom: 0, left: 0 */
        margin: 0;
    }

    .ce_jinews_subheader {
        padding: 1.25rem 0 0 0; /* top: 20px, right: 0x, bottom: 0, left: 0 */
        font-weight: 600;
    }

    .ce_jinews_text {
        padding-top: 1.25rem; /* 20px */
    }

    .ce_jinews_link {
        padding-top: 1rem; /* 16px */
        padding-bottom: 0.5rem; /* 8px */
        position: relative;
        bottom: 0;
        right: 0; /* a little more than the width of the red triangle */
    }

    .ce_jinews_triangle_red img {
        display: none;
    }

    [id^="jiNewsCarousel"] .carousel-indicators {
        z-index: 4;
        position: absolute;
        padding-right: 1rem;
        top: auto;
    }

    [id^="jiNewsCarousel"] .carousel-indicators [data-bs-target] {
        width: 16px; /* not in rem, because image height is not in rem */
        height: 16px; /* not in rem, because image height is not in rem */
        margin-right: 8px; /* not in rem, because image height is not in rem */
        border-radius: 50%;
        border: 1px solid white; /* not in rem, because image height is not in rem */
        background: transparent;
    }

    [id^="jiNewsCarousel"] .carousel-indicators .active {
        background-color: whitesmoke;
    }

    [id^="jiNewsCarousel"] .carousel-controls {
        position: absolute;
        padding: 1rem;
        top: auto;
    }

    [id^="jiNewsCarousel"] .carousel-control-prev, [id^="jiNewsCarousel"] .carousel-control-next {
        top: auto;
        bottom: auto;
        transform: none;
        height: auto;
    }

    [id^="jiNewsCarousel"] .carousel-control-prev-icon, [id^="jiNewsCarousel"] .carousel-control-next-icon {
        z-index: 5;
        position: relative;
    }
}