.wp-block-lazyblock-featured-blocks {
	border-bottom: 1px solid var(--border);
	padding-top: 3rem;
	margin-bottom: 3rem;
	.content-inset {
		display: grid;
		grid-template-columns: repeat(3, 1fr);

		.block-item {
			position: relative;
			overflow: hidden;

			&:hover {
				.block-info {
					--featuredBlocksColor1: rgba(0, 0, 0, 1);
					--featuredBlocksColor2: rgba(0, 0, 0, 0);
					.block-info-content {
						max-height: 500px;
					}
				}
				.image {
					img {
						transform: scale(1.2);
						transition: transform 0.5s ease-in-out;
					}
				}
			}

			.block-info {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				z-index: 1;
				background: linear-gradient(
					360deg,
					var(--featuredBlocksColor1) 0%,
					var(--featuredBlocksColor2) 100%
				);
				transition:
					--featuredBlocksColor1 1s,
					--featuredBlocksColor2 1s;
				display: flex;
				justify-content: flex-end;
				padding: 2rem;
				flex-direction: column;

				h3 {
					font-weight: bold;
					text-transform: uppercase;
					color: var(--text-alt);
					font-size: 2rem;
					font-weight: 500;
					margin: 0;
				}

				.block-info-content {
					max-height: 0;
					overflow: hidden;
					transition: max-height 0.5s ease-in-out;
					.pages {
						border-left: 2px solid var(--text-alt);
						padding-left: 20px;
						display: flex;
						flex-direction: column;
						gap: 10px;
						margin: 20px 0;
						margin-bottom: 40px;

						a {
							color: var(--text-alt);
							text-decoration: none;
							font-size: 1.125rem;

							&:hover {
								opacity: 0.7;
							}
						}
					}
				}
			}

			.image {
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition: transform 0.5s ease-in-out;
					display: block;
				}

				aspect-ratio: 61 / 89;
			}
		}
	}
}