.aft-staff-container {
    display:                    grid;
    grid-template-columns:      1fr;
    gap:                        0.75rem;
    position:                   relative;
}

.aft-staff-profile {
    background-color:           white;
    border:                     1px solid #ddd;
    border-radius:              8px;
    box-shadow:                 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow:                   hidden;
    display:                    flex;
    justify-content:            space-between;
    box-sizing:                 border-box;
    width:                      100%;
    flex-direction:             row;
    align-items:                center;
}

.aft-staff-image-wrapper {
    --w:                        75px;
    position:                   relative;
    box-sizing:                 border-box;
    overflow:                   hidden;
    display:                    flex;
    justify-content:            center;
    align-items:                center;
    width:                      var(--w);
    padding-top:                var(--w);
    flex-shrink:                0;
    background-color:           #f5f5f5;
    height:                     100%;
}

.aft-staff-image {
    position:                   absolute;
    top:                        0;
    left:                       0;
    width:                      100%;
    height:                     100%;
    object-fit:                 cover;
    border:                     none;
}

.aft-staff-content {
    width:                      100%;
    text-align:                 left;
    display:                    flex;
    flex-direction:             row;
    justify-content:            space-between;
    align-items:                flex-start;
    gap:                        0.325rem;
    padding:                    1rem;
    flex-grow:                  1;
    height:                     100%;
}
    .aft-staff-content > div {
        display:                flex;
        flex-direction:         column;
        gap:                    0.325rem;
        align-self:             center;
    }

.aft-staff-name {
    flex:                       1;
    margin-bottom:              0px;
    white-space:                normal;
    overflow:                   visible;
    text-overflow:              clip;
    font-size:                  1.125rem;
    line-height:                1.125;
    color: var(--wp--preset--color--primary-dark);
}

.aft-staff-profile .aft-staff-title {
    color:                      var(--wp--preset--color--primary);
    line-height:                1.325;
    font-size:                  14px;
}

.aft-staff-profile .aft-staff-button {
    align-self:                 center;
    padding:                    1rem;
    line-height:                1;
    display:                    flex;
}
    .aft-staff-profile .aft-staff-button span {
        display:                none;
    }

.aft-staff-description {
    font-size:                  1em;
    color:                      #666;
    margin-bottom:              20px;
}

/* @media (min-width: 450px) {
    .aft-staff-image-wrapper {
        --w:                    130px;
    }
    .aft-staff-content {
        flex-direction:         column;
    }
    .aft-staff-name {
        font-size:              1.375rem;
        line-height:            1.125;
    }
    .aft-staff-profile .aft-staff-button {
        align-self:             flex-end;
    }
        .aft-staff-profile .aft-staff-button span {
            display:            block;
        }

} */


@media (min-width: 600px) {
    .aft-staff-container {
        gap:                    1.75rem 1.5rem;
        grid-template-columns:  repeat(2, minmax(10px, 1fr));
    }

    .aft-staff-profile {
        align-items:            flex-start;
        flex-direction:         column;
    }

    .aft-staff-image-wrapper {
        width:                  100%;
        padding-top:            100%;
        background-color:       #f5f5f5;
        flex-shrink:            initial;
        height:                 auto;
    }

    .aft-staff-content {
        padding:                1rem;
        flex-direction:         row;
    }

    .aft-staff-content > div {
        /* margin-bottom:          0.375rem; */
    }
}

@media (min-width: 900px) {
    .aft-staff-container {
        grid-template-columns:  repeat(3, minmax(10px, 1fr));
        gap:                    1.5rem 1.25rem;
    }
}

@media (min-width: 1200px) {
    .aft-staff-container {
        grid-template-columns:  repeat(4, minmax(10px, 1fr));
    }
}