Last Mat Card не изменяет размеры компонента высоты

Question

Я работаю над динамическим списком матовых карт.Проблема в том, что последний элемент итерации фактически обрезан.в чем может быть проблема здесь?Это из-за гибкости?Какие-либо предложения?

CSS

section {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.container {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-around;
}

.mat-card {
    margin-top: 10px;
}

.container img {
    max-width: 330px;
    max-height: 180px;
    object-fit: cover;
    object-position: 50% 20%;
}   

HTML

<div  class="container">
    <mat-card  *ngFor="let teacher of dataSource">
        <mat-card-header>
            <div mat-card-avatar></div>
            <mat-card-title>Jane Doe</mat-card-title>
            <mat-card-subtitle>{{teacher.subject}}</mat-card-subtitle>
        </mat-card-header>
        <img mat-card-image [src]="teacher.img" alt="Photo of a Shiba Inu">
        <mat-card-content>
            <table>
                <tr>
                    <th>Phone</th>
                    <td> Lorem ipsum dolor </td>
                </tr>
                <tr>
                    <th>Email</th>
                    <td> Lorem ipsum dolor </td>
                </tr>
            </table>
        </mat-card-content>
        <mat-card-actions>
            <button mat-button>SEND MESSAGE</button>
        </mat-card-actions>
    </mat-card>
</div>

Здесь вы можете найти изображение: https://imgur.com/a/pbOWEzG