/* Extra small devices (portrait phones, less than 576px)
/* No media query for `xs` since this is the default in Bootstrap

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.viewport:after {
		content: 'SM, 576px and above';
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.viewport:after {
		content: 'MD, 768px and above';
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.viewport:after {
		content: 'LG, 992px and above';
	}

	.text-panel {
		width: 55%;
		height: 100vh;
	}

	.text-panel .heading {
		font-size: 55px;
	}

	.text-panel .subtitle {
		font-size: 20px;
	}

	.image-panel {
		width: 45%;
		height: 100vh;
		background-position: center;
		background:
			linear-gradient(to right,
				#cadff2 0%,
				rgba(202, 223, 242, 0) 20%),
			url('../images/building.png');
		background-size: cover;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.viewport:after {
		content: 'XL, 1200px and above';
	}

	.text-panel {
		width: 60%;
	}

	.image-panel {
		width: 40%;
	}

	.text-panel .heading {
		font-size: 65px;
	}

	.text-panel .subtitle {
		font-size: 22px;
	}
}