.form-card *:not(.background-image) {
	z-index: 3;
}

.form-card {
	position: relative;
	padding-block-end: 3.25rem;
}

.form-card p {
	position: relative;
	text-wrap: balance;
}

.background-image {
	position: absolute;
	bottom: 0;
	max-width: unset;
	overflow: hidden;
}

@media (orientation: landscape) {
	.background-image {
		width: 100%;
	}
}

#search-form {
	display: grid;
	grid-template-columns: 2fr 6fr 1fr;
	gap: 0.5rem;
	padding: 2% 5%;
}

#search-label {
	font-size: 2.5rem;
}

.mid-page-button {
	padding-block: 0.75rem;
}

#query-input, select {
	border-radius: var(--round-corners);
}

#query-input {
	border: 4px solid var(--focus-color);
}

select, input[type=submit] { /* To make the elements the same height */
	border: 3px solid var(--sunrise-5);
}

#search-form select, #search-form #submit-button, input::placeholder {
	text-transform: uppercase;
}

select {
	background-color: var(--sunrise-5);
}

@media(max-width: 843px) {
	#search-form {
		grid-template-columns: repeat(3, 1fr);
	}

	select {
		grid-column: span 1;
	}

	#query-input {
		grid-column: span 2;
	}

	#submit-button {
		grid-column: span 3;
	}

	.background-image {
		height: calc(100% + 1rem);
	}
}

@media(max-width: 480px) {
	#search-form {
		grid-template-columns: 1fr;
	}

	select, #query-input, input[type=button], input[type=submit] {
		grid-column: unset !important;
	}
}

@media (max-width: 280px) {
	.mid-page-button {
		border-radius: calc(var(--round-corners) / 4);
		padding: 4px;
	}

	select, input {
		padding: 0;
	}
}

/* Main Content */

.programs-grid, .info-area {
	display: grid;
	gap: 0;
	margin-block-start: -3.5rem;
	z-index: 6;
	position: relative;
	padding-block-end: 1rem;
}

.programs-grid {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.programs-grid h2 {
	background: var(--green-1);
	padding-block: 0.25em;
	position: relative;
	z-index: 3;
}

.programs-grid h2+p {
	text-transform: uppercase;
}

/* The exploring image is not a circle like the rest */
/* it's taller than wide so it needs to go further up */
#exploring-card img {
	margin-block-start: -5.5%;
}

@media (max-width: 1020px) {
	.programs-grid {
		grid-template-columns: 1fr 1fr;
	}
	
	.programs-grid div:nth-of-type(3), #exploring-card img {
		margin-block-start: 0;
	}
	
	/* The exploring image is taller, so this needs a bit of space */
	#venturing-card img {
		margin-block-start: 5.5%;
	}
}

@media (min-width: 521px) {
	.programs-grid h2 {
		border-radius: var(--round-corners);
		font-size: 1.75rem;
		margin-block-start: -3.5rem;
		margin-inline: 1rem; /* Don't have the headers touch */
		padding-inline: 1rem; /* Have a minimum padding */
	}
}

@media (max-width: 466px) {
	.search-header-splitter {
		display: none;
	}
}

@media (max-width: 521px) {
	.programs-grid {
		grid-template-columns: 1fr;
	}

	.programs-grid div, #venturing-card img {
		margin-block-start: 0 !important;
	}

	.desktop-img {
		display: none !important;
	}

	.mobile-img {
		display: block !important;
	}

	.programs-grid h2 {
		margin-block-start: -2rem;
		background-color: var(--green-3);
	}

	/* The text content */
	.programs-grid div div {
		background-color: var(--green-1);
		padding-block-end: 0.25rem;
		border-radius: var(--round-corners);
		margin-inline: 0.5rem;
	}

	h1 {
		text-wrap: pretty;
	}

	.form-header {
		flex-direction: column;
	}
}