.ro-relationSingle__section {
    margin-block-end: var(--marginMedium);
}

.ro-relationSingle__section.--title {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--marginSmall);
    padding: var(--marginSmallMedium);
    background-color: var(--primaryColor100);
    border-radius: var(--pbui-radius);
}

.ro-relationSingle__titleWrapper > * {
    text-align: center;
}

.ro-relationSingle__section.--field {
    max-width: var(--maxTextWidth);
}

.ro-contact {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: var(--marginSmallMedium);
    row-gap: var(--marginExtraSmall);
}

.ro-contact + .ro-contact {
    margin-top: var(--marginSmall);
}

.ro-contact.--socials {
    column-gap: var(--marginExtraSmall);
}

.ro-relationSingle__address {
    margin-bottom: var(--marginSmall);
    font-style: normal;
}

.ro-relationSingle__address div {
    white-space: pre-line;
}

/**
 * Image
 */

.ro-relationSingle__imageWrapper {
    order: -1;
    margin-inline: auto;
}

.ro-relationSingle__figure {
    flex: 0 1 180px;
    margin: 0;
}

.ro-relationSingle__img {
    padding: 2%;
    background: var(--baseLight100);
    object-fit: contain;
}

.ro-relationSingle__img:not(.ro-relationSingle__img--oval) {
    border-radius: var(--pbui-radius);
}

.ro-relations--cover .ro-relationSingle__img {
    object-fit: cover;
}

.ro-relationSingle__img--oval {
    border-radius: 50%;
}

/** In order to achieve a balanced visual, center-align the text when the above image is oval. */
.ro-relationSingle__figure:has(.ro-relationSingle__img--oval) + .ro-relationSingle__header {
    align-self: center;
}

.ro-relationSingle__img--portrait {
    aspect-ratio: 3/4 ;
}

.ro-relationSingle__img--landscape {
    aspect-ratio: 4/3;
}

@media (min-width: 450px) {
    .ro-relationSingle__section.--title:has(.ro-relationSingle__img) {
        grid-template-columns: min(180px, 33%) 1fr;
        column-gap: clamp(1.2rem, 5vw, 2rem);
    }

    .ro-relationSingle__titleWrapper > * {
        text-align: left;
    }

    .ro-relationSingle__imageWrapper {
        margin-inline: 0;
    }

    .ro-contact {
        justify-content: flex-start;
    }
}