.blog-timline {

	width: 100%;

	.blog-timline--blocks {

		.blog-timline--block {

			width: 100%;
			height: calc(100vh - 240px);
			min-height: 800px;
			position: relative;

			@media (max-width: 990px) {

				height: unset;
				min-height: unset;
				display: flex;
				flex-direction: column;

			}

			&.blog-timline--hero {

				.blog-timline--hero-content {
					
					position: absolute;
					z-index: 2;
					bottom: 10px;
					left: 10px;
					width: 50%;
					padding: 60px;
					background: #fff;
					border-radius: 4px;

					@media (max-width: 990px) {
						position: static;
						padding: 40px;
						border-radius: 0;
						width: 100%;
						order: 2;
						text-align: center;
						@media (max-width: 768px) {
							padding: 30px 20px;
						}
					}

					.hero--title {
						margin: 0 0 20px 0;
						letter-spacing: -1px;
					}

					.hero--rte {
						* {
							color: #000;
						}
					}

				}

				.hero--image {

					display: block;
					width: 100%;
					height: 100%;
					object-fit: cover;

					@media (max-width: 990px) {
						aspect-ratio: 1/0.7;
						height: unset;
					}

				}

			}

			&:not(.blog-timline--hero) {

					display: grid;
					grid-template-columns: 50% 50%;
					grid-template-rows: 50% 50%;

					@media (max-width: 990px) {
						display: flex;
						flex-wrap: wrap;
					}

				.post--container {

					position: relative;
					transition: .4s opacity;
					overflow: hidden;

					@media (max-width: 990px) {
						display: flex;
						flex-direction: column;
					}

					&.animated {
		  				animation: pulseFlash 0.5s ease-in-out 2;
		  			}

		  			@media (min-width: 990px) {

						&.block-0 {
							grid-column: 1 / 2;
							grid-row: 1 / 3; /* full height */
						}

						&.block-1 {
							grid-column: 2 / 3;
							grid-row: 1 / 2;
						}

						&.block-2 {
							grid-column: 2 / 3;
							grid-row: 2 / 3;
							.post--content {
								bottom: auto;
								top: 10px;
							}
						}

					}

					.year-box {

						width: 80px;
						height: 80px;
						background: #fff;
						color: #522218;
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						z-index: 2;
						bottom: 10px;
						left: 10px;
						border-radius: 4px;
						font-size: 26px;
						transition: .3s all;

						@media (max-width: 990px) {
							bottom: auto;
							top: 10px;
							left: auto;
							right: 10px;
							width: 50px;
							height: 50px;
							font-size: 18px;
						}

					}

					.post--content {

						position: absolute;
						z-index: 2;
						bottom: 10px;
						left: 10px;
						width: calc(100% - 20px);
						padding: 0 40px;
						background: #fff;
						border-radius: 4px;
						max-height: 0px;
						overflow: hidden;
						transition: .4s all;

						@media (max-width: 990px) {
							position: static;
							padding: 40px;
							border-radius: 0;
							width: 100%;
							max-height: unset;
							overflow: visible;
							order: 2;
							@media (max-width: 768px) {
								padding: 30px 20px;
							}
						}

						.post--title {
							margin: 0 0 16px 0;
						}

						.post--rte {
							* {
								color: #000;
							}
							p {
								line-height: 22px;
							}
						}

					}

					.post--image {

						width: 100%;
						height: 100%;
						object-fit: cover;
						display: block;
						transform: scale(1.1);
						transition: 1s all;

						@media (max-width: 990px) {
							aspect-ratio: 1/0.7;
							height: unset;
							transform: scale(1);
						}

					}

					@media (min-width: 990px) {
						&:hover {

							.year-box {
								left: -120px;
								bottom: -120px;
							}

							.post--content {

								max-height: 500px;
								padding: 40px;

							}

						}
					}

				}

			}

			&.slick-active {
				&:not(.blog-timline--hero) {
					.post--container {
						.post--image {
							transform: scale(1);
						}
					}
				}
			}

		}

		.slick-arrow {

			width: 60px;
			height: 60px;
			background: url('icon-chev-right.svg') no-repeat center center / 24px #522218;
			font-size: 0;
			border: none;
			padding: 0;
			position: absolute;
			bottom: 1px;
			right: 1px;
			z-index: 5;
			cursor: pointer;
			transition: .3s all;

			&.slick-prev {
				right: 62px;
				transform: rotate(180deg);
			}

			&.slick-disabled {
				opacity: .4;
				pointer-events: none;
			}

			&:hover {
				background-color: #000;
			}

		}

	}

	.timeline-nav {

		width: 100%;
		border-bottom: 1px solid rgba(255,255,255,0.2);
		background: #522218;
		padding: 0 30px;

		@media (max-width: 990px) {
			display: none;
		}

		.timeline-nav--list {

			display: flex;
			justify-content: space-between;
			height: 100px;
			align-items: center;

			.nav--item {

				color: #fff;
				cursor: pointer;
				transition: .3s all;
				line-height: 1;

				&.home {
					svg {
						width: 24px;
						height: unset;
						path {
							fill: #fff;
						}
					}
				}

				&.active,
				&:hover {

					text-decoration: underline;

				}

			}

			.group-end,
			.group-mid {

				color: #fff;
				opacity: .3;

			}

		}

	}

}

@keyframes pulseFlash {
	0%   { opacity: 1; }
	50%  { opacity: 0.6; }
	100% { opacity: 1; }
}