.team-member-image img {
    width: 100%;
    max-height: 335px;
    object-fit: cover;
    border: 2px solid transparent;
    transition: all 0.3s ease-in;
    @media(min-width: 768px) {
        aspect-ratio: 1 / 1;
    }
    
}
.team-member:is(:hover, :focus) {
    opacity: 1;
    p.wp-block-read-more {
        text-decoration: underline !important;
        opacity: 1;
        &::before {
            color: rgb(from var(--wp--preset--color--cobalt) r g b / 30%) !important;
        }
        &::after {
            color: var(--wp--preset--color--cobalt);
        }
    }
    img {
        border: 2px solid var(--wp--preset--color--navy);
    }
}
.team-members {
    display: grid;
    row-gap: var(--wp--preset--spacing--50);
    @media(min-width: 768px) {
        grid-template-columns: repeat(3 ,1fr);
        column-gap: var(--wp--preset--spacing--40);
        row-gap: var(--wp--preset--spacing--50);
    }
}
.team-members .wp-block-heading:has(.wp-block-read-more) {
    position: relative;
    p {
        display: block;
        width: 100%;
        transition: all 0.3s ease-in;
    }
    p::before,
    p::after {
        font-family: 'Font Awesome 6 Pro';
        position: absolute;
        right: 0;
        transition: all 0.3s ease-in;
    }
    p::before {
        content: '\f312';
        font-weight: 800;
        color: var(--wp--preset--color--cobalt);
        font-size: 2rem;
        top: -9px;
    }
    p::after {
        content: '\f061';
        font-weight: 500;
        color: var(--wp--preset--color--glacier);
        transform: rotate(-45deg);
        font-size: 1.25rem;
        right: 7px;
        top: 1px;
    }
}
.team-modal {
    .biography p:first-of-type {
        margin-top: 0;
    }
    .biography p {
        line-height: 1.55;
    }
    .wp-block-image img {
        aspect-ratio: 4 / 3;
        border-radius: 10px;
    }
}