<h3>{{'services' | i18n}}</h3>

<div fxLayout="row wrap" fxLayoutGap="16px grid">
    <div fxFlex="33.33%" fxFlex.sm="50%" fxFlex.xs="100%" *ngFor="let service of services">
        <mat-card>
            <mat-card-header>
                <mat-icon>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
                <mat-card-title>{{'services.' + service.name + '.title' | i18n}}</mat-card-title>
                <mat-card-subtitle>{{'services.' + service.name + '.subtitle' | i18n}}</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
                <p>
                    {{ 'services.' + service.name + '.text' | i18n}}
                </p>
            </mat-card-content>
            <mat-card-actions>
                <a href="{{service.url}}" target="_blank" mat-raised-button color="primary">{{'services.goto' |
                    i18n}}</a>
            </mat-card-actions>
        </mat-card>
    </div>
</div>