.fc_block_links {
	.links_container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}
	&.grid_3 {
		.links_container {
			grid-template-columns: repeat(3, 1fr);
		}
	}
	&.grid_2 {
		.links_container {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	&.gap {
		.links_container {
			gap: var(--gap-s);
		}
		.block_link {
			.image-switch {
				border-radius: var(--border-radius-m);
				overflow: hidden;

				&:before {
					border-radius: var(--border-radius-m);
				}
			}
		}
		&.overlay {
			.block_link {
				&:before {
					border-radius: var(--border-radius-m);
				}
				.icon_button {
					background: var(--deep-grey);
					border-color: var(--deep-grey);
				}
			}
		}
	}
	.block_link {
		position: relative;
		text-decoration: none;
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(180deg, rgba(207, 105, 138, 0.95) 0%, rgba(183, 46, 84, 0.95) 100%);
			opacity: 0;
			transition: all 0.3s ease;
		}
		&:hover {
			&:before {
				opacity: 1;
			}
			.icon_button {
				&:before {
					transform: rotateZ(45deg);
				}
			}
		}
		.icon_button {
			position: absolute;
			top: 20px;
			right: 20px;
			margin: 0;
		}
		.image-switch {
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			aspect-ratio: 480 / 550;
		}
		.wp_content {
			position: absolute;
			bottom: 20px;
			left: 20px;
			z-index: 1;
			* {
				color: var(--white);
				font-weight: 700;
			}
		}
	}
	&.below {
		.block_link {
			position: relative;
			&:before {
				content: none;
			}
			.image-switch {
				position: relative;
				&:before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					opacity: 0;
					background: linear-gradient(180deg, rgba(207, 105, 138, 0.95) 0%, rgba(183, 46, 84, 0.95) 100%);
					transition: all 0.3s ease;
				}
			}
			&:hover {
				.image-switch {
					&:before {
						opacity: 1;
					}
				}
			}
			.wp_content {
				position: relative;
				bottom: auto;
				left: auto;
				padding-top: 20px;
			}
		}
	}
}

@media (600px < width <= 1200px) {
	.fc_block_links {
		.links_container {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}

@media (width <= 800px) {

	.fc_block_links {
		&.grid_3 {
			.links_container {
				grid-template-columns: repeat(1, 1fr);
			}
		}
	}

}
@media (width <= 600px) {
	.fc_block_links {
		.links_container {
			grid-template-columns: 1fr;
		}
	}
}