/*  COMPONENT: ARTICLE 
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .component--article--columns {
        --height-4-cols: calc(var(--width-page) / 4);
        --height-3-cols: calc(var(--width-page) / 3);
        --height-2-cols: calc(var(--width-page) / 2);
    }
    .article--columns {
        gap: 0;
    }

    @media (max-width: 480px) {
        .article--columns .ce_text {
            padding: var(--spacing-m);
        }
    }

    /* LAYOUT ////////////////////////////////////////////////////////////////*/

    .article--columns {
        display: grid;
        position: relative;
    }

    /* 2 COLUMNS /////////////////////////////////////////////////////////////*/

    .article--columns-2 {
        grid-template-columns: repeat(auto-fit, minmax(var(--height-4-cols), 1fr));
    }
    @media (max-width: 640px) {
        .article--columns-2 {
            grid-template-columns: 100%;
        }
    }
    @media (min-width: 640px) and (max-width: 980px) {
        .article--columns-2 {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (min-width: 980px) {
        .article--columns-2 {
            height: var(--height-2-cols);
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* 3 COLUMNS /////////////////////////////////////////////////////////////*/

    .article--columns-3 {
        grid-template-columns: repeat(3, 1fr);
        min-height: var(--height-3-cols);
    }

    /* 4 COLUMNS /////////////////////////////////////////////////////////////*/
    .article--columns-4 {
        min-height: var(--height-4-cols);
        grid-template-columns: repeat(auto-fit, minmax(var(--height-4-cols), 1fr));
    }
    @media (min-width: 640px) and (max-width: 980px) {
        .article--columns-4 {
            grid-template-columns: repeat(2, 50%);
        }
    }
    @media (min-width: 980px) {
        .article--columns-4 {
            grid-template-columns: repeat(4, 25%);
        }
    }

    /* CONTENT ///////////////////////////////////////////////////////////////*/

    .article--columns > [class^="ce_"] {
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .article--columns .ce_text {
        padding: var(--spacing-l);
    }
    .article--columns .ce_image img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    /* 2 COLUMNS /////////////////////////////////////////////////////////////*/

    .article--columns-2 .ce_text :where(h1, h2, h3, h4, h5, h6),
    .article--columns-2 .ce_headline {
        font-size: var(--font-size-xxl);
        line-height: var(--line-height-xxl);
        margin-bottom: var(--spacing-m);
    }

    .article--columns-2 .ce_text {
        justify-content: center;
    }
    .article--columns-2 .ce_image * {
        height: 100%;
        object-fit: cover;
    }

    @media (min-width: 980px) {
        .article--columns-2 .ce_text {
            padding-block: var(--spacing-l);
            padding-inline: var(--size-column);
            font-size: var(--font-size-xl);
            line-height: var(--line-height-xl);
            font-weight: var(--font-weight-light);
        }
        .article--columns-2 .ce_text :where(h1, h2, h3, h4, h5, h6),
        .article--columns-2 .ce_headline {
            font-size: var(--font-size-xxxl);
            line-height: var(--line-height-xxxl);
            margin-bottom: var(--spacing-l);
        }
        .article--columns-2 .ce_headline {
            padding-block: var(--spacing-l);
            padding-inline: var(--size-column);
        }
        .article--columns-2 * {
            max-height: var(--height-2-cols);
        }
    }

    /* 4 COLUMNS /////////////////////////////////////////////////////////////*/

    .article--columns-4 .ce_text {
    }
    .article--columns-4 .ce_hyperlink {
        border-bottom: none;
    }
    .article--columns-4 .ce_hyperlink:first-of-type {
        border-top: none;
    }
    .article--columns-4 * {
        max-height: var(--height-4-cols);
    }

    /* HEADLINE & BORDER /////////////////////////////////////////////////////*/

    .article--columns > .ce_headline {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        text-align: left;
        font-size: var(--font-size-l);
    }
    .article--columns > .ce_headline div {
        display: block;
        padding: var(--spacing-xs) var(--spacing-s);
        width: fit-content;
    }
    .article--columns > .ce_headline::before {
        content: "";
        position: absolute;
        height: var(--spacing-xs);
        left: 0;
        right: 0;
        top: 0;
    }
    .article--columns > .ce_headline.border-top--red div {
        background: var(--color-mbz-red-500);
        color: var(--color-mbz-red-50);
    }
    .article--columns > .ce_headline.border-top--red::before {
        background: var(--color-mbz-red-500);
    }
    .article--columns > .ce_headline.border-top--blue div {
        background: var(--color-mbz-blue);
        color: var(--color-white);
    }
    .article--columns > .ce_headline.border-top--blue::before {
        background: var(--color-mbz-blue);
    }
    .article--columns > .ce_headline.border-top--yellow div {
        background: var(--color-mbz-yellow);
        color: var(--color-white);
    }
    .article--columns > .ce_headline.border-top--yellow::before {
        background: var(--color-mbz-yellow);
    }
    .article--columns > .ce_headline.border-top--beige div {
        background: var(--color-mbz-beige-200);
        color: var(--color-mbz-beige-800);
    }
    .article--columns > .ce_headline.border-top--beige::before {
        background: var(--color-mbz-beige-200);
    }
}