/*
 * padding-top/margin-bottom mirror .site-main's own padding-top
 * (src/css/base/elements/_body.scss), which exists to clear the fixed
 * header — the banner needs the same offset since it sits right after
 * the header too. margin-bottom pulls .site-main back up so the gap
 * between banner and content isn't doubled; keep both in sync with
 * .site-main's padding-top at each breakpoint.
 */
.tgs-rc-banner {
	padding: 20px 0;
	padding-top: 160px;
	margin-bottom: -130px;
}

@media (width <= 920px) {
	.tgs-rc-banner {
		padding-top: 120px;
		margin-bottom: -90px;
	}
}

/*
 * Mirrors the theme's .site-main container width (src/css/base/elements/_body.scss)
 * so the banner lines up with the page content below it. Keep these values in
 * sync if that container's width/breakpoints ever change.
 */
.tgs-rc-banner__inner {
	position: relative;
	max-width: 1320px;
	margin-inline: auto;
}

@media (width <= 1320px) {
	.tgs-rc-banner__inner {
		max-width: 100%;
		margin-inline: 40px;
	}
}

@media (width <= 920px) {
	.tgs-rc-banner__inner {
		margin-inline: 10px;
	}
}

.tgs-rc-banner__inner a,
.tgs-rc-banner__inner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 25px;
}