/*
.RelationDetailPage {
    margin-inline: auto;
    margin-block: 0 1rem;
    padding: 1.5em;
    list-style-image: none;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}
*/

.RelationDetailPage {
    container-type: inline-size;
    container-name: RelationDetailPage;
}

@container RelationDetailPage (min-width: 515px) {
    .RelationDetailPage__profilePhotoWrapper {
        grid-row: 1/3;
    }

    .RelationDetailPage__freeText {
        grid-column: 1/-1;
    }
}

@container RelationDetailPage (min-width: 782px) {
    .RelationDetailPage__freeText {
        grid-column: 2/-1;
    }
}

.RelationDetailPage p,
.RelationDetailPage span {
    margin-bottom: .5rem;
}

.RelationDetailPage__name,
.RelationDetailPage__specialism {
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
}

p.RelationDetailPage__specialism {
    margin-bottom: 1rem;
    color: var(--blue);
}

.RelationDetailPage__organisation {
    margin-block: 0 1.5rem;
    padding-block: 0 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.RelationDetailPage__extraInfo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: 1rem;
    font-size: .9rem;
}

.RelationDetailPage__profilePhoto {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-size: contain;
}

.RelationDetailPage__profilePhoto.--fallback {
    background: url(profielfoto.png) center center no-repeat;
}

.RelationDetailPage__extraInfo span {
    display: block;
}

.RelationDetailPage__contactInformation {
    font-size: .9rem;
}

.RelationDetailPage__organisation,
.RelationDetailPage__name {
    color: var(--purple);
}

.RelationDetailPage a {
    text-decoration: none;
    transition: all ease-in-out .2s;
}

.RelationDetailPage a:hover:not(.button) {
    text-decoration: none;
    color: var(--blue-dark);
}