// Featured Locations Section
@import 'variables';

.itre-agents {
    margin-bottom: 2rem;

    @media (min-width: 60rem) {
        margin-bottom: 3rem;
    }

    &__agents {
        display: grid;
        gap: 1.5rem;

        @media (min-width: 48rem) {
            grid-template-columns: 1fr 1fr;
        }

        @media (min-width: 60rem) {
            grid-template-columns: repeat(4, 1fr);;
        }
    }

    &__agents {
        margin-top: 1.25rem;
    }

    &__agent {
        display: flex;
        flex-direction: column;
        border-radius: 1.25rem;
        overflow: hidden;
        background-color: #f5f5f5;

        &-details {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 0 1rem 1.5rem;
        }

        &-name {
            margin-bottom: 0;
        }

        &-role {
            color: var(--accent);
            margin-bottom: 0;
        }

        &-description {
            display: -webkit-box;
            line-clamp: 3;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-top: 1rem;
            
        }

        &-links {
            margin-top: auto;
        }
    }

    figure {
        position: relative;
        width: 100%;
        padding-bottom: 80%;
    }

    img {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        object-fit: cover;
    }
}