.unterstuetzer .featuredOrganisations,
.unterstuetzer .organisations,
.unterstuetzer .featuredPersons,
.unterstuetzer .persons {
    --avatarSize: 30vh;

    display: grid;
    gap: 1em;
    grid-template-columns: repeat(5, 1fr);
    justify-content: space-between;
}

.unterstuetzer .featuredOrganisations {
    gap: 4em;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 16vh;
}

.unterstuetzer .featuredPersons {
    margin-bottom: 32vh;
}

.unterstuetzer .featuredPersons,
.unterstuetzer .persons {
    gap: 8vh;
    grid-template-columns: auto;
}

.unterstuetzer .featuredOrganisations .organisation .image,
.unterstuetzer .organisations .organisation .image {
    text-align: center;
}

.unterstuetzer .featuredPersons .person,
.unterstuetzer .persons .person {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.unterstuetzer .persons .person:nth-of-type(odd) {
    flex-direction: row-reverse;
}

.unterstuetzer .featuredPersons .person .image,
.unterstuetzer .persons .person .image {
    flex: 0 0 var(--avatarSize);
    height: var(--avatarSize);
    margin-right: 4vw;

    border: 2px solid var(--colourGreenDark);
    border-radius: 50%;
    overflow: hidden;
}

.unterstuetzer .persons .person:nth-of-type(odd)  .image {
    margin-right: 0;
    margin-left: 4vw;
}

.unterstuetzer .featuredOrganisations .organisation .image a,
.unterstuetzer .organisations .organisation .image a,
.unterstuetzer .featuredPersons .person .image a,
.unterstuetzer .persons .person .image a {
    display: block;
}

.unterstuetzer .featuredOrganisations .organisation .image img,
.unterstuetzer .organisations .organisation .image img,
.unterstuetzer .featuredPersons .person .image img,
.unterstuetzer .persons .person .image img {
    height: 142px;

    object-fit: contain;
}

.unterstuetzer .featuredPersons .person .image img,
.unterstuetzer .persons .person .image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.unterstuetzer .featuredOrganisations .organisation .details .name,
.unterstuetzer .organisations .organisation .details .name {
    transition: opacity 0.2s ease;

    font-size: 0.6em;

    text-align: center;
    opacity: 0;
}

.unterstuetzer .featuredOrganisations .organisation:hover .details .name,
.unterstuetzer .organisations .organisation:hover .details .name {
    opacity: 1;
}

.unterstuetzer .featuredPersons .person .details > .name,
.unterstuetzer .persons .person .details > .name {
    position: relative;

    padding-left: calc( 1em + 0.5ch );
    margin-left: 1em;
}

.unterstuetzer .featuredPersons .person .details > .name::before,
.unterstuetzer .persons .person .details > .name::before {
    content: '';

    position: absolute;
    top: calc( 1em * var(--lineHeightDefault) / 2 - 0.5px );
    left: 0;

    display: block;
    width: 1em;
    height: 1px;

    background-color: var(--colourText);
}

.unterstuetzer .featuredPersons .person .details > .name span.name,
.unterstuetzer .persons .person .details > .name span.name {
    font-weight: bold;
}

.unterstuetzer .featuredPersons .person .details .testimonial,
.unterstuetzer .persons .person .details .testimonial {
    margin-bottom: 1em;

    font-style: italic;
    overflow: auto;
}

.unterstuetzer .featuredPersons .person .details .testimonial::before,
.unterstuetzer .featuredPersons .person .details .testimonial::after,
.unterstuetzer .persons .person .details .testimonial::before,
.unterstuetzer .persons .person .details .testimonial::after {
    content: '"';
}

@media(max-width: 1280px) {
    .unterstuetzer .organisations {
        grid-template-columns: repeat(5, 1fr);
    }

    .unterstuetzer .featuredOrganisations {
        grid-template-columns: repeat(3, 1fr);
    }

    .unterstuetzer .featuredPersons,
    .unterstuetzer .persons {
        grid-template-columns: auto;
    }

    .unterstuetzer .featuredPersons .person,
    .unterstuetzer .persons .person {
        align-items: flex-start;
    }

}

@media(max-width: 1024px) {
    .unterstuetzer .organisations {
        grid-template-columns: repeat(4, 1fr);
    }

    .unterstuetzer .featuredOrganisations {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 768px) {
    .unterstuetzer .organisations {
        grid-template-columns: repeat(3, 1fr);
    }

    .unterstuetzer .featuredPersons .person,
    .unterstuetzer .persons .person {
        flex-direction: column !important;
        align-items: center;
    }

    .unterstuetzer .featuredPersons .person .image,
    .unterstuetzer .persons .person .image {
        width: var(--avatarSize);
        margin: 0 0 4vw 0;
    }
}

@media(max-width: 512px) {
    .unterstuetzer .featuredOrganisations,
    .unterstuetzer .organisations {
        grid-template-columns: auto;
    }

    .unterstuetzer .featuredPersons .persons,
    .unterstuetzer .persons {
        --avatarSize: calc(100vw - var(--paddingDefaultX) * 2 - 4px);
    }

    .unterstuetzer .featuredPersons .person .image,
    .unterstuetzer .persons .person .image {
        width: var(--avatarSize);
        height: var(--avatarSize);
    }
}