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

@layer components {
    .component--article--kachel {
    }
    .component--article--kachel .article--kachel {
        display: grid;
        grid-template-columns: calc(var(--size-column) * 3 + (var(--size-gap) * 2) + var(--spacing-s)) 1fr;
        gap: var(--size-gap);
        gap: 0;
        border-top: var(--border);
        padding-top: var(--spacing-l);
        padding-bottom: var(--spacing-m);
    }
    .component--article--kachel.no-padding .article--kachel {
        padding-block: 0;
    }
    .component--article--kachel:last-of-type .article--kachel {
        border-bottom: var(--border);
    }
    .component--article--kachel .article--kachel > * {
        display: flex;
        flex-direction: column;
        gap: 0;
        justify-content: center;
    }
    .component--article--kachel .article--kachel .ce_text {
        padding: var(--spacing-m);
    }

    .component--article--kachel.column-span-2 .article--kachel {
        display: flex;
        flex-direction: column;
        gap: var(--size-gap);
    }
    .component--article--kachel.column-span-2 .article--kachel > * {
        justify-content: start;
    }
    .article--kachel img {
        width: auto !important;
    }
    @media (max-width: 480px) {
        .component--article--kachel .article--kachel {
            grid-template-columns: 100%;
        }
    }
}