.teamintro{
    max-width: 60ch;
    margin: 0 0 1.5rem 0;
    color: var(--wp--preset--color--text);
    opacity: .75;
}

.teamrow{

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 2rem;

    article{
        overflow: hidden;
        border-radius: var(--wp--custom--border-radius);
        background: var(--wp--preset--color--mid);
        transition: var(--wp--custom--main-trans);

        figure{
            margin: 0;
            aspect-ratio: 1 / 1;
            height: auto;
            width: 100%;
            overflow: hidden;
            position: relative;

            img{
                object-fit: cover;
                width: 100%;
                height: 100%;
                 transition: var(--wp--custom--main-trans);
            }

            figcaption{
                position: absolute;
                top: var(--wp--custom--border-radius);
                left: 0;
                color: var(--wp--preset--color--light);
                backdrop-filter: blur(10);
                background-color:rgba(0, 0, 0, .5);
                padding: .5rem;
                border-top-right-radius: var(--wp--custom--border-radius);
                border-bottom-right-radius: var(--wp--custom--border-radius);
                font-size: .8rem;
            }
        }

        .content{
            padding: var(--wp--preset--spacing--30);

            h4{
                 margin-bottom: .5rem !important;
                 font-size: 1.5rem !important;
                  text-wrap: balance;
                  color: var(--wp--preset--color--accent);
            }

            span{
                font-size: 1rem;
            }

            hr{
                margin: 1rem 0;
            }

            .meta{
                display: flex;
                gap: var(--wp--preset--spacing--10);


                span{
                    min-width: 10ch;

                    p{
                        margin-bottom: 0;
                    }
                }
            }

            .btn{
                
                background-color: var(--wp--preset--color--accent);
                border-radius: var(--wp--custom--border-radius);
                border-color: var(--wp--preset--color--accent);
                border-width: var(--wp--custom--border-width);
                border-style: var(--wp--custom--border-style);
                color: var(--wp--preset--color--light);
                text-align: center;
                font-weight: 600;
                padding-top: var(--wp--preset--spacing--10);
                padding-right: var(--wp--preset--spacing--20);
                padding-bottom: var(--wp--preset--spacing--10);
                padding-left: var(--wp--preset--spacing--20);
                display: inline-block;
                width: 50%;

                &:hover{
                    background-color: var(--wp--preset--color--text);
                    border-color: var(--wp--preset--color--text);
                }

                &.dark{
                    background-color: var(--wp--preset--color--text);
                    border-color: var(--wp--preset--color--text);

                    &:hover{
                        background-color: var(--wp--preset--color--accent);
                        border-color: var(--wp--preset--color--accent);
                    }
                }

            }
        }

        &:hover{
            box-shadow: var(--wp--custom--box-shadow);

            figure{
                img{
                    scale: 1.1;
                }
            }
        }

    }

}