.relation__headerContainer {
    margin-block-end: var(--mbase-spacer-md);
    padding: var(--mbase-spacer-lg);
    background: var(--mbase-clr-footer-bg);
}

.relation__headerContainerInner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem var(--mbase-gap-grid);
}

.relation__image {
    display: inline-block;
    height: 140px;
    width: 140px;
    margin: 0 0 var(--mbase-spacer-xs);
    overflow: hidden;
    vertical-align: middle;
    background: var(--mbase-clr-footer-bg);
    border: 4px solid var(--mbase-clr-brdr-white);
    box-shadow: var(--mbase-nice-box-shadow);
}

.relation__image:not(:has(img))::before {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 1;
    font-family: var(--mbase-fam-icon);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--mbase-txtSize-1);
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    color: var(--mbase-clr-txt-placeholder-icon);
    content: "\e02e";
}

.specialism {
    flex-basis: 100%;
}

.--inlineList {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-block-start: 0;
    padding: 0;
    list-style: '';
}

.--inlineList li {
    padding: .5em 1em;
    border: 1px solid var(--mbase-clr-link);
    background: #fff;
}

.relationInfo__container .--inlineList li {
    background-color: var(--mbase-clr-footer-bg);
    border: 1px solid #fff;
}

.listContainer {
    container-type: inline-size;
    height: auto;
    margin-block-end: var(--mbase-gap-grid);
    padding: var(--mbase-spacer-lg);
}

@container (min-width: 260px) {
    .listContainer dl {
        display: grid;
        grid-template-columns: 1fr 2fr;
        margin-block-start: 0;
    }
}

.listContainer dd {
    margin-inline-start: 1em;
}

.relation h3 {
    font-size: var(--mbase-txtSize-2);
}

.relation :is(h4, h5) {
    margin-block-end: var(--mbase-spacer-xs);
    font-family: var(--mbase-fam-h3);
    font-weight: var(--mbase-txt-weight-h3);
}

.relation h4 {
    font-size: var(--mbase-txtSize-4);
}

.relation h5 {
    font-size: var(--mbase-txtSize-6);
}

.relation__backUrl {
    display: block;
    margin-block-end: 1rem;
}

@media (min-width: 768px) {
    .relationInfo__container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        flex-direction: row;
        gap: var(--mbase-gap-grid);
    }

    .relationInfoContainer__column {
        flex: 0 0 calc(50% - calc(var(--mbase-gap-grid) / 2));
        max-width: calc(50% - calc(var(--mbase-gap-grid) / 2));
    }
}