.articles-grid {
	display: grid;
	/* grid-template-rows: repeat(1, minmax(0, 1fr)); */
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 23px;
	padding: 36px 10px;
	margin-top: 0 !important;

	.featured-article {
		grid-row-end: 6;
		grid-row-start: 1;
		grid-column-start: 4;
		grid-column-end: 10;

		.text-info {
			display: flex;
			flex-direction: column;
			gap: 5px;
			justify-content: flex-start;
			align-items: center;
		}

		.featured-image {
			width: 100vw;
			object-fit: cover;
			aspect-ratio: 599/393;
		}
	}

	.article {
		img {
			aspect-ratio: 287/188;
			width: 100vw;
			height: auto;
			object-fit: cover;
		}

		.text-info {
			display: flex;
			flex-direction: column;
			gap: 5px;
			justify-content: flex-start;
			align-items: center;
		}
	}

	.second,
	.third {
		grid-column-start: 1;
		grid-column-end: 4;
	}

	.second,
	.fourth {
		grid-row-start: 1;
	}

	.third,
	.fifth {
		grid-row-start: 3;
	}

	.fourth,
	.fifth {
		grid-column-start: 10;
		grid-column-end: 13;
	}
	.second {
		grid-row-end: 3;
	}
	.third {
		grid-row-end: 5;
	}
	.fourth {
		grid-row-end: 3;
	}
	.fifth {
		grid-row-end: 5;
	}

	.article,
	.featured-article {
		display: flex;
		flex-direction: column;
		gap: 10px;
		align-items: center;
	}

	.post-title {
		font-size: 18px;
		text-align: center;
		font-weight: 600;
		text-transform: uppercase;
		line-height: 1.3;
		margin-bottom: 20px;

		.featured-article & {
			font-size: 28px;
			width: 80%;
		}

		a {
			text-decoration: none;
		}
	}

	.category {
		text-transform: uppercase;
		text-decoration: none;
	}
}

.wp-block-post-content {
	.latest-post-block {
		margin-top: 45px !important;
		margin-block-start: 45px;

		.wp-block-heading {
			font-weight: 900;
			font-size: clamp(32px, 1.5992rem + 1.5564vw, 48px);
			line-height: 100%;
			margin-bottom: 0;
			text-transform: uppercase;
			font-family: 'Inter', arial, sans-serif;
		}

		.view-all {
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			position: relative;
			color: white;
			width: max-content;
			padding: 10px;
			z-index: 2;
			cursor: pointer;
			position: relative;
			grid-row-start: 4;
			grid-row-end: 5;
			grid-column-start: 4;
        	grid-column-end: 10;
			width: 100%;
            height: 100%;

			a {
				text-decoration: none;

				@media (hover: hover) and (pointer: fine) {
					&:hover {
						text-decoration-line: none;
					}
				}
			}

			@media (hover: hover) and (pointer: fine) {
				&:hover::before {
					background-color: rgba(0, 0, 0, 0.05);
				}
			}

			&::after {
				content: "";
				display: inline-block;
				width: 19px;
				height: 20px;
				background-image: var(--button-arrow);
				background-size: contain;
				background-repeat: no-repeat;
				margin-left: 8px;
				vertical-align: middle;
			}

			.button-3d {
				display: inline-block;
				margin-left: 20px;
				perspective: 1000px;
				margin-top: 10px;
				--button-height: 50px;
  				--horizontal-padding: 30px;
				.btn-3d {
					display: inline-block;
					position: relative;
					width: 100%;
					height: var(--button-height);
					transform-style: preserve-3d;
					transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
					backface-visibility: hidden;
				}

				.btn-3d-front,
				.btn-3d-bottom {
					position: absolute;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					backface-visibility: hidden;
					border-radius: 0;
					font-size: var(--wp--preset--font-size--medium);
					font-weight: 400;
					color: white;
					line-height: 1;
					letter-spacing: 3%;
					/* Fix blurry text without breaking 3D */
					-webkit-font-smoothing: antialiased;
					text-rendering: optimizeLegibility;

					&::after {
						content: "";
						display: inline-block;
						width: 19px;
						height: 20px;
						background-size: contain;
						background-repeat: no-repeat;
						margin-left: 8px;
						vertical-align: middle;
						color: inherit;
					}
				}

				.btn-3d-front {
					background-color: #E12227;
					color: white;
					transform: translateZ(calc(var(--button-height) / 2));
					&::after {
						background-image: var(--button-arrow);
					}
				}

				.btn-3d-bottom {
					background-color: #f99421;
					color: #333;
					transform: rotateX(-90deg) translateZ(calc((var(--button-height) / 2) + 1px));
					&::after {
						background-image: var(--button-arrow-dark);
					}
				}

				@media (hover: hover) and (pointer: fine) {
					.btn-3d:hover {
						transform: rotateX(90deg);
					}
				}

				.btn-3d-measure {
					display: inline-block;
					visibility: hidden;
					padding: 0 var(--horizontal-padding);
					height: var(--button-height);
					white-space: nowrap;
					@media screen and (max-width: 991px) {
						white-space: wrap;
					}
				}
			}
			&.mobile-only {
				display: none;
			}
		}

		.wp-block-wpamsive-button-3d.button-3d {
			display: inline-block;
			perspective: 1000px;
			--button-height: 52px;
		}

		.wp-block-wpamsive-button-3d.button-3d .btn-3d {
			pointer-events: inherit !important;
			display: block;
			position: relative;
			height: var(--button-height);
			transform-style: preserve-3d;
			transition: transform 0.6s;
		}

		.wp-block-wpamsive-button-3d.button-3d .btn-3d-front,
		.wp-block-wpamsive-button-3d.button-3d .btn-3d-bottom {
			position: absolute;
			width: auto;
			height: 100%;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			backface-visibility: hidden;
			border-radius: 0;
			color: white;
			padding: 0 20px;
			white-space: nowrap;
		}

		.wp-block-wpamsive-button-3d.button-3d .btn-3d-front::after, .wp-block-wpamsive-button-3d.button-3d .btn-3d-bottom::after {
			content: "";
			display: inline-block;
			width: 19px;
			height: 20px;
			background-size: contain;
			background-repeat: no-repeat;
			margin-left: 8px;
			vertical-align: middle;
			color: inherit;
			flex-shrink: 0;
		}

		.wp-block-wpamsive-button-3d.button-3d .btn-3d-front {
			background-color: #E12227;
			color: white;
			transform: translateZ(calc(var(--button-height) / 2));
		}

		.wp-block-wpamsive-button-3d.button-3d .btn-3d-front::after {
			background-image: var(--button-arrow);
		}

		.wp-block-wpamsive-button-3d.button-3d .btn-3d-bottom {
			background-color: #f99421;
			color: #333;
			transform: rotateX(-90deg) translateZ(calc((var(--button-height) / 2) + 1px));
		}

		.wp-block-wpamsive-button-3d.button-3d .btn-3d-bottom::after {
			background-image: var(--button-arrow-dark);
		}

		@media (hover: hover) and (pointer: fine) {
			.wp-block-wpamsive-button-3d.button-3d .btn-3d:hover, .wp-block-wpamsive-button-3d.button-3d .btn-3d:focus {
				transform: rotateX(90deg);
			}
		}
	}
}

@media screen and (max-width: 991px) {
	.articles-grid {
		grid-template-rows: repeat(1, minmax(0, 1fr));
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 25px;
		padding: 40px 30px;

		.featured-article {
			grid-row-start: 1;
			grid-row-end: 1;
			grid-column: 1 / 13;
			margin-bottom: 30px;

			img {
				width: 100vw;
				aspect-ratio: 14 / 9;
				object-fit: cover;
				height: auto;
			}

			.text-info {
				.post-title {
					width: 95%;
				}
				> .view-all {
					display: none;
				}
			}
		}

		.second,
		.third,
		.fourth,
		.fifth {
			grid-column: span 6 / span 6;

			img {
				width: 100vw;
			}
		}

		.second {
			grid-column-start: 1;
			grid-column-end: 7;
			grid-row: 2 / auto;
		}

		.third {
			grid-column-start: 7;
			grid-column-end: 13;
			grid-row: 2 / auto;
		}

		.fourth {
			grid-column-start: 1;
			grid-column-end: 7;
			grid-row: 3 / auto;
		}

		.fifth {
			grid-column-start: 7;
			grid-column-end: 13;
			grid-row: 3 / auto;
		}
		> .view-all {
			&.mobile-only {
				display: block !important;
			}
		}
	}

	.wp-block-post-content {
		.latest-post-block {
			.view-all {
				margin-top: 30px;
			}
		}
	}

}

@media screen and (max-width: 768px) {
	.wp-block-post-content {
		.latest-post-block {
			.articles-grid {
				grid-template-rows: repeat(1, minmax(0, 1fr));
				grid-template-columns: repeat(12, minmax(0, 1fr));
				column-gap: 25px;
				row-gap: 30px;
				padding: 32px 0;

				.featured-article {
					grid-row-start: 1;
					grid-row-end: 1;
					grid-column: 1 / 13;
					gap: 15px;
					margin-bottom: 40px;

					img {
						width: 100vw;
					}
				}

				.article {
					flex-direction: row;
					align-items: flex-start;
					column-gap: 20px;

					a {
						flex-basis: 50%;
					}

					.text-info {
						flex-basis: 50%;
						align-items: flex-start;

						.post-title {
							text-align: left;
						}
					}
				}

				.category {
					font-size: 14px;
				}

				.post-title {
					line-height: 1.4;
					margin-bottom: 0;
				}

				.second,
				.third,
				.fourth,
				.fifth,
				.view-all {
					grid-column: span 12 / span 12;

					img {
						width: 100vw;
					}
				}

				.second {
					grid-column-start: 1;
					grid-column-end: 13;
					grid-row-start: 2;
					grid-row-end: 2;
				}

				.third {
					grid-column-start: 1;
					grid-column-end: 13;
					grid-row-start: 3;
					grid-row-end: 3;
				}

				.fourth {
					grid-column-start: 1;
					grid-column-end: 13;
					grid-row-start: 4;
					grid-row-end: 4;
				}

				.fifth {
					grid-column-start: 1;
					grid-column-end: 13;
					grid-row-start: 5;
					grid-row-end: 5;
				}
				.view-all {
					grid-row-start: auto;
                    grid-row-end: auto;
                    grid-column-start: 1;
                    grid-column-end: 13;
                    width: auto;
                    height: auto;
					margin-top: 0;
				}
			}
		}
	}
}

@media screen and (max-width: 389px) {
	.wp-block-post-content {
		.latest-post-block {
			.articles-grid {
				.article {
					flex-direction: column;
					.text-info {
						padding: 0 var(--wp--style--root--padding-left);
					}
				}
			}
		}
	}
}