/**
 * KMR course-select index — mobile / tablet only
 * Equal spacing between .boxme containers + no white strip under the photo.
 * Desktop styles stay in index.php inline CSS.
 */

@media screen and (max-width: 1024px) {
	html,
	body {
		margin: 0 !important;
		padding: 0 !important;
		min-height: 100% !important;
		min-height: 100vh !important;
		min-height: 100dvh !important;
		background-color: #2f2f2f !important;
		background-image: none !important;
	}

	.whole_area {
		min-height: 100vh !important;
		min-height: 100dvh !important;
		height: auto !important;
		padding-bottom: 24px !important;
		box-sizing: border-box !important;
		background-attachment: scroll !important;
		background-position: center center !important;
		background-size: cover !important;
		background-color: #2f2f2f !important;
	}

	.banner_area {
		padding: 16px 12px !important;
	}

	.banner_area > br {
		display: none !important;
	}

	.big_banner {
		font-size: 28px !important;
		margin: 0 !important;
		line-height: 1.2 !important;
	}

	.whole_area > .container {
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		padding-top: 16px !important;
		padding-bottom: 16px !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Desktop <br> spacers caused uneven gaps — kill them on mobile */
	.whole_area > .container > br,
	.whole_area > .container br {
		display: none !important;
	}

	.whole_area > .container > .row,
	.whole_area > .container > .boxme,
	.whole_area > .container > a,
	.whole_area > .container > div {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		box-sizing: border-box !important;
	}

	.whole_area .row {
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.whole_area .row > [class*="col-"] {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin: 0 !important;
	}

	.whole_area .boxme {
		margin: 0 !important;
		padding: 16px 14px !important;
		box-sizing: border-box !important;
	}
}

@media screen and (max-width: 428px) {
	.big_banner {
		font-size: 24px !important;
	}

	.whole_area > .container {
		gap: 14px !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.whole_area .row {
		gap: 14px !important;
	}
}