/* global Styling für Ce-Teaser */

.ce-teaser-img__wrapper {
    /* Teaser one column */
    .ce-teaser-columns--1 .ce-teaser__item {
        @media screen and (min-width: 576px) {
            display: grid;
            width: 100%;
            grid-template-columns: auto 1fr;
            column-gap: 2rem;
        }

        @media screen and (min-width: 1200px) { column-gap: 4rem; }
        @media screen and (min-width: 1720px) { column-gap: 8rem; }
    }

    .ce-teaser-columns--1 .ce-teaser-item__image.landscape img,
    .ce-teaser-columns--1 .ce-teaser-item__image video {
        @media screen and (min-width: 576px) { max-width: 156px; }
        @media screen and (min-width: 768px) { max-width: 216px; }
        @media screen and (min-width: 1200px) { max-width: 350px; }
        @media screen and (min-width: 1720px) { max-width: 520px; }
    }

    .ce-teaser-columns--1 .ce-teaser-item__image.portrait img {
        @media screen and (min-width: 576px) { max-width: 156px; }
        @media screen and (min-width: 768px) { max-width: 216px; }
        @media screen and (min-width: 1200px) { max-width: 230px; }
        @media screen and (min-width: 1720px) { max-width: 280px; }
    }

    .ce-teaser-columns--1 .ce-teaser-item__content {
        @media screen and (min-width: 992px) {
            .overline,
            .item-header,
            .bodytext {
                width: 470px;
            }
        }
        @media screen and (min-width: 1200px) {
            .overline,
            .item-header,
            .bodytext {
                width: 600px;
            }
        }
        @media screen and (min-width: 1720px) {
            .overline,
            .item-header,
            .bodytext {
                width: 820px;
            }
        }
    }

    /* Teaser three column */
    .ce-teaser-columns--3 {
        @media screen and (min-width: 768px) {
            display: grid;
            width: 100%;
            grid-template-columns: 1fr 1fr 1fr;
            column-gap: 24px;
        }
    }

    /* Image */
    figure {
        margin-bottom: 0;
    }
}