/**
 * Banners block styles.
 * Plain CSS — not part of the SCSS/webpack bundle, loaded standalone.
 */

.banner-block {
	margin-top: 20px;
}

@media (min-width: 992px) {
	.banner-block {
		margin-top: 40px;
	}
}

.banner {
	padding: 40px 30px;
}

@media (min-width: 992px) {
	.banner {
		padding: 60px 50px;
	}
}

/* A <span>, not a heading tag — a page can have many banners but should
   not accumulate an h2 per banner. */
.banner__heading {
	display: block;
	font-size: 1.6rem;
	line-height: 1.2;
	font-family: "bely-display", sans-serif;
	font-weight: 400;
	font-style: normal;
}

@media (min-width: 992px) {
	.banner__heading {
		font-size: 2rem;
		line-height: 1.3;
		padding-bottom: 0.2em;
	}
}

.banner p {
	font-size: 16px;
	color: inherit;
	font-family: "bely-display", sans-serif;
	font-weight: 400;
	font-style: normal;
}

@media (min-width: 992px) {
	.banner p {
		font-size: 18px;
	}
}

.banner .btn-plain {
	display: inline-block;
	margin-top: 15px;
	color: inherit;
}

/* Single, full-width banner: background bleeds edge to edge, content stays
   centered and readable via the shared .container max-width. */
.banner-block--single .banner {
	text-align: center;
}

/* Multiple banners: side-by-side cards inside the normal container. */
.banner-block__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}