.wp-block-qe-block-qe-team-members {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	@for $i from 1 through 6 {
		&.has-#{$i}-columns {
			.wp-block-qe-block-qe-team-member {
				width: calc(100% / #{$i} - 20px);
				max-width: var(--width);
			}
		}

		@if $i == 2 {
			&.has-#{$i}-columns{
				.wp-block-qe-block-qe-team-member {
					@media (max-width:767px) {
						width: calc(100% - 20px);
						max-width: var(--width);
					}
				}
			}
		}

		@else if $i == 3 {
			&.has-#{$i}-columns{
				.wp-block-qe-block-qe-team-member {
					max-width: var(--width);
					@media (max-width:1024px) {
						width: calc(50% - 20px);
					}
					@media (max-width:767px) {
						width: calc(100% - 20px);
					}

					.qe-team-social{
						bottom: 0;
					}

					&:hover{
						.qe-team-social{
							bottom: 30px;
						}	
					}

				}
			}
		}
		@else if $i == 4 {
			&.has-#{$i}-columns{
				.wp-block-qe-block-qe-team-member {
					max-width: var(--width);
					@media (max-width:1024px) {
						width: calc(50% - 20px);
					}
					@media (max-width:767px) {
						width: calc(100% - 20px);
					}

					@media (min-width:1025px){
						.qe-team-social{
							bottom: 0;

							.wp-block-qe-block-qe-team-member-social-links {
								ul{
									li{
										a{
											font-size: 20px;
										}
									}
								}
							}
						}
	
						&:hover{
							.qe-team-social{
								bottom: 10px;
							}	
						}
					}
					
				}
			}
		}
		@else if $i == 5 {
			&.has-#{$i}-columns{
				.wp-block-qe-block-qe-team-member {
					max-width: var(--width);
					@media (max-width:1024px) {
						width: calc(50% - 20px);
					}
					@media (max-width:767px) {
						width: calc(100% - 20px);
					}
					.qe-team-social{
						bottom: 0;
					}
					&:hover{
						.qe-team-social{
							bottom: 30px;
						}	
					}
				}
			}
		}
		@else if $i == 6 {
			&.has-#{$i}-columns{
				.wp-block-qe-block-qe-team-member {
					max-width: var(--width);
					@media (max-width:1024px) {
						width: calc(50% - 20px);
					}
					@media (max-width:767px) {
						width: calc(100% - 20px);
					}
					.qe-team-social{
						bottom: 0;
					}

					&:hover{
						.qe-team-social{
							bottom: 30px;
						}	
					}
				}
			}
		}
		
	}
	
	.wp-block-qe-block-qe-team-member {
		margin:10px;
		position: relative;

		&::before{
			content: "";
			position: absolute;
			top: 0;
			width: var(--width);
			height: var(--height);
			left: 0;
			max-width: 100%;
			z-index: 1;
			background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.80) 100%);
		}

		.qe-team-photo{
			position: relative;
			width: var(--width);
			height: var(--height);
			max-width: 100%;

			&::before{
				content: "";
				display: block !important;
				padding-top: 100%;
			}

			&::after{
				content: "";
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: var(--wc-primary);
				opacity: 0.9;
				transition: all 0.2s ease-in-out;
				z-index: 2;
			}

			img {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.qe-team-detail{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			text-align: center;
			z-index: 3;
			display: flex;
			flex-direction: column;
			padding: 15px 15px;
			transition: all 0.2s ease-in-out;

			h4{
				color: #fff;	
				text-transform: uppercase;
				font-size: 16px;
				line-height: 1.1em;
				font-weight: 600;
				margin-bottom: 3px;
				margin-top: 0;
			}
			p{
				font-size: 14px;
				color: rgba(255,255,255,0.8);
				margin: 0;
				line-height: 1.1em;
				text-transform: uppercase;
				opacity: 0;
				transition: all 0.2s ease-in-out;
			}
		}

		.qe-team-social{
			position: absolute;
			bottom: 3px;
			left: 0;
			right: 0;
			transition: all 0.2s ease-in-out;
			opacity: 0;
			z-index: 2;
			pointer-events: none;

			.wp-block-qe-block-qe-team-member-social-links {
				
				ul{
					list-style: none;
					padding: 0;
					margin: 0 ;
					display: flex;
					justify-content: center;
					grid-gap: 20px;
					li{
						display: inline-flex;
						line-height: 1em;
						a{
							text-decoration: none;
							font-size: 25px;
							display: inline-flex;
							line-height: 1em;
						}
						span.dashicon {
							color: #fff;
							font-size: inherit;
							line-height: 1em;
						}
					}
				}
			}
		}

		&:hover{
			.qe-team-detail{
				bottom: 50%;
				transform: translateY(50%);

				p{
					opacity: 1;
				}
			}

			.qe-team-photo{
				&::after{
					top: 0;
				}				
			}

			.qe-team-social{
				bottom: 40px;
				opacity: 1;
				pointer-events: all;
			}
		}
	}

	
	
}