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

@layer components {
    .component--article {
    }
    .article--header {
        max-height: 38.75rem;
    }

    .article--header > .block {
        display: grid;
        width: var(--width-page);
        grid-template-columns: 1fr 1fr;
    }

    .article--header .slider__left {
        grid-column: 1;
        grid-row: 1/3;
    }
    .article--header .float_above {
        margin: 0;
    }
    .article--header .block__hl {
        padding: var(--size-column);
        padding-bottom: var(--spacing-s);
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        justify-content: end;
        font-weight: var(--font-weight-light);
    }
    .article--header .block__hl > * {
        font-size: var(--font-size-xxxl);
        line-height: var(--line-height-xxxl);
        font-weight: var(--font-weight-bold);
    }
    .article--header .slider__right {
        padding: var(--size-column);
        padding-top: var(--spacing-s);
        grid-column: 2;
        display: flex;
        flex-direction: column;
        justify-content: start;
        grid-row: 2;
        font-size: var(--font-size-xl);
        line-height: var(--line-height-xl);
        font-weight: var(--font-weight-light);
    }
    .article--header .slider__right *:last-child {
        margin: 0;
    }

    @media (max-width: 980px) {
        .article--header {
            max-height: 100%;
        }
        .article--header > .block {
            width: 100%;
            grid-template-columns: 100%;
        }
        .article--header > .block > .slider__left {
            grid-row: 1;
            grid-column: 1;
        }
        .article--header > .block > .slider__left .image_container,
        .article--header > .block > .slider__left .image_container * {
            width: 100% !important;
            display: block;
        }
        .article--header > .block > .block__hl {
            grid-row: 2;
            grid-column: 1;
            padding: var(--spacing-l);
            padding-bottom: var(--spacing-s);
        }
        .article--header > .block > .block__hl * {
            margin: 0;
        }
        .article--header > .block > .slider__right {
            grid-row: 3;
            grid-column: 1;

            padding: var(--spacing-l);
            padding-top: var(--spacing-s);
        }
    }
}