/* =========================================================
   Dynamic background
   ========================================================= */

.bestbay-bg-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 730px;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}

.bestbay-container-zero {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(180deg,rgba(255, 255, 255, 0) 5%, var(--bestbay-surface) 70%), var(--bestbay-dynamic-bg);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	filter: blur(15px) saturate(1.8);
	opacity: .25;
	transform: scale(1.15);
	transform-origin: top center;
}

/* =========================================================
   BestBay main wrapper
   ========================================================= */

.bestbay-blog-home {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	float: none;
	clear: both;
}


/* =========================================================
   BestBay Home — Hero
   ========================================================= */

.bestbay-hero {
	margin: 5px 0 30px;
	clear: both;
	width: 100%;
}

.bestbay-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 19fr) minmax(0, 22fr);
	column-gap: 20px;
	row-gap: 32px;
}

.bestbay-hero-secondary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 36px;
}



/* Shared content grid is defined in bsb-components.css. */

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 680px) {

	.bestbay-hero-grid,
	.bestbay-hero-secondary,
	.bestbay-post-grid {
		grid-template-columns: 1fr;
	}

	.bestbay-card--hero .bestbay-card__title {
		font-size: 1.5rem;
	}

	.bestbay-card--hero {
		min-height: 420px;
	}

}