.icons_with_text{
	@extend .coyote-block-wrapper;
	
	&.layout2, &.layout3{
		.container > .row{
			& > div{
				width: 100%;
				.lead-wrapper{
					@media screen and (min-width: 991px){
						max-width: 55%;
					}
				}
				&:nth-child(1){
					order: 2;
					.row{
						& > div{
							@media screen and (min-width: 991px){
								flex: 0 0 auto;
								width: 33.333333%;
							}
						}
					}
				}
				&:nth-child(2){
					order: 1;
					margin-bottom: 4rem;
				}
			}
		}
	}
	&.layout3{
		.container > .row{
			.icon-block{
				background: transparent;
				color: white;
				padding: 4rem 2rem;
				&:not(.has_body){
					text-align: center;
					justify-content: center;
					.mt-auto{
						margin-top: .5rem;
					}
				}
			}
		}
	}
	&.layout1{
		.container > .row{
			& > div{
				@media screen and (max-width: 991px){
					&:nth-child(1){
						order: 2;
					}
					&:nth-child(2){
						order: 1;
						margin-bottom: 4rem;
					}
				}
			}
		}
	}
	a.icon-block{
		cursor: pointer;
	}
	.icon-block{
		text-decoration: unset;
		color: var(--icon-block-color);
		background: var(--icon-block-background);
		display: flex;
		flex-direction: column;
		padding: ($spacer * 2);
		margin-bottom: ($spacer * 1);
		border-radius: $border-radius;
		transition: .2s ease;
		height: 100%;
		user-select: none;
		position: relative;
		z-index: 2;
		overflow: hidden;
		.background-image{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			object-fit: cover;
			filter: brightness(.75);
			transition: 1s cubic-bezier(.3,1,.3,1);
		}
		.icons-wrapper{
			width: ($cy-font-size * 2);
			height: ($cy-font-size * 2);
			display: flex;
			flex-direction: column;
			margin-bottom: 2rem;
			position: relative;
			i{
				margin-bottom: 2rem;
				font-size: ($cy-font-size * 2);
				position: absolute;
				top: 0;
				left: 0;
				transition: .2s ease;
				&:nth-child(1){
					transform: translateY(($cy-font-size * 2));
					opacity: 0;
				}
			}
		}
		&:hover{
			background: var(--icon-block-background-hover);
			color: var(--icon-block-color-hover);
			*{
				color: var(--icon-block-color-hover);
			}
			.icons-wrapper{
				i{
					&:nth-child(1){
						transform: translateY(0);
						opacity: 1;
					}
					&:nth-child(2){
						transform: translateY(($cy-font-size * -2));
						opacity: 0;
					}
				}
			}
			.background-image{
				filter: brightness(.5);
				transform: scale(1.05);
			}
		}
	}
}