<div class="grid-wrapper" fxLayout="row wrap">	
	<div class="social-icon-list" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">
		<mat-card class="p-0">
			<div class="card-content p-4">
				<div class="facebook text-align" fxLayoutAlign="space-between center">
					<span class="social-icon radius-circle border">
						<mat-icon matListIcon class="list-icon {{socialData.facebook.socialIcon}}"></mat-icon>
					</span>
					<span class="social-desc" fxLayoutAlign="start start">
						<span class="text-align social-data">
							<span class="anglo-block font-bold">{{socialData.facebook.friends}}</span>
							<span>Friends</span>
						</span>
						<span class="text-align social-data"> 
							<span class="anglo-block font-bold">{{socialData.facebook.feeds}}</span>
							<span>Feeds</span>
						</span>
					</span>		
				</div>
			</div>	
		</mat-card>	
	</div>
	<div class="social-icon-list" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">		
		<mat-card class="p-0">
			<div class="card-content p-4">
				<div class="twitter" fxLayoutAlign="space-between center">	
					<span class="social-icon radius-circle border">
						<mat-icon matListIcon class="list-icon {{socialData.twitter.socialIcon}}"></mat-icon>
					</span>
					<span class="social-desc" fxLayoutAlign="start start">
						<span class="text-align social-data"> 
							<span class="anglo-block font-bold">{{socialData.twitter.friends}}</span>
							<span>Friends</span>
						</span>	
						<span class="text-align social-data">
							<span class="anglo-block font-bold">{{socialData.twitter.feeds}}</span>
							<span>Feeds</span>
						</span>
					</span>		
				</div>	
			</div>	
		</mat-card>	
	</div>
	<div class="social-icon-list" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">		
		<mat-card class="p-0">	
			<div class="card-content p-4">
				<div class="linkedin" fxLayoutAlign="space-between center">	
					<span class="social-icon radius-circle border">
						<mat-icon matListIcon class="list-icon {{socialData.linkedin.socialImg}}"></mat-icon>
					</span>
					<span class="social-desc" fxLayoutAlign="start start">
						<span class="text-align social-data">
							<span class="anglo-block font-bold">{{socialData.linkedin.friends}}</span>
							<span>Friends</span>
						</span>	
						<span class="text-align social-data">
							<span class="anglo-block font-bold">{{socialData.linkedin.feeds}}</span>
							<span>Feeds</span>
						</span>	
					</span>	
				</div>
			</div>	
		</mat-card>	
	</div>
	<div class="social-icon-list" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="25" fxFlex.lg="25" fxFlex.xl="25">		
		<mat-card class="p-0">
			<div class="card-content p-4">
				<div class="google" fxLayoutAlign="space-between center">	
					<span class="social-icon radius-circle border">
						<mat-icon matListIcon class="list-icon {{socialData.google.socialImg}}"></mat-icon>
					</span>
					<span class="social-desc" fxLayoutAlign="start start">
						<span class="text-align social-data">
							<span class="anglo-block font-bold">{{socialData. google.friends}}</span>
							<span>Friends</span>
						</span>	
						<span class="text-align social-data">
							<span class="anglo-block font-bold">{{socialData. google.feeds}}</span>
							<span>Feeds</span>
						</span>	
					</span>	
				</div>
			</div>			
		</mat-card>	
	</div>
</div>			
