.teamcards{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;

	.contact-item{
		position: relative;
		width: calc( 33.33% - 16.6667px );
		max-width: min( 324px, 100% );

		@media (max-width: 991px){
			width: calc( 50% - 12.5px );
		}

		@media (max-width: 767px){
			font-size: 14px;
		}

		@media (max-width: 575px){
			width: 100%;
		}

		&::before{
			content: '';
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(180deg,rgba(0,0,0,0) 44%,rgba(0,0,0,.66) 100%);
		}

		&::after{
			content: '';
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--wp--preset--color--red);
			mix-blend-mode: multiply;
			transition: opacity .3s ease;
			opacity: 0;
		}
		&:hover::after{
			opacity: 1;
		}

		.text{
			position: absolute;
			z-index: 3;
			bottom: 32px;
			left: 32px;
			right: 32px;
			color: #fff;

			@media (max-width: 767px){
				bottom: 20px;
				left: 20px;
				right: 20px;
			}
		}

		.name{
			margin: 30px 0 0;
			font-size: 24px;
			font-weight: 700;
			transition: margin-bottom .3s ease;

			@media (max-width: 767px){
				margin: 20px 0 0;
			}
		}
		&:hover .name{
			margin-bottom: 30px;

			@media (max-width: 767px){
				margin-bottom: 20px;
			}
		}

		.info{
			display: grid;
			grid-template-rows: 0fr;
			transition: grid-template-rows .3s ease;

			& > div{
				overflow: hidden;
			}
		}
		&:hover .info{
			grid-template-rows: 1fr;
		}
	}
}