@use "../base/mixins";


section.flexi-block.block--meet-the-team-02 {
    .content, .block-heading {
        margin-bottom: 40px;
        max-width: 850px;
        text-align: center;

        h1, h2 {
            font-size: clamp(1.75rem, 4vw, 3rem);
            line-height: 1.125;
            max-width: 995px;
            margin: 0 auto clamp(18px, 4vw, 33px);
        }

        .eyebrow {
            color: var(--c-primary);
            font-size: clamp(.875rem, 4vw, 1.125rem) !important;
            margin-bottom: clamp(8px, 4vw, 12px) !important;
        }
    }

    .team-cards {
        display: grid;
        gap: var(--site-gutter);
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .team-card {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;

        &__headshot {
            position: relative;
            aspect-ratio: 1/1 !important;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            max-width: 250px;
            max-height: 250px;
            height: auto;
            margin-bottom: 20px;
            overflow: hidden;

            img {
                @include mixins.object-fit;
            }
        }

        &__name {
            font-family: var(--t-heading-font-family), sans-serif;
            font-size: clamp(1.375rem, 4vw, 1.75rem);
            margin-bottom: 15px;
        }

        &__role {
            font-size: clamp(1rem, 3vw, 1.125rem);
            margin-bottom: 8px;
        }

        &__bio {
            font-size: clamp(1rem, 3vw, 1.125rem);
            line-height: 1.5;
            letter-spacing: .8px;
            max-width: 400px;
        }
    }

}