/*  COMPONENT: INFOBOX
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .component--infobox {
    }
    .infobox {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-s);
    }
    .infobox * {
        font-size: inherit;
        margin: 0;
    }
    .infobox > * {
        display: grid;
        column-gap: var(--size-gap);
        grid-template-columns: 4.8125rem 1fr;
        background: var(--color-mbz-grey-50);
        padding: var(--spacing-xs);
    }

    .infobox > * > * {
        grid-column: 2;
    }
    .infobox > * > .image_container {
        position: static;
        grid-column: 1;
        grid-row: 1/3;
        margin: calc(var(--spacing-xs) * -1) !important;
    }
    .infobox > * > .block__hl {
        align-self: end;
    }
    .infobox .ce_hyperlink {
        border: none !important;
    }
    .infobox a {
        display: block;
    }
}