/* ####################################
   Timeline

   - Critical Rendering Path: Optional
   - Currently there is one timeline component, which is an extension of Articles in Sub Containers
   ################################## */

:root {
    --site-timeline-container-summary-bg: var(--site-color-grey-lightest);
}

.articles-in-sub-containers.timeline.layout-1 {
    padding: 0 20px;
}

    .articles-in-sub-containers.timeline.layout-1 .container {
    }

        .articles-in-sub-containers.timeline.layout-1 .container .container-summary {
            position: relative;
            float: left;
            box-sizing: border-box;
            width: 100%;
            padding: 60px 40px;
            margin: 0;
            text-align: center;
            background: var(--site-timeline-container-summary-bg);
            border-top: #484038 5px solid;
            border-bottom: #484038 5px solid;
            box-shadow: 0 0 50px rgba(0,0,0,0.1);
        }

            .articles-in-sub-containers.timeline.layout-1 .container .container-summary .text {
                display: block !important;
            }

                .articles-in-sub-containers.timeline.layout-1 .container .container-summary .text .title {
                    margin: 0;
                    line-height: 100%;
                    text-align: center;
                }

        .articles-in-sub-containers.timeline.layout-1 .container .container-summary::before {
            position: absolute;
            z-index: -1;
            top: -30px;
            margin-left: -30px;
            width: 60px;
            height: 60px;
            content: " ";
            background: #484038;
            border-radius: 100%;
        }

        .articles-in-sub-containers.timeline.layout-1 .container .container-summary::after {
            position: absolute;
            z-index: -1;
            bottom: -30px;
            margin-left: -30px;
            width: 60px;
            height: 60px;
            content: " ";
            background: #484038;
            border-radius: 100%;
        }

        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content {
            position: relative;
            float: left;
            width: 100%;
        }

        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles:not(.cards):not(.tiles) {
            margin-bottom: 0;
        }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content {
                margin: 80px 0;
            }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article {
                }

                    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .thumbnail {
                    }

                        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .thumbnail a {
                        }

                    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text {
                    }

                        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text .title {
                            margin-top: 0;
                            font-size: 1.875rem;
                        }

                            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text .title a {
                                text-decoration: none;
                            }

                                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text .title a:hover {
                                    text-decoration: underline;
                                }

                            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text .title span {
                                display: block;
                                color: #c69352 !important;
                            }

                        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text .date {
                            font-size: 1.875rem;
                            font-weight: bold;
                            color: #c69352;
                        }

                        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text .summary {
                        }

                        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text .span-read-more {
                        }

                    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineSecondary {
                    }

                        .articles-in-sub-containers.timeline .container .container-sub-content .articles .content .article.summaryTimelineSecondary .thumbnail {
                        }

                            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineSecondary .thumbnail a {
                            }

                            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineSecondary .thumbnail img {
                                zoom: 0.5;
                            }

                        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineSecondary .text {
                        }

                    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineHighlight {
                    }

                        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineHighlight .thumbnail {
                        }

                        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineHighlight .text {
                        }


                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .content-none {
                    width: 100%;
                    padding: 80px 0;
                    text-align: center;
                }

@media screen and (min-width: 901px) {

    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles:not(.cards):not(.tiles) {
    }

    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content {
        margin: 0;
    }

        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article {
            position: relative;
            display: flex !important;
            margin: 0 !important;
        }

        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article::before {
            content: " ";
            position: absolute;
            z-index: 1;
            left: 50%;
            margin-left: -15px;
            margin-top: -10px;
            top: 115px;
            width: 10px;
            height: 10px;
            background: #fff;
            border: #484038 10px solid;
            border-radius: 100%;
        }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .thumbnail {
                position: relative;
                display: block !important;
                box-sizing: border-box;
                width: 50% !important;
                max-width: none !important;
                padding: 60px 80px 80px 0 !important;
                text-align: right !important;
                line-height: 0;
                border-right: #484038 5px solid;
            }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .thumbnail a {
                    position: relative;
                    display: inline-block;
                }

                    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .thumbnail a::after {
                        content: " ";
                        position: absolute;
                        top: 0;
                        right: 0;
                        z-index: -1;
                        float: right;
                        margin-top: -40px;
                        margin-right: -40px;
                        box-sizing: border-box;
                        height: 400px;
                        width: 75%;
                        padding: 40px 40px 40px 0;
                        background: #ebeef2;
                    }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .thumbnail img {
                    position: relative;
                    max-width: 100% !important;
                    border: #ebeef2 1px solid;
                }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text {
                position: relative;
                display: block !important;
                box-sizing: border-box;
                width: 50% !important;
                padding: 100px 0 0 160px !important;
                border-left: #484038 5px solid;
            }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text::before {
                content: " ";
                position: absolute;
                left: 0;
                top: 115px;
                width: 120px;
                height: 10px;
                background: #484038;
            }
                            
            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text::after {
                content: " ";
                position: absolute;
                z-index: 1;
                top: 100px;
                left: 100px;
                width: 40px;
                height: 40px;
                background: #484038;
                border-radius: 100%;
            }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text .title {
                    position: relative;
                    font-size: 1.875rem;
                }

                    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text .title a {
                        text-decoration: none;
                    }

                        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text .title a:hover {
                            text-decoration: underline;
                        }

                    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text .title span {
                        margin-top: -2.25rem; /* Include room for the line height. */
                    }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text .date {
                    position: absolute;
                    top: 68px;
                    margin: 0;
                }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text .summary {
                }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text .span-read-more {
                }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text:::before(2) {
                    content: " ";
                    position: absolute;
                    left: 0;
                    width: 60px;
                    height: 60px;
                    border-radius: 100%;
                    background: #484038;
                }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineSecondary {
            }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineSecondary .thumbnail {
                }

                    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineSecondary .thumbnail a {
                    }

                        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineSecondary .thumbnail a::after {
                            margin-top: -80px;
                            margin-right: -80px;
                            zoom: 0.5;
                        }

                    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineSecondary .thumbnail img {
                        zoom: 0.5;
                    }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineSecondary .text {
                }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineHighlight {
            }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineHighlight .thumbnail {
                }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineHighlight .text {
                }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:first-child {
            }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:first-child::before {
                top: 195px;
            }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:first-child .thumbnail {
                    padding-top: 140px !important;
                }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:first-child .text {
                    padding-top: 180px !important;
                }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:first-child .text::after {
                    top: 180px;
                }

                    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:first-child .text::before {
                        top: 195px;
                    }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:last-child {
            }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:last-child .thumbnail {
                    padding-bottom: 140px !important;
                }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:last-child .text {
                    padding-bottom: 140px !important;
                }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:nth-child(2n) {
            }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:nth-child(2n) .thumbnail {
                    order: 2;
                    padding-right: 0 !important;
                    padding-left: 80px !important;
                    text-align: left !important;
                    border-right: 0;
                    border-left: #484038 5px solid;
                }

                    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:nth-child(2n) .thumbnail a {
                    }

                        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:nth-child(2n) .thumbnail a::after {
                            right: auto;
                            left: 0;
                            margin-right: auto;
                            margin-left: -40px;
                        }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article.summaryTimelineSecondary:nth-child(2n) .thumbnail a::after {
                margin-left: -80px;
            }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:nth-child(2n) .text {
                order: 1;
                padding-left: 0 !important;
                padding-right: 160px !important;
                text-align: right !important;
                border-left: 0;
                border-right: #484038 5px solid;
            }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:nth-child(2n) .text::after {
                left: auto;
                right: 100px;
            }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:nth-child(2n) .text::before {
                    right: 0;
                    left: auto;
                }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:nth-child(2n) .text .date {
                    right: 160px;
                }

        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .content-none {
        }

}

@media screen and (max-width: 900px) {

    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles {
    }

    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles::before {
        content: " ";
        position: absolute;
        top: 10px;
        left: 5px;
        float: left;
        width: 50%;
        height: 80px;
        box-sizing: border-box;
        border-right: #484038 10px solid;
    }

    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles::after {
        content: " ";
        position: absolute;
        bottom: 10px;
        left: 5px;
        float: left;
        width: 50%;
        height: 80px;
        box-sizing: border-box;
        border-right: #484038 10px solid;
    }

        .articles-in-sub-containers.timeline .container .container-sub-content .articles .content {
        }

        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content::before {
            content: " ";
            position: absolute;
            width: 50%;
            height: 10px;
            background: #484038;
        }

        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content::after {
            content: " ";
            position: absolute;
            bottom: 80px;
            width: 50%;
            height: 10px;
            background: #484038;
        }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article {
                position: relative;
                padding: 40px;
                margin-bottom: 0 !important;
                border-left: #484038 10px solid;
            }
            
            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article::before {
                content: " ";
                position: absolute;
                z-index: 1;
                left: -20px;
                top: 70px;
                width: 10px;
                height: 10px;
                background: #fff;
                border: #484038 10px solid;
                border-radius: 100%;
            }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article::after {
                content: " ";
                position: absolute;
                z-index: -1;
                top: 80px;
                left: 0;
                width: 40px;
                height: 10px;
                background: #484038;
            }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:first-child {
                padding-top: 80px;
            }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:first-child::before {
                    top: 110px;
                }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:first-child::after {
                    top: 120px;
                }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article:last-child {
                padding-bottom: 80px;
            }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .thumbnail {
                    display: block !important;
                    width: 100% !important;
                    line-height: 0;
                }

                    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .thumbnail img {
                        box-sizing: border-box;
                        width: 100% !important;
                        border: #ebeef2 1px solid;
                    }

                .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text {
                    display: block !important;
                    box-sizing: border-box;
                    width: 100%;
                    padding: 40px;
                    background: #ebeef2;
                }

            .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .content-none {
                border-left: #484038 10px solid;
            }

}

@media screen and (max-width: 600px) {

    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article {
        padding: var(--site-padding-thin);
    }

        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text {
            padding: var(--site-padding);
        }

}

@media screen and (max-width: 375px) {

    .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article {
        padding: var(--site-padding-thin) 0;
    }

        .articles-in-sub-containers.timeline.layout-1 .container .container-sub-content .articles .content .article .text {
            padding: var(--site-padding-thin);
        }

}

/*
    Layout 2
*/


/*
    Base
*/

:root {
    --site-timeline-2-container-gap: 0px; /* Can't be "0" (but could be 0px) because we use division calculations. */
    --site-timeline-2-items-per-row: 6;
}

.articles-in-sub-containers.timeline.layout-2 {
}

    .articles-in-sub-containers.timeline.layout-2 > .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: var(--site-timeline-2-container-gap);
        font-size: 14px;
    }

        .articles-in-sub-containers.timeline.layout-2 > .content .container {
            display: flex;
            /*flex: 0 1 auto;*/
            flex-grow: 1;
            flex-shrink: 0;
            flex-basis: auto;
            justify-content: flex-start;
            flex-direction: column;
            /*width: calc(100% / var(--site-timeline-2-items-per-row) - calc(var(--site-timeline-2-container-gap) * var(--site-timeline-2-items-per-row) / calc(var(--site-timeline-2-items-per-row) - 1) ));*/
            max-width: calc(100% / var(--site-timeline-2-items-per-row) - calc(var(--site-timeline-2-container-gap) * var(--site-timeline-2-items-per-row) / calc(var(--site-timeline-2-items-per-row) - 1) ));
        }

            .articles-in-sub-containers.timeline.layout-2 > .content .container .container-summary {
            }

                .articles-in-sub-containers.timeline.layout-2 > .content .container .container-summary .text {
                    padding: var(--site-padding-thinner) var(--site-padding);
                    background-color: var(--site-color-black);
                    text-align: center;
                }

                    .articles-in-sub-containers.timeline.layout-2 > .content .container .container-summary .text .title {
                        margin: 0;
                        color: var(--site-color-white);
                    }

                        .articles-in-sub-containers.timeline.layout-2 > .content .container .container-summary .text .title a {
                            color: var(--site-color-white);
                        }

                    .articles-in-sub-containers.timeline.layout-2 > .content .container:nth-child(6n-5) .container-summary .text {
                        background-color: var(--site-color-black);
                    }

                    .articles-in-sub-containers.timeline.layout-2 > .content .container:nth-child(6n-4) .container-summary .text {
                        background-color: var(--site-color-1-mid-dark);
                    }

                    .articles-in-sub-containers.timeline.layout-2 > .content .container:nth-child(6n-3) .container-summary .text {
                        background-color: var(--site-color-2);
                    }

                    .articles-in-sub-containers.timeline.layout-2 > .content .container:nth-child(6n-2) .container-summary .text {
                        background-color: var(--site-color-3);
                    }

                    .articles-in-sub-containers.timeline.layout-2 > .content .container:nth-child(6n-1) .container-summary .text {
                        background-color: var(--site-color-4);
                    }

                    .articles-in-sub-containers.timeline.layout-2 > .content .container:nth-child(6n) .container-summary .text {
                        color: var(--site-color-black);
                        background-color: var(--site-color-4-lighter);
                    }

                        .articles-in-sub-containers.timeline.layout-2 > .content .container:nth-child(6n) .container-summary .text .title a {
                            color: var(--site-color-2);
                        }

            .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content {
            }

                .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content {
                }

                    .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article {
                        margin: 0;
                        padding: var(--site-padding) var(--site-padding-thin) 0;
                        border-left: var(--site-cols-divider-bg) var(--site-cols-divider-width) solid;
                    }

                        .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article:last-child {
                            padding-bottom: var(--site-padding-thin);
                        }

                        .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article .thumbnail {
                            display: block;
                            position: relative;
                            overflow: hidden;
                            border-radius: 24px;
                            border-top-right-radius: 0;
                        }

                            .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article .thumbnail::before {
                                content: "";
                                display: block;
                                padding-top: calc(9 / 16 * 100%);
                            }

                            .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article .thumbnail img {
                                position: absolute;
                                top: -50%;
                                bottom: -50%;
                                margin: auto;
                                width: 100%;
                            }

                        .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article .text {
                        }

                            .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article .text .title {
                                margin: var(--site-padding-thinner) 0;
                            }

                                .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article .text .title a {
                                }

                                    .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article .text .title a:hover {
                                    }

                                .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article .text .title span {
                                }

                            .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article .text .date {
                            }

                            .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article .text .summary {
                            }

                            .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article .text .span-read-more {
                            }

                        .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article.summaryTimelineSecondary {
                        }

                            .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article.summaryTimelineSecondary .thumbnail {
                            }

                                .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article.summaryTimelineSecondary .thumbnail a {
                                }

                                .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article.summaryTimelineSecondary .thumbnail img {
                                }

                            .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article.summaryTimelineSecondary .text {
                            }

                        .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article.summaryTimelineHighlight {
                        }

                            .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article.summaryTimelineHighlight .thumbnail {
                            }

                            .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .article.summaryTimelineHighlight .text {
                            }

                    .articles-in-sub-containers.timeline.layout-2 > .content .container .container-sub-content .articles .content .content-none {
                    }

@media screen and (max-width: 1200px) {

    :root {
        --site-timeline-2-container-gap: 0px;
        --site-timeline-2-items-per-row: 3;
    }

}

@media screen and (max-width: 600px) {

    :root {
        --site-timeline-2-container-gap: 0px;
        --site-timeline-2-items-per-row: 2;
    }
}

@media screen and (max-width: 375px) {

    :root {
        --site-timeline-2-container-gap: 0px;
        --site-timeline-2-items-per-row: 1;
    }
}

/*
    Layout 3
*/


/*
    Base
*/

:root {
    --site-timeline-3-container-gap: 0px; /* Can't be "0" (but could be 0px) because we use division calculations. */
    --site-timeline-3-items-per-row: 2;
}

.articles-in-sub-containers.timeline.layout-3 {
}

    .articles-in-sub-containers.timeline.layout-3 > .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: var(--site-timeline-3-container-gap);
        font-size: 19px;
    }

        .articles-in-sub-containers.timeline.layout-3 > .content .container {
            display: flex;
            /*flex: 0 1 auto;*/
            flex-grow: 1;
            flex-shrink: 0;
            flex-basis: auto;
            justify-content: flex-start;
            flex-direction: column;
            /*width: calc(100% / var(--site-timeline-3-items-per-row) - calc(var(--site-timeline-3-container-gap) * var(--site-timeline-3-items-per-row) / calc(var(--site-timeline-3-items-per-row) - 1) ));*/
            max-width: calc(100% / var(--site-timeline-3-items-per-row) - calc(var(--site-timeline-3-container-gap) * var(--site-timeline-3-items-per-row) / calc(var(--site-timeline-3-items-per-row) - 1) ));
        }

            .articles-in-sub-containers.timeline.layout-3 > .content .container .container-summary {
            }

                .articles-in-sub-containers.timeline.layout-3 > .content .container .container-summary .text {
                    padding: var(--site-padding-thinner) var(--site-padding);
                    background-color: var(--site-color-black);
                    text-align: center;
                }

                    .articles-in-sub-containers.timeline.layout-3 > .content .container .container-summary .text .title {
                        margin: 0;
                        color: var(--site-color-white);
                    }

                        .articles-in-sub-containers.timeline.layout-3 > .content .container .container-summary .text .title a {
                            color: var(--site-color-white);
                        }

                    .articles-in-sub-containers.timeline.layout-3 > .content .container:nth-child(6n-5) .container-summary .text {
                        background-color: var(--site-color-black);
                    }

                    .articles-in-sub-containers.timeline.layout-3 > .content .container:nth-child(6n-4) .container-summary .text {
                        background-color: var(--site-color-1-mid-dark);
                    }

                    .articles-in-sub-containers.timeline.layout-3 > .content .container:nth-child(6n-3) .container-summary .text {
                        background-color: var(--site-color-2);
                    }

                    .articles-in-sub-containers.timeline.layout-3 > .content .container:nth-child(6n-2) .container-summary .text {
                        background-color: var(--site-color-3);
                    }

                    .articles-in-sub-containers.timeline.layout-3 > .content .container:nth-child(6n-1) .container-summary .text {
                        background-color: var(--site-color-4);
                    }

                    .articles-in-sub-containers.timeline.layout-3 > .content .container:nth-child(6n) .container-summary .text {
                        color: var(--site-color-black);
                        background-color: var(--site-color-4-lighter);
                    }

                        .articles-in-sub-containers.timeline.layout-3 > .content .container:nth-child(6n) .container-summary .text .title a {
                            color: var(--site-color-2);
                        }

            .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content {
            }

                .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content {
                }

                    .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article {
                        margin: 0;
                        padding: var(--site-padding) var(--site-padding-thin) 0;
                        border-left: var(--site-cols-divider-bg) var(--site-cols-divider-width) solid;
                    }

                        .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article:last-child {
                            padding-bottom: var(--site-padding-thin);
                        }

                        .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article .thumbnail {
                            display: block;
                            position: relative;
                            overflow: hidden;
                            border-radius: 24px;
                            border-top-right-radius: 0;
                        }

                            .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article .thumbnail::before {
                                content: "";
                                display: block;
                                padding-top: calc(9 / 16 * 100%);
                            }

                            .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article .thumbnail img {
                                position: absolute;
                                top: -50%;
                                bottom: -50%;
                                margin: auto;
                                width: 100%;
                            }

                        .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article .text {
                        }

                            .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article .text .title {
                                margin: var(--site-padding-thinner) 0;
                            }

                                .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article .text .title a {
                                }

                                    .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article .text .title a:hover {
                                    }

                                .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article .text .title span {
                                }

                            .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article .text .date {
                            }

                            .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article .text .summary {
                            }

                            .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article .text .span-read-more {
                            }

                        .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article.summaryTimelineSecondary {
                        }

                            .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article.summaryTimelineSecondary .thumbnail {
                            }

                                .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article.summaryTimelineSecondary .thumbnail a {
                                }

                                .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article.summaryTimelineSecondary .thumbnail img {
                                }

                            .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article.summaryTimelineSecondary .text {
                            }

                        .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article.summaryTimelineHighlight {
                        }

                            .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article.summaryTimelineHighlight .thumbnail {
                            }

                            .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article.summaryTimelineHighlight .text {
                            }

                    .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .content-none {
                    }

@media screen and (max-width: 1200px) {

    :root {
        --site-timeline-3-container-gap: 0px;
        --site-timeline-3-items-per-row: 2;
    }

}

@media screen and (max-width: 600px) {

    :root {
        --site-timeline-3-container-gap: 0px;
        --site-timeline-3-items-per-row: 2;
    }

    .articles-in-sub-containers.timeline.layout-3 > .content .container .container-sub-content .articles .content .article .thumbnail {
        max-width: 100% !important;
    }
}

@media screen and (max-width: 375px) {

    :root {
        --site-timeline-3-container-gap: 0px;
        --site-timeline-3-items-per-row: 1;
    }

    .articles-in-sub-containers.timeline.layout-3 > .content {
        display: block;
    }
}