/* ==========================================================
   KITSO Kids Profile
   Layout only.
   Kadence controls typography, colours and buttons.
   ========================================================== */

/* ==========================================================
   Profile Container
   ========================================================== */

.kitso-profile {

	max-width: 1100px;
	margin: 40px auto;
	padding: 0 20px;

}

/* ==========================================================
   Hero
   ========================================================== */

.kitso-hero {

	display: flex;
	align-items: flex-start;
	gap: 40px;
	margin-bottom: 50px;

}

.kitso-photo {

	flex: 0 0 300px;

}

.kitso-photo-image {

	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;

}

.kitso-details {

	flex: 1;

}

/* ==========================================================
   Name
   ========================================================== */

.kitso-name {

	margin-top: 0;
	margin-bottom: .5em;

}

/* ==========================================================
   Profile Paragraphs
   ========================================================== */

.kitso-details p {

	margin-bottom: 1em;

}

/* ==========================================================
   School & Growth Group
   ========================================================== */

.kitso-school-growth {

	line-height: 1.7;
	margin: 1.5em 0;

}

/* ==========================================================
   Sponsor Area
   ========================================================== */

.kitso-sponsor-progress {

	margin: 1.5em 0 .75em;

}

.kitso-sponsor-button {

	margin-top: 1.5em;

}

/* ==========================================================
   Story Section
   ========================================================== */

.kitso-story {

	margin-top: 2em;

}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 768px) {

	.kitso-profile {

		padding: 0 15px;

	}

	.kitso-hero {

		flex-direction: column;
		gap: 25px;

	}

	.kitso-photo {

		flex: none;
		width: 100%;
		max-width: 300px;
		margin: 0 auto;

	}

	.kitso-details {

		width: 100%;

	}

}