.Relation__header {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    gap: var(--marginMedium);
    padding: var(--marginMedium);
    margin-block-end: var(--marginMedium);
    border-radius: var(--borderRadiusSmall);
    background-color: var(--baseLight100);
}

.Relation__name {
    margin-bottom: var(--marginExtraSmall);
}

.RelationInfo__item a {
    hyphens: auto;
}

.RelationDetails__description ul {
    margin-block: var(--marginExtraSmall) var(--marginSmall);
}

.Relation__info {
    flex: 1;
}

.Relation__logoWrapper {
    width: 140px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid #ededed;
    padding: var(--marginExtraSmall);
    overflow: clip;
}

.Relation__socialMedia {
    display: flex;
    gap: var(--marginExtraSmall);
    margin-block-start: var(--marginSmall);
}

.RelationSocialMedia__item {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 25px;
    height: 25px;
    padding: var(--marginSmall);
    border-radius: 50%;
    background-color: var(--primaryButtonBackgroundColor, var(--primaryColor500));
}

.RelationSocialMedia__item:hover {
    background-color: var(--primaryButtonBackgroundColor800, var(--primaryColor800));
}

.RelationSocialMedia__item .icon::before {
    margin: 0;
    color: var(--baseLight100);
}

.Relation__backToOverview {
    display: inline-block;
    margin-top: var(--marginLarge);
}

@media (min-width: 568px) {
    .Relation__header {
        align-items: flex-start;
        flex-direction: row-reverse;
        text-align: left;
    }

    .RelationDetails__description {
        -webkit-columns: 2;
        -moz-columns: 2;
        columns: 2;
        column-gap: 3rem;
    }
}