.page-node-type-blog {
	@mixin clamp --supt-container-padding-inline, $spacing-4, $spacing-24, $breakpoint-xs,
		$breakpoint-lg;
	position: relative;
	background-color: $color-grey-background;

	.block-system-main-block {
		margin: 0;
		max-width: none;
	}

	.node--type-blog {
		padding: 120px 0 0;

		@media (min-width: $breakpoint-md) {
			padding-top: 160px;
		}
	}

	.col-md-8 {
		position: static;
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		margin: 0;
		padding: 0 15px;
	}

	.radix-layouts-sidebar {
		display: none;
	}

	.block-region-contentmain {
		box-shadow: none;
		border-radius: 0;
		padding: 0;
		margin: 0;
		@mixin clamp padding-bottom, $spacing-10, $spacing-16, $breakpoint-xs, $breakpoint-xl;

		/* Use grid to position elements => we want the title, the date and the image to be in the same row - as the image's height depends on the title's height */
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;

		/* Title & Date */
		.block-entity-fieldnodetitle,
		.block-entity-fieldnodefield-datetime {
			grid-column: 1;
			grid-row: 1;
			z-index: 2;

			@media (min-width: $breakpoint-md) {
				width: 50%;
			}
		}

		/* Title */
		.block-entity-fieldnodetitle {
			padding-block: $spacing-10 $spacing-16;

			@media (min-width: $breakpoint-md) {
				padding-block: $spacing-16 $spacing-33;
			}

			.field--name-title {
				@extend %t-h1;
				margin-bottom: 0;
				color: $color-white;
				text-align: left;
			}
		}

		/* Date */
		.block-entity-fieldnodefield-datetime {
			.field--name-field-datetime {
				@extend %t-body-xs;
				color: $color-white;
				opacity: 1;
				justify-content: flex-start;
				align-items: center;
				gap: $spacing-1-5;
				margin: 0;

				&::before {
					@extend %t-body-xs;
					content: 'News';
					display: inline-flex;
					align-items: center;
					padding: 3px $spacing-1-5 2px;
					border-radius: 4px;
					border: 1px solid $color-grey-2;
					background: transparent;
					position: relative;
					backdrop-filter: blur(16px);
					white-space: nowrap;
					letter-spacing: 0;

					@media (min-width: $breakpoint-md) {
						padding-inline: 7px;
					}
				}

				time {
					display: flex;
					align-items: center;
					gap: $spacing-1-5;

					&::before {
						content: '';
						display: block;
						width: 3px;
						height: 3px;
						border-radius: 50%;
						background: $color-white;
					}
				}
			}
		}

		/* Image */
		.block-entity-fieldnodefield-image {
			/* @mixin clamp min-height, 400px, 515px, $breakpoint-xs, $breakpoint-xl; */
			position: relative;
			overflow: hidden;

			grid-row: 1;
			grid-column: 1;

			/* Negative margins so it takes the full width of the container */

			margin-inline: calc(var(--supt-container-padding-inline) * -1);
			margin-top: -121px;

			@media (min-width: $breakpoint-md) {
				margin-top: -161px;
			}

			@media (min-width: $grid-container-max-mq) {
				margin-inline: calc(
					-1 * (((100vw - $grid-container-max-width) / 2) + var(--supt-container-padding-inline))
				);
			}

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
			}

			.field--name-field-image {
				height: 100%;
				img {
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
					width: 100%;
					object-fit: cover;
					border-radius: 0;
				}
			}
		}

		/* Summary */
		.block-entity-fieldnodefield-summary {
			display: none;
		}

		/* Body content */
		.block-entity-fieldnodefield-contents {
			@mixin clamp padding-top, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl, true;

			grid-column: 1;
			grid-row: 2;

			@media (min-width: $breakpoint-md) {
				flex: 0 0 83.333333%;
				max-width: 83.333333%;
				margin-right: auto;
				margin-left: auto;
			}

			.field--name-field-body {
				@extend %typography;
			}
		}

		/* Navigation */
		.block-blog-navigation-block {
			display: none;
		}
	}
}