/* ==========================================================================
   Stonebridge Financial (stonebridge) — breakpoints

   Bootstrap's responsive utilities (col-*, row-cols-*, d-*-none, flex-*-row,
   p-md-*, order-lg-*) carry the responsive layout in the markup. Only the
   things Bootstrap can't express are here: the hero's two-column overlap
   composition and the nav's logo/label sizing.
   ========================================================================== */

@media only screen and (max-width: 359px) {
	.site-nav__logo img {
		width: 124px;
	}

	.site-nav .btn-sm {
		--bs-btn-padding-x: .75rem;
		--bs-btn-font-size: .8125rem;
		gap: 6px;
	}

	.site-nav .btn svg {
		width: 16px;
		height: 16px;
	}

	.action-bar .btn {
		--bs-btn-padding-x: .875rem;
	}

	.action-bar__main svg {
		display: none;
	}
}

@media only screen and (max-width: 767px) {
	/* room for the sticky action bar */
	.page-landing footer {
		padding-bottom: calc(3rem + 76px) !important;
	}
}

@media only screen and (min-width: 480px) {
	.site-nav__logo img {
		width: 177px;
	}
}

@media only screen and (min-width: 768px) {
	.site-nav__logo img {
		width: 195px;
	}
}

@media only screen and (min-width: 992px) and (min-height: 640px) {
	.feature__copy {
		position: sticky;
		top: calc(var(--sb-nav-h) + 2rem);
	}
}

@media only screen and (min-width: 992px) {
	.hero {
		grid-template-columns:
			minmax(var(--sb-gutter, 1rem), 1fr)
			minmax(0, 540px)
			clamp(3rem, 13vw, 14rem)
			minmax(0, 460px)
			minmax(var(--sb-gutter, 1rem), 1fr);
		grid-template-rows: auto;
		min-height: min(100svh, 900px);
		background: var(--sb-sky-top);
	}

	.hero__media {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.hero__img {
		inset: 0;
		height: 100%;
		object-position: 50% 30%;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.hero__scrim {
		background:
			linear-gradient(180deg, rgba(11, 13, 18, .28) 0%, rgba(11, 13, 18, 0) 18%),
			radial-gradient(70% 80% at 14% 62%, rgba(11, 13, 18, .42) 0%, rgba(11, 13, 18, .26) 45%, rgba(11, 13, 18, 0) 80%);
	}

	.hero__copy {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		padding: calc(var(--sb-nav-h) + 3rem) 0 4rem;
	}

	.hero__card-wrap {
		grid-column: 4;
		grid-row: 1;
		align-self: center;
		margin-top: 0;
		padding: calc(var(--sb-nav-h) + 2rem) 0 4rem;
	}
}