@import "styles.css";

.page {
	width:100%;
	display:flex;
	box-sizing:border-box;
	height:fit-content;

	div {
		padding: var(--gap-size-norm);
		overflow:  hidden;
		width:50%;
		height:100%;
		box-sizing:border-box;
		filter: url(#dither);
	}
}

/* Image styles from hero page */
.header-img {
	margin-top: var(--gap-size-norm);
	width:100%;
	margin-left: calc(var(--gap-size-huge)/2)
	position:relative;
	overflow:hidden;

	/* Size of the hero image */
	height:50vh;

	&::after {
		content: "Source: Igor Aronov";
		font-style: italic;
		text-align: center;
		padding: var(--gap-size-norm);
		box-sizing: border-box;
		pointer-events: none;
		
		top: 0;
		right:0;
		position: absolute;
		width:100%;
		height:100%;

		/* Gradient layer over the image */
		background:linear-gradient(var(--background), transparent);
	}
}

/* Mobile styles */
@media (max-width: 800px) or (orientation: portrait) {
	/* Make the info layout stack */
	section.page {
		display:block;
		div {
			width:100%
		}
	}
}