/*  COMPONENT: NEWSLIST
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .newslist {
    }
    .newslist--default {
    }
    .mod_newslist {
        border-top: 1px solid var(--color-mbz-grey-3 00);
        spadding-top: var(--spacing-m);
    }
    :not(.page--front) .mod_newslist li {
        background-color: var(--color-white) !important;
    }
    .newslist--default ul,
    .mod_newslist ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .newslist--default ul li.first {
        padding-top: var(--spacing-m);
    }
    .newsitem {
        display: grid;
        grid-template-columns: calc(var(--size-column) * 3 + var(--size-gap) * 2.5) 1fr;
        grid-template-rows: min-content 1fr;
        gap: var(--size-gap);
        padding-bottom: var(--spacing-m);
        margin-bottom: var(--spacing-m);
        border-bottom: 1px solid var(--color-mbz-grey-300);
    }

    .newsitem__header {
        grid-column: 2;
    }
    .newsitem__title {
        margin: 0;
    }
    .newsitem__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-s);
        font-style: italic;
    }
    .newsitem__image {
        grid-column: 1;
        grid-row: 1 / 3;
    }
    .newsitem__body {
        grid-column: 2;
        grid-row: 2;
    }
    .newsitem__body .more {
        margin-top: var(--spacing-m);
        margin-bottom: 0;
    }
    @media (max-width: 680px) {
        .newsitem {
            grid-template-columns: 100%;
        }
        .newsitem__header {
            grid-column: 1;
            grid-row: 2;
        }
        .newsitem__image {
            grid-column: 1;
            grid-row: 1;
        }
        .newsitem__body {
            grid-column: 1;
            grid-row: 3;
        }
        .newsitem__body .ce_text {
            padding: 0 !important;
        }
    }

    /* gute beispiele*/
    @media (max-width: 960px) {
        .beispiele .newsitem > *:not(.newsitem__image) {
            padding-inline: var(--spacing-m);
        }
    }
}