/* ############################################################################
   ## 
   ##  Content Collections - Extended - Masonry & Masonry Columns
   ##
   ##  - Critical Rendering Path: Optional
   ##
   ######################################################################### */

/*
    Masonry Columns
*/

    .masonry-columns {
    }

        .masonry-columns .content {
            display: inline-block;
            margin-bottom: 1em;
            margin: 0 -10px;
            column-count: 3;
            column-gap: 0;
        }

        .masonry-columns .item {
            box-sizing: border-box;
            break-inside: avoid;
            margin: 0 var(--site-card-gutters) var(--site-card-gutters);
            background: var(--site-color-1-lighter);
        }

            .masonry-columns .item:nth-child(3n-0) {
            }

            .masonry-columns .item .thumbnail {
                box-sizing: border-box;
                display: inline-block !important;
                text-align: center;
                width: 100%;
                padding: 0 !important;
                background: #fff;
            }

                .masonry-columns .item .thumbnail img {
                    border: 0 !important;
                    margin: 0 !important;
                    width: 100% !important;
                    max-width: 100% !important;
                    border-radius: 0; /* Don't inherit this setting. */
                }

            .masonry-columns .item .text {
                display: inline-block !important;
                box-sizing: border-box;
                padding: var(--site-padding-thin) !important;
                width: 100% !important;
            }

                .masonry-columns .item .text .summary {
                    margin: 0 !important;
                    line-height: var(--site-text-line-height);
                }

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

        .masonry-columns .content {
            column-count: 2;
            column-gap: 0;
        }
    }

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

        .masonry-columns .content {
            column-count: 1;
            column-gap: 0;
        }
    }

/* 
    Masonry
*/

    .masonry {
    }

        .masonry .content {
            display: grid;
            grid-gap: var(--site-card-gutters);
            grid-template-columns: repeat(auto-fill, minmax(31%, 1fr));
            grid-auto-rows: 0;
        }

        .masonry .item,
        .cards.masonry .item {
            width: 100%; /* Override .cards */
            margin: 0 !important; /* Override .cards. Note that margin-bottom is particularly important, this will be calculated by Javascript. */
            overflow: hidden;
        }

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

        .masonry .content {
            grid-template-columns: repeat(auto-fill, minmax(40%,1fr));
        }
    }

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

        .masonry .content {
            grid-template-columns: repeat(auto-fill, minmax(100%,1fr));
        }
    }

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

        .masonry .content {
            grid-template-columns: repeat(auto-fill, minmax(40%,1fr));
        }
    }

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

        .masonry .content {
            grid-template-columns: repeat(auto-fill, minmax(100%,1fr));
        }
    }

    /* IE11+ Only - Cancel out masonry (it doesn't work) and go back to cards */

    @media all and (-ms-high-contrast:none) {

        .masonry .content {
            display: block !important;
            grid-gap: unset !important;
            grid-template-columns: unset !important;
            grid-auto-rows: unset !important;
        }
    }

    @media all and (-ms-high-contrast:none) and (min-width: 900px) {

        .masonry .item,
        .cards.masonry .item {
            width: 31.33%;
            margin: 0 0 40px;
            overflow: hidden !important;
        }

            .cards.masonry .item:nth-child(3n-1) {
                /* The middle one */
                margin: 0 3% 40px !important;
            }
    }

    @media all and (-ms-high-contrast:none) and (max-width: 900px) {

        .masonry .item,
        .cards.masonry .item,
        .cards.masonry .item:nth-child(3n-1) {
            width: 100%;
            margin: 0 0 40px !important;
            overflow: hidden !important;
        }
    }