.header-bg {
	/*background : transparent;*/
}

.header-search-trigger {
	cursor : pointer;
}

.close-search-trigger {
	cursor      : pointer;
	margin-left : 10px;
	width       : 40px;
}

.hero {
	z-index    : 1;
	background : #f7f7f7;
}

.hero .hero-img {
	width      : 100%;
	max-height : 100vh;
	object-fit : cover;
}

@media (min-width : 1200px) {
	body[data-is-desktop="true"] .main-header--with-hero {
		height : 0;
	}

	body[data-is-desktop="true"] .header-search {
		display          : flex;
		align-items      : center;
		justify-content  : center;
		grid-column      : 2/-2;
		z-index          : 15;
		transform-origin : top center;
		transform        : translate3d(0, -20px, 0) scale(0.8);
		opacity          : 0;
		visibility       : hidden;
		pointer-events   : none;
		transition       : all .2s ease-out;
	}

	body[data-is-desktop="true"] .header-search--is-show {
		transform      : translate3d(0, 0, 0) scale(1);
		opacity        : 1;
		visibility     : visible;
		pointer-events : all;
		transition     : all .3s ease-in-out .2s;
	}

	body[data-is-desktop="true"] .header-search-bg {
		z-index        : 10;
		pointer-events : none;
		padding        : 0;
		height         : 100%;
		grid-column    : 1/-1;
		opacity        : 0;
		background     : white;
		transition     : all .2s ease-out .2s;
	}

	body[data-is-desktop="true"] .header-search-bg--is-show {
		opacity    : 1;
		transition : all .2s ease-in-out;
	}
}