<mat-card class="content-container bg-primary text-white" style="border-radius:20px;">
    <mat-card-title>
        <h1 class="my-3 display-1 text-center">
            <span style="color:#ffffff">C</span><span style="color:#bebdff">ertifications</span>
        </h1>
    </mat-card-title>

    <mat-card-subtitle>
        <p class="mb-5 lead text-center">"What is a piece of paper else a note in time?"</p>
    </mat-card-subtitle>

    <mat-card-content>
        <mat-grid-list cols="5" rowHeight="1:1">
            <mat-grid-tile class="cert-container {{certificate.category}}" *ngFor="let certificate of certificates" (click)="showModal(certificate.category+'/'+ certificate.title +'.jpg')">
                <img src="../../../assets/Zertifikate/{{certificate.category}}/{{certificate.title}}.jpg" class="cert-img">
                <p class="overlay">{{certificate.title}}</p>
            </mat-grid-tile>
        </mat-grid-list>
    </mat-card-content>

</mat-card>

<div id="myModal" *ngIf='show'>
    <span class="close" (click)="hideModal()">&times;</span>
    <img class="modal-content" src='../../../assets/Zertifikate/{{show}}'>
</div>