/*
Theme Name: LP Theme Informative Template Styles
Theme URI: https://literacyplanet.com
Author: Literacy Planet
*/

/* GENERAL
################################################################################### */

.informative-section {
	margin-bottom: calc(var(--layout-unit)*2);
}

.section-grid .grid .icon {
	height: 8rem;
	object-position: center;
	object-fit: contain;
}

.sidebar section {
	margin-bottom: calc(var(--layout-unit)*2);
}

.sidebar .character {
	margin-top: calc(var(--layout-unit)*-2 - 2rem);
	max-height: 20rem;
}

.sidebar .stubmonk {
	transform: translateX(-8%);
}

.sidebar .avatar {
	transform: translateX(5%);
}

@media (max-width: 1023px) {

	.content-layout {
		flex-direction: column;
	}

}

@media (min-width: 1024px) {

	.content-layout {
		display: flex;
	}

	.content-layout article {
		width: 66.66%;
		padding-bottom: calc(var(--layout-unit)*2);
	}

	.content-layout .sidebar {
		width: 33.33%;
	}

	.content-layout .sidebar .planet {
		width: 160%;
		max-width: none;
		margin-left: -17%;
		margin-top: -10%;
		margin-bottom: 2rem;
	}

	.blob-desktop {
		top: 0;
		left: 70%;
		width: 20rem;
		min-width: 30%;
		transform: translate(0%, -7%);
		margin-top: -4%;
	}

}

@media (min-width: 1024px) and (max-width: 1199px) {

	.section-grid .grid > div {
		width: 50%;
	}

}

@media (min-width: 1200px) {

	.section-grid .grid > div {
		width: 33.33%;
	}

}