/**
 * hana+nils · Büro für Gestaltung
 * https://hananils.de · buero@hananils.de
 */

/* Team Member cards */

.secondary .card.team + .team {
    margin-top: 3.8rem;
}

.card.team > a {
    display: block;
    background-color: #e08e29;
    aspect-ratio: 3 / 2;
}

.card.team h3 a {
    text-decoration: none;
}

.card.team p {
    display: flex;
    flex-direction: column;
}

.card.team p strong {
    margin-bottom: 1.275rem;
}

.card.team p a {
    font-variant-numeric: normal;
    /* font-size: var(--text-size-small); */
}

.card.team h3 {
    margin-top: 2.55rem;
    margin-bottom: 0.425rem;
    font-size: var(--text-size-4);
    line-height: var(--text-line-4);
}

.secondary .card.team h3 {
    margin-top: 1.7rem;
    margin-bottom: 0;
    font-size: var(--text-size);
    font-weight: var(--text-weight-extrablack);
    font-variant: normal;
    line-height: var(--text-line);
    letter-spacing: 0;
    text-transform: none;
}

.card.team-full h3 {
    margin-bottom: 0.85rem;
}

.card.team-full header {
    flex-direction: column;
    margin: 0;
}

.card.team-full picture {
    margin: 2.55rem 0;
}

/* Project cover cards */

.card.cover {
    max-width: 100%;
    height: initial;
    min-height: 60vw;
    margin-top: 5.75rem;
    margin-bottom: 3.4rem;
}

@media (min-width: 600px) {
    .card.cover {
        min-height: initial;
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 599px) {
    .context-news .card.cover .title {
        padding-right: var(--spacing-base-small);
        padding-bottom: 3.8rem;
        padding-left: var(--spacing-base-small);
    }
}

/* News cards */

.card.news {
    display: flex;
    flex-direction: column;
    margin-top: 3.8rem;
    background-color: #f2f2f2;
}

.card.news .cover {
    display: block;
    width: 100%;
    height: auto;
    min-height: auto;
    aspect-ratio: 3 / 2;
}

.card.news header {
    margin: 0;
    padding: 2.1rem 2.8rem;
}

.card.news h3 {
    margin: 0;
    font-size: var(--text-size);
    line-height: var(--text-line);
}

.card.news .subline {
    margin-top: 0;
}

@media (min-width: 1200px) {
    .card.news {
        flex-direction: row;
        min-height: 14rem;
    }

    .card.news .cover {
        flex-shrink: 0;
        width: 30%;
        aspect-ratio: initial;
    }
}