.easy-resources-page-content-wrap {
	margin: 3rem 10vw 3rem 10vw;
}
@media only screen and (max-width: 900px) {
	.easy-resources-page-content-wrap {
		margin: 3rem 5vw 3rem 5vw;
	}
}

// Make sure intro is not covered by .torn.
.resources-intro {
	position: relative;
	z-index: 1;
}

.easy-resources-page-section-wrap {
	display: grid;
	align-content: flex-start;
	grid-auto-flow: row;
	grid-gap: 1.5em;
	min-height: 90vh;
	margin: 0 auto 0 0;
	.easy-resources-page-item {
		display: grid;
		align-content: center;
		.easy-resources-page-title {
			padding: 0;
			cursor: pointer;
			position: relative;
			line-height: 1.5;
			display: grid;
			margin: 0em 0em 0em 0em;
			justify-content: stretch;

			.showHideResourcesBtn {
				display: grid;
				position: relative;
				cursor: pointer;
				height: 100%;
				padding: 1.5rem;
				align-content: center;
				justify-content: flex-start;
				grid-gap: 1.5rem;
				align-items: center;
				justify-items: flex-start;
				padding-right: 4.5rem;
				font-size: inherit;
				.easy-resources-page-button-content {
					display: grid;
					justify-content: flex-start;
					justify-items: flex-start;
					grid-gap: 1.5rem;
					pointer-events: none;
					.easy-resources-page-term-title {
						padding: 0.1875em 0em;

						pointer-events: none;
						line-height: 1.5;
					}
					.easy-resources-page-term-description {
						// it's tricky to set font size that works everywhere, not getting great results with '1rem'. Can't inherit because we're inside a h2 and term-description could be too long. Fall back to 16px but default to 'medium' (no safari support).
						font-size: 16px;
						font-size: medium;
						font-weight: normal;
						text-align: left;
						pointer-events: none;
						text-transform: none;
						line-height: 1.5;
						max-width: 85%;
						max-width: calc(100% - 4.5rem);
					}
				}
			}
			.easy-resources-page-chevron-up,
			.easy-resources-page-chevron-down {
				position: absolute;
				right: 1.5em;
				top: calc(50% - 0.6em);
				pointer-events: none;
				transition: transform 0.2s linear;
				svg {
					fill: currentColor;
				}
			}

			.showHideResourcesBtn[aria-expanded='true']
				.easy-resources-page-chevron-down {
				// Flip chevron when button is expanded.
				transform: scale(-1);
			}
		}

		.easy-resources-page-panel {
			display: none;
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s linear;
			padding-bottom: 1.5rem;

			// small item in panel
			.easy-resources-page-panel-item {
				margin: 0.75em 1.5rem;
				padding: 1.5em;
				display: grid;
				grid-auto-flow: column;
				grid-gap: 1.5em;
				align-items: flex-start;
				grid-template-columns: 2fr 2fr 1fr;

				.easy-resources-page-panel-left {
					display: grid;
					justify-content: flex-start;
					margin-bottom: 1.5em;
					grid-gap: 1.5rem;
					h3 {
						word-break: break-all;
						margin: 0;
						padding: 0;
					}
					.easy-resources-page-file-info {
						line-height: 1.5;
						display: flex;
						gap: 0.75em;
						svg {
							width: 1.5em;
							fill: currentColor;
						}
					}
				}
				.easy-resources-page-panel-center {
					p {
						word-break: break-all;
					}
				}
				.easy-resources-page-panel-right {
					display: grid;
					grid-gap: 1.5em;
					grid-auto-flow: row;
					justify-content: flex-end;

					span,
					p {
						word-break: break-all;
						line-height: 1.5;
					}
				}
			}
		}

		// Maintain display: grid until remove .show transition ends.
		.easy-resources-page-panel.hiding {
			display: grid;
		}

		.easy-resources-page-panel.show {
			display: grid;
		}
	}
}

@media only screen and (max-width: 1200px) {
	.easy-resources-page-section-wrap {
		.easy-resources-page-item {
			.easy-resources-page-panel {
				.easy-resources-page-panel-item {
					grid-auto-flow: row;
					grid-template-columns: 1fr;
					justify-items: flex-start;
					.easy-resources-page-panel-right {
						grid-auto-flow: column;
						justify-content: flex-start;
					}
				}
			}
		}
	}
}
@media only screen and (max-width: 568px) {
	.easy-resources-page-section-wrap {
		.easy-resources-page-item {
			.easy-resources-page-panel {
				.easy-resources-page-panel-item {
					justify-items: stretch;
					.easy-resources-page-panel-right {
						grid-auto-flow: row;
						justify-content: flex-start;
					}
				}
			}
		}
	}
}