@layer blocks {
	.hero-container {
		--hero-padding: 40px;

		@media (width >= 48em) {
			--hero-padding: 60px;
		}

		padding-block: var(--hero-padding);
		
		&:has(.homepage) {
			--hero-padding: 170px 30px;

			@media (width >= 48em) {
				--hero-padding: 100px;
			}
		}

		&:has(.hero-image-wrapper) {
			isolation: isolate;
			position: relative;
		}

		&:not([class*='bg-']) {
			color: var(--color-white);
		}

		&:has(.hero-image-wrapper:last-child) {
			--container-gutter: 0;
			--max-width: 100%;

			padding: 0;

			& .hero-image-wrapper {
				position: static;
			}
		}
	}

	.hero-image-wrapper {
		inset: 0;
		overflow: hidden;
		position: absolute;
		z-index: -1;

		& img {
			block-size: 100%;
			object-fit: cover;
			inline-size: 100%;
		}

		& p {
			block-size: 100%;
			margin: 0;
		}
	}

	.hero-content-wrapper {
		--title-font-weight: 300;

		display: grid;
		gap: 30px;

		@media (width < 48em) {
			& .button {
				width: 100%;
			}
		}
	}

	.hero-details {
		display: grid;
		gap: 15px;

		& .program-name {
			font-weight: 700;
			min-height: calc(1em * var(--default-line-height));

			&:empty {
				max-width: 200px;
			}
		}
	}

	.hero-row {
		display: flex;
		gap: 30px;

		.column-border-top & {
			border-block-start: 1px solid rgb(from var(--color-white) r g b / 20%);
			padding-block-start: 30px;

			@media (width >= 48em) {
				max-inline-size: 75%;
			}
		}
	}

	.hero-column-title {
		font-size: var(--body-font-size-xs);
		font-weight: 700;
		letter-spacing: .15em;
		text-transform: uppercase;

		.hero-details & {
			color: var(--color-gray-1);
			font-weight: 400;
			text-transform: none;
		}
	}

	.hero-column-text {
		font-size: var(--heading-font-size-s);
		line-height: 1;
		min-height: 1em;

		.hero-details & {
			margin-block-start: 5px;
		}

		& strong {
			font-size: var(--body-font-size-xs);
		}
	}

	.hero-small-copy {
		font-size: var(--body-font-size-xs);

		& strong {
			font-size: var(--body-font-size-m);
		}
	}
}