/**
 * Shared typography and spacing for the homepage and page banners.
 */

.total-assurance-hero__container {
	max-width: 1280px;
	min-height: 680px;
	padding-inline: 20px;
}

.total-assurance-hero__content {
	padding: 50px 40px 50px 0;
}

.total-assurance-team-banner {
	padding-inline: 20px;
}

.total-assurance-team-banner__container,
.total-assurance-contact-container {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: 1280px;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
}

.total-assurance-blog-hero__content {
	box-sizing: border-box;
	padding-left: max(20px, calc((100vw - 1280px) / 2 + 20px));
	padding-right: 20px;
}

:is(
	.total-assurance-about-page__banner,
	.total-assurance-hero,
	.total-assurance-team-banner,
	.total-assurance-blog-hero,
	.total-assurance-contact-hero,
	.total-assurance-services-hero,
	.total-assurance-single-event__hero
) h1 {
	font-size: clamp(42px, 4vw, 58px) !important;
	font-weight: 700 !important;
	line-height: 1.14 !important;
	letter-spacing: -0.5px !important;
	margin-bottom: 22px !important;
}

:is(
	.total-assurance-about-page__eyebrow,
	.total-assurance-hero__eyebrow,
	.total-assurance-team-banner__eyebrow,
	.total-assurance-blog-label,
	.total-assurance-contact-label,
	.total-assurance-services-hero__eyebrow
) {
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase;
}

:is(
	.total-assurance-about-page__banner-description,
	.total-assurance-hero__description,
	.total-assurance-team-banner__description,
	.total-assurance-blog-hero__content > p:not(.total-assurance-blog-label),
	.total-assurance-contact-hero__content > p:not(.total-assurance-contact-label),
	.total-assurance-services-hero__description
) {
	font-size: 17px !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;
}

@media (max-width: 1024px) {
	:is(
		.total-assurance-about-page__banner,
		.total-assurance-hero,
		.total-assurance-team-banner,
		.total-assurance-blog-hero,
		.total-assurance-contact-hero,
		.total-assurance-services-hero,
		.total-assurance-single-event__hero
	) h1 {
		font-size: 40px !important;
	}
}

@media (max-width: 820px) {
	:is(
		.total-assurance-about-page__banner,
		.total-assurance-hero,
		.total-assurance-team-banner,
		.total-assurance-blog-hero,
		.total-assurance-contact-hero,
		.total-assurance-services-hero,
		.total-assurance-single-event__hero
	) h1 {
		font-size: 36px !important;
	}
}

@media (max-width: 600px) {
	.total-assurance-hero__container {
		min-height: 0;
		padding-inline: 16px;
	}

	.total-assurance-hero__content {
		padding: 32px 0 38px;
	}

	.total-assurance-blog-hero {
		background-position: 68% bottom;
		background-size: auto 235px;
		min-height: 0;
	}

	.total-assurance-blog-hero__content {
		padding: 32px 16px 250px;
	}

	.total-assurance-team-banner {
		background-position: right bottom;
		background-size: auto 235px;
		min-height: 0;
		padding: 32px 16px 250px;
	}

	.total-assurance-team-banner__container {
		min-height: 0;
	}

	.total-assurance-contact-container {
		padding-inline: 16px;
	}

	.total-assurance-contact-hero {
		background-position: 64% bottom;
		background-size: auto 235px;
		min-height: 0;
		padding: 32px 0 250px;
	}

	.total-assurance-contact-hero__grid {
		min-height: 0;
	}

	.total-assurance-contact-hero__content {
		padding: 0;
	}

	:is(
		.total-assurance-about-page__banner,
		.total-assurance-hero,
		.total-assurance-team-banner,
		.total-assurance-blog-hero,
		.total-assurance-contact-hero,
		.total-assurance-services-hero,
		.total-assurance-single-event__hero
	) h1 {
		font-size: 30px !important;
		line-height: 1.16 !important;
		letter-spacing: -0.25px !important;
		margin-bottom: 18px !important;
	}

	:is(
		.total-assurance-about-page__banner-description,
		.total-assurance-hero__description,
		.total-assurance-team-banner__description,
		.total-assurance-blog-hero__content > p:not(.total-assurance-blog-label),
		.total-assurance-contact-hero__content > p:not(.total-assurance-contact-label),
		.total-assurance-services-hero__description
	) {
		font-size: 16px !important;
		line-height: 1.6 !important;
	}
}

@media (max-width: 380px) {
	.total-assurance-blog-hero,
	.total-assurance-team-banner,
	.total-assurance-contact-hero {
		background-size: auto 205px;
	}

	.total-assurance-blog-hero__content,
	.total-assurance-team-banner,
	.total-assurance-contact-hero {
		padding-bottom: 218px;
	}

	:is(
		.total-assurance-about-page__banner,
		.total-assurance-hero,
		.total-assurance-team-banner,
		.total-assurance-blog-hero,
		.total-assurance-contact-hero,
		.total-assurance-services-hero,
		.total-assurance-single-event__hero
	) h1 {
		font-size: 28px !important;
	}
}