﻿.at-speakers__speakers {
    margin: 0;
    padding: 0;
    list-style: '';
}

.at-speakers__speaker {
    display: flex;
    flex-direction: column;
    gap: var(--marginMedium);
    padding-block: var(--marginMedium);
    border-top: 1px solid var(--baseDark100);
}

.at-speakers__image {
    width: 100%;
}

.at-speakers__name {
    font-size: var(--h5Size);
}

.at-speakers_job {
    display: block;
    margin-block-end: var(--marginMedium);
    font-size: var(--14Size);
    color: var(--baseDark900);
}

@media (min-width: 600px) {
    .at-speakers__speaker {
        flex-direction: row;
        align-items: center;
        gap: 4rem;
    }

    .at-speakers__picture {
        flex: 0 0 33%;
        max-width: 284px;
    }

    .at-speakers__name {
        font-size: var(--h4Size);
    }
}

@media (min-width: 768px) {
    .at-speakers__speakers {
        max-width: var(--maxIndentWidth);
        margin-inline: auto;
    }

    .at-speakers__speaker {
        gap: 7.25rem;
    }
}

/**
 * speakers grid List
 */

@media (min-width: 512px) {
    .at-speakers__speakers.u-gridList {
        grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    }

    .u-gridList .at-speakers__speaker {
        flex-direction: column;
        gap: var(--gridGap);
    }

    .u-gridList .at-speakers__picture {
        flex: 0;
    }

    .u-gridList .at-speakers__bio {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: initial;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
    }
}
