.wp-block-ainoblocks-hero {

	.wp-block-ainoblocks-hero__inner-container {
		max-width: 93rem;
		display: block;
		margin: 0 auto;
		padding: 6.25rem 1rem 3rem;

		@media (min-width: 48em) {
			padding: 7.5rem 2rem 4rem;
		}

		@media (min-width: 64em) {
			padding-top: 5rem;
			padding-bottom: 4rem;
		}

		@media (min-width: 80em) {
			padding: 8rem 3rem 6rem;
		}

		@media (min-width: 93em) {
			padding-left: 1.5rem;
			padding-right: 1.5rem;
		}

		@media (min-width: 48em) {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			grid-template-rows: 100%;
			align-items: center;
		}

		@media (min-width: 80em) {
			height: auto;
			min-height: 100vh;
		}
	}

	&__content {

		:last-child {
			margin-bottom: 0;
		}
	}

	.wp-block-ainoblocks-hero__media {
		grid-column-start: 7;
		grid-column-end: 13;
		grid-row-start: 1;

		@media (min-width: 76.50em) {
			padding-top: 0;
		}
	}

	@media (min-width: 48em) {
		&.media-right {

			.wp-block-ainoblocks-hero {

				&__media {
					padding-left: 1.5rem;
				}

				&__content {
					padding-right: 1.5rem;
				}
			}
		}

		&.media-left {

			.wp-block-ainoblocks-hero {

				&__media {
					padding-right: 1.5rem;
				}

				&__content {
					padding-left: 1.5rem;
				}
			}
		}
	}

	&.media-left .wp-block-ainoblocks-hero__media {
		grid-column-start: 1;
		grid-column-end: 7;
	}

	&.media-below .wp-block-ainoblocks-hero__inner-container {

		grid-template-rows: auto auto;

		.wp-block-ainoblocks-hero__media {
			max-width: 90rem;
			grid-column-start: 1;
			grid-column-end: 13;
			grid-row-start: 2;
			grid-row-end: 3;
		}

		.wp-block-ainoblocks-hero__content {
			grid-column-start: 1;
			grid-column-end: 13;
			grid-row-start: 1;
			grid-row-end: 2;
			padding-top: 0;
			padding-bottom: 2rem;

			@media (min-width: 64em) {
				padding-top: 4rem;
				padding-bottom: 0;
			}
		}
	}

	.wp-block-ainoblocks-hero__content {
		margin-left: auto;
		margin-right: auto;
		word-break: break-word;
		width: 100%;
		z-index: 2;
		grid-column-start: 1;
		grid-column-end: 7;
		grid-row-start: 1;
		padding-bottom: 2rem;

		@media (min-width: 48em) {

			padding-bottom: 2rem;

			.wp-block-image {
				margin-bottom: 1.5rem;
			}
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin-top: 0;
			margin-bottom: 0;
		}

		.hero-text {
			margin-top: 1rem;
		}

		.wp-block-ainoblocks-multiple-buttons {
			margin-top: 1.5rem;
			margin-bottom: 0;

			@media (min-width: 48em) {
				margin-top: 2rem;
			}
		}
	}

	&.media-left {

		.wp-block-ainoblocks-hero__content {
			grid-column-start: 7;
			grid-column-end: 13;
		}
	}

	&.media-hide {

		.wp-block-ainoblocks-hero__content {
			grid-column-start: 1;
			grid-column-end: 13;
		}
	}

	&.content-vertically-aligned-top .wp-block-ainoblocks-hero__content {
		align-self: start;
	}

	&.content-vertically-aligned-center .wp-block-ainoblocks-hero__content {
		align-self: center;
	}

	&.content-vertically-aligned-bottom .wp-block-ainoblocks-hero__content {
		align-self: end;

		@media (min-width: 48em) {
			padding-bottom: 9rem;
		}
	}

	&.is-image-fill figure {
		height: 100%;
		min-height: 250px;
		background-size: cover;
	}

	&.is-image-fill figure>img {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}
}

// Hero block with Aino theme page template "Hero" and "Hero Light Header"
.tpl-hero {

	.site-header {
		position: absolute;
		z-index: 10;
		width: 100%;
	}

	.wp-block-cover .wp-block-cover__inner-container {
		padding: 0;
	}

	&.has-header-search {

		.wp-block-ainoblocks-hero__inner-container {
			padding-top: 8.25rem;
		}
	}
}