Hero Block

.HeroBlock {
	@apply flex
		min-h-[360px]
		md:min-h-[450px]
		xl:min-h-[580px]
		bg-cover
		bg-center
		bg-no-repeat;


	.container, .Link--wrapper {
		@apply flex 
			flex-col 
			justify-end
	}	
	.container {
		@apply pt-24
			lg:pt-96 
			pb-0;
	}


	&__logo {
		@apply w-[140px]
			mb-6;
	}

	.Block__contents {
		@apply  self-start 
			relative 
			sm:w-3/4
			xl:w-1/2
			p-8
			pl-0
			bg-white
			rounded-tr-md;

		&:before {
			@apply content-[""] 
				block 
				absolute 
				top-0
				left-[-10000px] 
				bottom-0
				w-[10000px]
				bg-white;
		}
	}

	.Block__title {
		@apply mb-0;

		& + .Block__copy {
			@apply mt-6
				3xl:mt-8;
		}
	}

	.Block__copy {
		@apply text-blue;
	}

	&--contained {
		@apply rounded-md;
	}

	&--compact {
		@apply min-h-[auto]
			md:min-h-[auto]
			xl:min-h-[auto];

		.container {
			@apply pt-12
				lg:pt-32
				xl:pt-48
				pb-12;
		}

		.Block__title {
			@apply text-white;
		}

		& + .container {
			@apply pt-4
				lg:pt-16;
		}
	}

	&--news {
		.container {
			@apply max-md:pt-60
				pl-0;
		}

		.Block__contents {
			@apply p-5
				md:p-8;
		}

		.Block__title {
			@apply mb-8
				lg:mb-12
				text-2xl
				md:text-3xl
				font-normal
				md:font-normal;
		}

		.Block__footer, .Block__action {
			@apply flex
				flex-row;
		}

		.Block__footer {
			@apply max-md:flex-col
				justify-between;
		}

		.Block__meta {
			@apply mb-0
				mr-4
				font-bold
				uppercase;
		}

		.Block__category {
			@apply mr-3
				text-gray-400;
		}

		.Block__date {
			@apply text-gray-600;
		}

		.Block__action {
			@apply items-center
				font-bold
				uppercase;
			
			.Icon {
				@apply w-[40px]
					h-[20px]
					ml-3;
			}
		}

		&:hover {
			.Block__contents {
				@apply bg-gray-200
					transition
					duration-500;
			}
		}
	}
}