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

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

.resources-header {
	padding-top: calc(var(--layout-unit)*2);
	padding-bottom: calc(var(--layout-unit)*2);
}

.resources-wrapper {
	margin-bottom: calc(var(--layout-unit)*6);
}

.resources-wrapper .resource .resource-summary {
	border-bottom: 2px dashed var(--light-blue);
}

.resource-summary .image img {
	transition: transform 200ms;
}

.resource-summary .image img:hover {
	transform: scale(1.05) rotate(3deg);
}

.resource-layout .col-2 {
	text-align: center;
}

@media (max-width: 699px) {

	.resources-header {
		padding-bottom: 0;
	}
	.resource-summary {
		text-align: center;
		padding: 2rem 0;
	}

	.resource .mushroom {
		display: none;
	}

	.resource-summary .image img {
		max-width: 20rem;
	}

	.resource-layout {
		padding-top: calc(var(--layout-unit)*2);
		padding-bottom: calc(var(--layout-unit)*2);
	}

	.resource-layout .col-1 {
		text-align: center;
	}

	.resource-layout .col-2 {
		margin-top: 3rem;
	}

	.resource-article .mushroom {
		display: none;
	}

	.resource-article .blob {
		display: none;
	}

}

@media (min-width: 700px) {
	
	.resource-summary .image {
		width: 40%;
		padding-right: calc(var(--layout-unit)*2);
		text-align: center;
	}

	.resource-summary .image img {
		max-height: 25rem;
	}

	.resource-summary .info {
		width: 60%;
		padding-right: 2rem;
	}

	.resource .mushroom {
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 100;
	}

	.resource-layout {
		padding-top: calc(var(--layout-unit)*3);
		padding-bottom: calc(var(--layout-unit)*3);
		display: flex;
	}

	.resource-layout .col-1 {
		width: 60%;
		padding-right: var(--layout-unit);
	}

	.resource-layout .col-2 {
		width: 40%;
		padding-left: var(--layout-unit);
	}

}

@media (min-width: 700px) and (max-width: 1023px) {

	.resource-summary {
		display: flex;
		align-items: center;
		padding: calc(var(--layout-unit)*2) 0;
	}

	.resource-article .blob {
		top: 0;
		left: 60%;
		width: 20rem;
		min-width: 40%;
		transform: translate(0%, -20%);
	}

	.resource-article .mushroom {
		position: absolute;
		z-index: 100;
	}

	.resource-article .mushroom-1 {
		top: 2rem;
		right: 0rem;
		width: 5rem;
		transform: rotate(10deg);
	}

	.resource-article .mushroom-2 {
		top: 0;
		right: 8rem;
		width: 3rem;
		transform: rotate(-10deg);
	}

	.resource-article .mushroom-3 {
		bottom: -6rem;
		left: 1rem;
		width: 4rem;
		transform: rotate(-10deg);
	}

	.resource .mushroom {
		width: 6rem;
	}

	.resource .mushroom-1 {
		left: -2%;
	}

	.resource .mushroom-2 {
		left: 4%;
	}

	.resource .mushroom-3 {
		left: 102%;
	}

}

@media (max-width: 1023px) {

	.resources-header .treasure_chest {
		display: none;
	}

}

@media (min-width: 1024px) {

	.resource-summary {
		display: flex;
		align-items: center;
		padding: calc(var(--layout-unit)*1) 0;
	}

	.resources-header h1,
	.resources-header .description {
		position: relative;
		z-index: 100;
	}

	.resources-header .blob-right {
		top: 0;
		left: 80%;
		width: 20rem;
		min-width: 20%;
		transform: translate(0%, -30%);
	}

	.resources-wrapper .blob-desktop {
		top: 0;
		right: 70%;
		width: 20rem;
		min-width: 30%;
		transform: translate(0%, -20%);
	}

	.resource-article .blob {
		top: 0;
		left: 70%;
		width: 30rem;
		min-width: 30%;
		transform: translate(0%, -30%);
	}

	.resource-article .mushroom {
		position: absolute;
		z-index: 100;
	}

	.resource-article .mushroom-1 {
		top: 2rem;
		right: 0;
		width: 7rem;
		transform: rotate(10deg);
	}

	.resource-article .mushroom-2 {
		top: 0;
		right: 8rem;
		width: 4rem;
		transform: rotate(-10deg);
	}

	.resource-article .mushroom-3 {
		bottom: -6rem;
		left: 1rem;
		width: 6rem;
		transform: rotate(-10deg);
	}

}

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

	.resources-header .treasure_chest {
		position: absolute;
		left: 85%;
		height: 200%;
		top: -40%;
		z-index: 50;
	}

	.resource .mushroom-1 {
		left: -2%;
	}

	.resource .mushroom-2 {
		left: 4%;
	}

	.resource .mushroom-3 {
		left: 102%;
	}


}

@media (min-width: 1200px) {

	.resources-header .treasure_chest {
		position: absolute;
		left: 100%;
		height: 200%;
		top: -40%;
		z-index: 50;
	}

	.resource .mushroom-1 {
		left: -7%;
	}

	.resource .mushroom-2 {
		left: 3%;
	}

	.resource .mushroom-3 {
		left: 105%;
	}

}