/* pages/home/quote.css
   Home: the quote block and its brand cubes.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

.quote-body { display: flex; flex-direction: column; gap: 20px; }

.swatches { display: flex; gap: 6px; }

.swatches span { width: 14px; height: 14px; display: block; }

.quote-text {
	margin: 0;
	font-family: var(--serif);
	font-size: 31px;
	line-height: 1.42;
	font-weight: 400;
	color: var(--ink);
	text-wrap: pretty;
}

.quote-text p { margin: 0; }

@media (max-width: 980px) {
	.quote-text { font-size: 26px; }

	.swatches {
		margin-top: 40px;
	 }

}

@media (max-width: 680px) {
	.quote-text { font-size: 21px; 
	}

	.swatches {
		margin-top: -40px;
	 }
	  .kicker-red{
		margin-bottom: 20px;
	 }
}