/* ############################################################################
   ## 
   ##  Content Collections - Extended - Image Left/Right
   ##
   ##  - Critical Rendering Path: Optional
   ##
   ######################################################################### */

/*
    .image-left
    .image-right
    .image-left-right
    .image-right-left
*/

.image-left,
.image-right,
.image-left-right,
.image-right-left {
}

    .image-left .item,
    .image-right .item,
    .image-left-right .item,
    .image-right-left .item {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        align-content: stretch;
        gap: var(--site-gutters);
    }

        .image-left .item .thumbnail,
        .image-right .item .thumbnail,
        .image-left-right .item .thumbnail,
        .image-right-left .item .thumbnail {
            box-sizing: border-box;
            max-width: 50%;
            width: 50%; /* We need a default width in some scenarios, e.g. when combined with .image-{shape} */
            /*flex-shrink: 0;*/ /* Don't get smaller. */
        }

            .image-left .item .thumbnail img,
            .image-right .item .thumbnail img,
            .image-left-right .item .thumbnail img,
            .image-right-left .item .thumbnail img {
                border-radius: var(--site-box-border-radius);
            }

        .image-left .item .text,
        .image-right .item .text,
        .image-left-right .item .text,
        .image-right-left .item .text {
            box-sizing: border-box;
            width: 100%;
            /*flex-grow: 0;*/ /* Don't grow and push the image around. */
        }

            .image-left .item .text .title,
            .image-right .item .text .title,
            .image-left-right .item .text .title,
            .image-right-left .item .text .title {
                margin-top: 0;
            }

            .image-left .item .text .summary,
            .image-right .item .text .summary,
            .image-left-right .item .text .summary,
            .image-right-left .item .text .summary {
                line-height: var(--site-text-line-height);
            }

            .image-left .item .text :last-child,
            .image-right .item .text :last-child,
            .image-left-right .item .text :last-child,
            .image-right-left .item .text :last-child {
                margin-bottom: 0;
            }

    .image-left.align-items-top .item,
    .image-right.align-items-top .item,
    .image-left-right.align-items-top .item,
    .image-right-left.align-items-top .item {
        align-items: flex-start;
        align-content: flex-start;
    }

    .image-left.align-items-center .item,
    .image-right.align-items-center .item,
    .image-left-right.align-items-center .item,
    .image-right-left.align-items-center .item {
        align-items: center;
        align-content: center;
    }

    .image-left.align-items-bottom .item,
    .image-right.align-items-bottom .item,
    .image-left-right.align-items-bottom .item,
    .image-right-left.align-items-bottom .item {
        align-items: flex-end;
        align-content: flex-end;
    }

    .image-left.align-items-stretch .item,
    .image-right.align-items-stretch .item,
    .image-left-right.align-items-stretch .item,
    .image-right-left.align-items-stretch .item {
        align-items: stretch;
        align-content: stretch;
    }

    .image-left.align-items-baseline .item,
    .image-right.align-items-baseline .item,
    .image-left-right.align-items-baseline .item,
    .image-right-left.align-items-baseline .item {
        align-items: baseline;
        align-content: baseline;
    }

    /*
        Layouts
        - These will override collections that set one of the fixed site wide image widths for individual images, so be sure to select an appropriate image size in the collection widget to avoid image distortion or over-optimisation
    */

    .image-left[class*="layout-"] .item .thumbnail,
    .image-right[class*="layout-"] .item .thumbnail,
    .image-left-right[class*="layout-"] .item .thumbnail,
    .image-right-left[class*="layout-"] .item .thumbnail {
        max-width: none !important;
    }

    .image-left.layout-1 .item .thumbnail,
    .image-right.layout-1 .item .thumbnail,
    .image-left-right.layout-1 .item .thumbnail,
    .image-right-left.layout-1 .item .thumbnail {
        width: 33.333%;
    }

    .image-left.layout-1 .item .text,
    .image-right.layout-1 .item .text,
    .image-left-right.layout-1 .item .text,
    .image-right-left.layout-1 .item .text {
        width: 66.666%;
    }

    .image-left.layout-2 .item .thumbnail,
    .image-right.layout-2 .item .thumbnail,
    .image-left-right.layout-2 .item .thumbnail,
    .image-right-left.layout-2 .item .thumbnail {
        width: 43%;
    }

    .image-left.layout-2 .item .text,
    .image-right.layout-2 .item .text,
    .image-left-right.layout-2 .item .text,
    .image-right-left.layout-2 .item .text {
        width: 57%;
    }

    .image-left.layout-3 .item .thumbnail,
    .image-right.layout-3 .item .thumbnail,
    .image-left-right.layout-3 .item .thumbnail,
    .image-right-left.layout-3 .item .thumbnail {
        width: 50%;
    }

    .image-left.layout-3 .item .text,
    .image-right.layout-3 .item .text,
    .image-left-right.layout-3 .item .text,
    .image-right-left.layout-3 .item .text {
        width: 50%;
    }

    .image-left.layout-4 .item .thumbnail,
    .image-right.layout-4 .item .thumbnail,
    .image-left-right.layout-4 .item .thumbnail,
    .image-right-left.layout-4 .item .thumbnail {
        width: 57%;
    }

    .image-left.layout-4 .item .text,
    .image-right.layout-4 .item .text,
    .image-left-right.layout-4 .item .text,
    .image-right-left.layout-4 .item .text {
        width: 43%;
    }

    .image-left.layout-5 .item .thumbnail,
    .image-right.layout-5 .item .thumbnail,
    .image-left-right.layout-5 .item .thumbnail,
    .image-right-left.layout-5 .item .thumbnail {
        width: 66.666%;
    }

    .image-left.layout-5 .item .text,
    .image-right.layout-5 .item .text,
    .image-left-right.layout-5 .item .text,
    .image-right-left.layout-5 .item .text {
        width: 33.333%;
    }

    /*
        Margins
    */

    .image-left.margins-none .item,
    .image-right.margins-none .item,
    .image-left-right.margins-none .item,
    .image-right-left.margins-none .item {
        margin-bottom: 0;
    }

    .image-left.margins-thick .item,
    .image-right.margins-thick .item,
    .image-left-right.margins-thick .item,
    .image-right-left.margins-thick .item {
        margin-bottom: var(--site-margin-thick);
    }

    .image-left.padding-image-none .item .thumbnail,
    .image-right.padding-image-none .item .thumbnail,
    .image-left-right.padding-image-none .item .thumbnail,
    .image-right-left.padding-image-none .item .thumbnail {
        padding: 0;
    }

    .image-left.padding-image-thinnest .item .thumbnail,
    .image-right.padding-image-thinnest .item .thumbnail,
    .image-left-right.padding-image-thinnest .item .thumbnail,
    .image-right-left.padding-image-thinnest .item .thumbnail {
        padding: var(--site-padding-thinnest);
    }

    .image-left.padding-image-thinner .item .thumbnail,
    .image-right.padding-image-thinner .item .thumbnail,
    .image-left-right.padding-image-thinner .item .thumbnail,
    .image-right-left.padding-image-thinner .item .thumbnail {
        padding: var(--site-padding-thinner);
    }

    .image-left.padding-image-thin .item .thumbnail,
    .image-right.padding-image-thin .item .thumbnail,
    .image-left-right.padding-image-thin .item .thumbnail,
    .image-right-left.padding-image-thin .item .thumbnail {
        padding: var(--site-padding-thin);
    }

    .image-left.padding-image .item .thumbnail,
    .image-right.padding-image .item .thumbnail,
    .image-left-right.padding-image .item .thumbnail,
    .image-right-left.padding-image .item .thumbnail {
        padding: var(--site-padding);
    }

    .image-left.padding-image-thick .item .thumbnail,
    .image-right.padding-image-thick .item .thumbnail,
    .image-left-right.padding-image-thick .item .thumbnail,
    .image-right-left.padding-image-thick .item .thumbnail {
        padding: var(--site-padding-thick);
    }

    .image-left.padding-image-thicker .item .thumbnail,
    .image-right.padding-image-thicker .item .thumbnail,
    .image-left-right.padding-image-thicker .item .thumbnail,
    .image-right-left.padding-image-thicker .item .thumbnail {
        padding: var(--site-padding-thicker);
    }

    .image-left.padding-image-thickest .item .thumbnail,
    .image-right.padding-image-thickest .item .thumbnail,
    .image-left-right.padding-image-thickest .item .thumbnail,
    .image-right-left.padding-image-thickest .item .thumbnail {
        padding: var(--site-padding-thickest);
    }

    .image-left.padding-image-vertical-thinnest .item .thumbnail,
    .image-right.padding-image-vertical-thinnest .item .thumbnail,
    .image-left-right.padding-image-vertical-thinnest .item .thumbnail,
    .image-right-left.padding-image-vertical-thinnest .item .thumbnail {
        padding-top: var(--site-padding-thinnest);
        padding-bottom: var(--site-padding-thinnest);
    }

    .image-left.padding-image-vertical-thinner .item .thumbnail,
    .image-right.padding-image-vertical-thinner .item .thumbnail,
    .image-left-right.padding-image-vertical-thinner .item .thumbnail,
    .image-right-left.padding-image-vertical-thinner .item .thumbnail {
        padding-top: var(--site-padding-thinner);
        padding-bottom: var(--site-padding-thinner);
    }

    .image-left.padding-image-vertical-thin .item .thumbnail,
    .image-right.padding-image-vertical-thin .item .thumbnail,
    .image-left-right.padding-image-vertical-thin .item .thumbnail,
    .image-right-left.padding-image-vertical-thin .item .thumbnail {
        padding-top: var(--site-padding-thin);
        padding-bottom: var(--site-padding-thin);
    }

    .image-left.padding-vertical-image .item .thumbnail,
    .image-right.padding-vertical-image .item .thumbnail,
    .image-left-right.padding-vertical-image .item .thumbnail,
    .image-right-left.padding-vertical-image .item .thumbnail {
        padding-top: var(--site-padding);
        padding-bottom: var(--site-padding);
    }

    .image-left.padding-image-vertical-thick .item .thumbnail,
    .image-right.padding-image-vertical-thick .item .thumbnail,
    .image-left-right.padding-image-vertical-thick .item .thumbnail,
    .image-right-left.padding-image-vertical-thick .item .thumbnail {
        padding-top: var(--site-padding-thick);
        padding-bottom: var(--site-padding-thick);
    }

    .image-left.padding-image-vertical-thicker .item .thumbnail,
    .image-right.padding-image-vertical-thicker .item .thumbnail,
    .image-left-right.padding-image-vertical-thicker .item .thumbnail,
    .image-right-left.padding-image-vertical-thicker .item .thumbnail {
        padding-top: var(--site-padding-thicker);
        padding-bottom: var(--site-padding-thicker);
    }

    .image-left.padding-image-vertical-thickest .item .thumbnail,
    .image-right.padding-image-vertical-thickest .item .thumbnail,
    .image-left-right.padding-image-vertical-thickest .item .thumbnail,
    .image-right-left.padding-image-vertical-thickest .item .thumbnail {
        padding-top: var(--site-padding-thickest);
        padding-bottom: var(--site-padding-thickest);
    }

    .image-left.padding-text-none .item .text,
    .image-right.padding-text-none .item .text,
    .image-left-right.padding-text-none .item .text,
    .image-right-left.padding-text-none .item .text {
        padding: 0;
    }

    .image-left.padding-text-thinnest .item .text,
    .image-right.padding-text-thinnest .item .text,
    .image-left-right.padding-text-thinnest .item .text,
    .image-right-left.padding-text-thinnest .item .text {
        padding: var(--site-padding-thinnest);
    }

    .image-left.padding-text-thinner .item .text,
    .image-right.padding-text-thinner .item .text,
    .image-left-right.padding-text-thinner .item .text,
    .image-right-left.padding-text-thinner .item .text {
        padding: var(--site-padding-thinner);
    }

    .image-left.padding-text-thin .item .text,
    .image-right.padding-text-thin .item .text,
    .image-left-right.padding-text-thin .item .text,
    .image-right-left.padding-text-thin .item .text {
        padding: var(--site-padding-thin);
    }

    .image-left.padding-text .item .text,
    .image-right.padding-text .item .text,
    .image-left-right.padding-text .item .text,
    .image-right-left.padding-text .item .text {
        padding: var(--site-padding);
    }

    .image-left.padding-text-thick .item .text,
    .image-right.padding-text-thick .item .text,
    .image-left-right.padding-text-thick .item .text,
    .image-right-left.padding-text-thick .item .text {
        padding: var(--site-padding-thick);
    }

    .image-left.padding-text-thicker .item .text,
    .image-right.padding-text-thicker .item .text,
    .image-left-right.padding-text-thicker .item .text,
    .image-right-left.padding-text-thicker .item .text {
        padding: var(--site-padding-thicker);
    }

    .image-left.padding-text-thickest .item .text,
    .image-right.padding-text-thickest .item .text,
    .image-left-right.padding-text-thickest .item .text,
    .image-right-left.padding-text-thickest .item .text {
        padding: var(--site-padding-thickest);
    }

    .image-left.padding-text-vertical-none .item .text,
    .image-right.padding-text-vertical-none .item .text,
    .image-left-right.padding-text-vertical-none .item .text,
    .image-right-left.padding-text-vertical-none .item .text {
        padding-top: 0;
        padding-bottom: 0;
    }

    .image-left.padding-text-vertical-thinnest .item .text,
    .image-right.padding-text-vertical-thinnest .item .text,
    .image-left-right.padding-text-vertical-thinnest .item .text,
    .image-right-left.padding-text-vertical-thinnest .item .text {
        padding-top: var(--site-padding-thinnest);
        padding-bottom: var(--site-padding-thinnest);
    }

    .image-left.padding-text-vertical-thinner .item .text,
    .image-right.padding-text-vertical-thinner .item .text,
    .image-left-right.padding-text-vertical-thinner .item .text,
    .image-right-left.padding-text-vertical-thinner .item .text {
        padding-top: var(--site-padding-thinner);
        padding-bottom: var(--site-padding-thinner);
    }

    .image-left.padding-text-vertical-thin .item .text,
    .image-right.padding-text-vertical-thin .item .text,
    .image-left-right.padding-text-vertical-thin .item .text,
    .image-right-left.padding-text-vertical-thin .item .text {
        padding-top: var(--site-padding-thin);
        padding-bottom: var(--site-padding-thin);
    }

    .image-left.padding-text-vertical .item .text,
    .image-right.padding-text-vertical .item .text,
    .image-left-right.padding-text-vertical .item .text,
    .image-right-left.padding-text-vertical .item .text {
        padding-top: var(--site-padding);
        padding-bottom: var(--site-padding);
    }

    .image-left.padding-text-vertical-thick .item .text,
    .image-right.padding-text-vertical-thick .item .text,
    .image-left-right.padding-text-vertical-thick .item .text,
    .image-right-left.padding-text-vertical-thick .item .text {
        padding-top: var(--site-padding-thick);
        padding-bottom: var(--site-padding-thick);
    }

    .image-left.padding-text-vertical-thicker .item .text,
    .image-right.padding-text-vertical-thicker .item .text,
    .image-left-right.padding-text-vertical-thicker .item .text,
    .image-right-left.padding-text-vertical-thicker .item .text {
        padding-top: var(--site-padding-thicker);
        padding-bottom: var(--site-padding-thicker);
    }

    .image-left.padding-text-vertical-thickest .item .text,
    .image-right.padding-text-vertical-thickest .item .text,
    .image-left-right.padding-text-vertical-thickest .item .text,
    .image-right-left.padding-text-vertical-thickest .item .text {
        padding-top: var(--site-padding-thickest);
        padding-bottom: var(--site-padding-thickest);
    }

.image-left {
}

    .image-left .item .thumbnail {
        order: 1;
    }

    .image-left .item .text {
        order: 2;
    }

.image-right {
}

    .image-right .item .thumbnail {
        order: 2;
    }

    .image-right .item .text {
        order: 1;
    }

.image-left-right {
}

    .image-left-right .item .thumbnail {
        order: 1;
    }

    .image-left-right .item .text {
        order: 2;
    }

    .image-left-right .item:nth-child(2n) .thumbnail {
        order: 2;
    }

    .image-left-right .item:nth-child(2n) .text {
        order: 1;
    }

.image-right-left {
}

    .image-right-left .item .thumbnail {
        order: 2;
    }

    .image-right-left .item .text {
        order: 1;
    }

    .image-right-left .item:nth-child(2n) .thumbnail {
        order: 1;
    }

    .image-right-left .item:nth-child(2n) .text {
        order: 2;
    }

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

    .image-left.stack-medium .item,
    .image-right.stack-medium .item,
    .image-left-right.stack-medium .item,
    .image-right-left.stack-medium .item {
        display: block;
    }

        .image-left.stack-medium .item .thumbnail,
        .image-right.stack-medium .item .thumbnail,
        .image-left-right.stack-medium .item .thumbnail,
        .image-right-left.stack-medium .item .thumbnail,
        .image-left.stack-medium .item .text,
        .image-right.stack-medium .item .text,
        .image-left-right.stack-medium .item .text,
        .image-right-left.stack-medium .item .text {
            width: 100%;
            max-width: 100%;
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
        }

    .image-left.stack-medium .item,
    .image-right.stack-medium .item,
    .image-left-right.stack-medium .item,
    .image-right-left.stack-medium .item {
        display: block;
    }

        .image-left.stack-medium .item .thumbnail,
        .image-right.stack-medium .item .thumbnail,
        .image-left-right.stack-medium .item .thumbnail,
        .image-right-left.stack-medium .item .thumbnail,
        .image-left.stack-medium .item .text,
        .image-right.stack-medium .item .text,
        .image-left-right.stack-medium .item .text,
        .image-right-left.stack-medium .item .text {
            width: 100%;
            max-width: 100%;
        }

        .image-left.stack-medium .item .text,
        .image-right.stack-medium .item .text,
        .image-left-right.stack-medium .item .text,
        .image-right-left.stack-medium .item .text {
            padding-top: var(--site-padding);
            padding-bottom: var(--site-padding);
        }

            .image-left.padding-text-thin.stack-medium .item .text,
            .image-right.padding-text-thin.stack-medium .item .text,
            .image-left-right.padding-text-thin.stack-medium .item .text,
            .image-right-left.padding-text-thin.stack-medium .item .text {
                padding-top: var(--site-padding-thin);
                padding-bottom: var(--site-padding-thin);
            }

}

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

    .image-left.stack-small .item,
    .image-right.stack-small .item,
    .image-left-right.stack-small .item,
    .image-right-left.stack-small .item {
        display: block;
    }

        .image-left.stack-small .item .thumbnail,
        .image-right.stack-small .item .thumbnail,
        .image-left-right.stack-small .item .thumbnail,
        .image-right-left.stack-small .item .thumbnail,
        .image-left.stack-small .item .text,
        .image-right.stack-small .item .text,
        .image-left-right.stack-small .item .text,
        .image-right-left.stack-small .item .text {
            width: 100%;
            max-width: 100%;
            margin-left: 0;
            margin-right: 0;
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
        }

    .image-left.stack-small .item,
    .image-right.stack-small .item,
    .image-left-right.stack-small .item,
    .image-right-left.stack-small .item {
        display: block;
    }

        .image-left.stack-small .item .thumbnail,
        .image-right.stack-small .item .thumbnail,
        .image-left-right.stack-small .item .thumbnail,
        .image-right-left.stack-small .item .thumbnail,
        .image-left.stack-small .item .text,
        .image-right.stack-small .item .text,
        .image-left-right.stack-small .item .text,
        .image-right-left.stack-small .item .text {
            width: 100%;
            max-width: 100%;
            margin-left: 0;
            margin-right: 0;
        }

        .image-left.stack-small .item .text,
        .image-right.stack-small .item .text,
        .image-left-right.stack-small .item .text,
        .image-right-left.stack-small .item .text {
            padding-top: var(--site-padding);
            padding-bottom: var(--site-padding);
        }

            .image-left.padding-text-thin.stack-small .item .text,
            .image-right.padding-text-thin.stack-small .item .text,
            .image-left-right.padding-text-thin.stack-small .item .text,
            .image-right-left.padding-text-thin.stack-small .item .text {
                padding-top: var(--site-padding-thin);
                padding-bottom: var(--site-padding-thin);
            }

}

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

    /* Thick and thicker padding is never useful on tiny screens. */

    .image-left.padding-image-thick .item .thumbnail,
    .image-right.padding-image-thick .item .thumbnail,
    .image-left-right.padding-image-thick .item .thumbnail,
    .image-right-left.padding-image-thick .item .thumbnail,
    .image-left.padding-image-thicker .item .thumbnail,
    .image-right.padding-image-thicker .item .thumbnail,
    .image-left-right.padding-image-thicker .item .thumbnail,
    .image-right-left.padding-image-thicker .item .thumbnail,
    .image-left.padding-image-vertical-thick .item .thumbnail,
    .image-right.padding-image-vertical-thick .item .thumbnail,
    .image-left-right.padding-image-vertical-thick .item .thumbnail,
    .image-right-left.padding-image-vertical-thick .item .thumbnail,
    .image-left.padding-text-thick .item .text,
    .image-right.padding-text-thick .item .text,
    .image-left-right.padding-text-thick .item .text,
    .image-right-left.padding-text-thick .item .text,
    .image-left.padding-text-thicker .item .text,
    .image-right.padding-text-thicker .item .text,
    .image-left-right.padding-text-thicker .item .text,
    .image-right-left.padding-text-thicker .item .text,
    .image-left.padding-text-vertical-thick .item .text,
    .image-right.padding-text-vertical-thick .item .text,
    .image-left-right.padding-text-vertical-thick .item .text,
    .image-right-left.padding-text-vertical-thick .item .text,
    .image-left.padding-text-vertical-thicker .item .text,
    .image-right.padding-text-vertical-thicker .item .text,
    .image-left-right.padding-text-vertical-thicker .item .text,
    .image-right-left.padding-text-vertical-thicker .item .text {
        padding: var(--site-padding);
    }

    .image-left.stack-tiny .item,
    .image-right.stack-tiny .item,
    .image-left-right.stack-tiny .item,
    .image-right-left.stack-tiny .item {
        display: block;
    }

        .image-left.stack-tiny .item .thumbnail,
        .image-right.stack-tiny .item .thumbnail,
        .image-left-right.stack-tiny .item .thumbnail,
        .image-right-left.stack-tiny .item .thumbnail {
            width: 100%;
            max-width: 100%;
            margin-left: 0;
            margin-right: 0;
            padding-top: 0;
            padding-bottom: 0;
        }

        .image-left.stack-tiny .item .text,
        .image-right.stack-tiny .item .text,
        .image-left-right.stack-tiny .item .text,
        .image-right-left.stack-tiny .item .text {
            width: 100%;
            max-width: 100%;
            margin-left: 0;
            margin-right: 0;
            padding-top: var(--site-padding);
            padding-bottom: var(--site-padding);
        }

            .image-left.padding-text-thin.stack-tiny .item .text,
            .image-right.padding-text-thin.stack-tiny .item .text,
            .image-left-right.padding-text-thin.stack-tiny .item .text,
            .image-right-left.padding-text-thin.stack-tiny .item .text {
                padding-top: var(--site-padding-thin);
                padding-bottom: var(--site-padding-thin);
            }

}