/* =========================================================
  🧩 Hero Header Wrapper
========================================================= */
.intro-brand { margin:0 auto; padding:0 var(--wrapper-padding); width:100%; justify-content:center; overflow:hidden; position:relative; }

.intro-brand > * { position: relative; z-index: 1; }
.intro-brand .intro-brand-wrapper { border-radius:var(--section-br); display:flex; flex:1; gap:var(--section-gap); width:100%; margin:0 auto; }
.intro-brand .intro-brand-wrapper { align-items: left; align-self:stretch; align-items: stretch; }
.intro-brand .intro-brand-wrapper .section-content { display:flex; flex-direction:column; gap:var(--elements-gap-l); flex:1; min-width: 0; max-width:none; }

.intro-brand .intro-brand-wrapper::before { content: ""; position: absolute; inset: 0; width: 90%; height: 98%; border-radius: 75%; z-index:-5; }
/*linear-gradient(96deg, rgba(4, 142, 240, 0.25) 16.19%, rgba(232, 75, 218, 0.25) 96.61%)*/

.section.intro-brand .intro-brand-wrapper h2 { text-align:center; }

.section.intro-brand .intro-brand-wrapper .section-content .article-content { display:flex; flex-direction:column; gap:var(--elements-gap-s); }
.section.intro-brand .intro-brand-wrapper .section-content p { margin:auto; text-align:center; }

/* =========================================================
  🧩 Brands
========================================================= */
.brands-container .brands-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(var(--section-gap)/1.5); justify-items:center; align-items:center; list-style:none; padding:0; margin:0; }
.brands-container .brands-grid li { display:flex; justify-content:center; align-items:center; width:100%; max-width:160px; }
.brands-container .brands-grid figure { margin:0; width:clamp(100px, 18vw, 160px); aspect-ratio:3 / 1; display:flex; justify-content:center; align-items:center; position:relative; }
.brands-container .brands-grid img { width: 100%; height: 100%; object-fit: contain; display: block; }

.brands-container .brands-grid img { width: auto; height:auto; max-height:38px; max-width:150px; }

.brands-container .brands-grid figcaption { display:none; }

.intro-brand .brands-container { width:100%; }

/* =========================================================
  🧩 RWD
========================================================= */
@media (min-width: 1px) and (max-width: 640px) {
	.section.intro-brand { margin-top:-1px; }
	
	/* intro under kv */
	.intro-brand { margin:0 auto; padding:0 calc(var(--wrapper-padding)*0.75); }
	.section.intro-brand .intro-brand-wrapper { flex-direction:column; padding:calc(1.2* var(--box-padding)) calc(1.2* var(--box-padding)); }

	.section.intro-brand .intro-brand-wrapper .section-content p br { display:none;  }
	.section.intro-brand .intro-brand-wrapper .section-content h2 { width:100%; }
	.section.intro-brand .intro-brand-wrapper .section-content p { width:100%; }
	.section.intro-brand .intro-brand-wrapper .section-content p 	{ font: var(--p-l-regular-font); letter-spacing: var(--p-l-regular-ls); }
}

@media (min-width: 0px) and (max-width: 480px) {
  .intro-brand .brands-container { width:100%; max-width:100%; }
  .intro-brand .brands-container .brands-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 481px) and (max-width: 600px) {
  .intro-brand .brands-container .brands-grid { gap: var(--box-padding); grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 641px) and (max-width: 840px) {
	.section.intro-brand { margin-top:-1px; }

	/* intro under kv */
	.section.intro-brand .intro-brand-wrapper { flex-direction:column; padding:var(--box-padding) calc(var(--box-padding) * 1.5); }

	.section.intro-brand .intro-brand-wrapper .section-content h2,
	.section.intro-brand .intro-brand-wrapper .section-content p { width:100%; text-align:center; } 
	.section.intro-brand .intro-brand-wrapper .section-content p 	{ font: var(--p-l-regular-font); letter-spacing: var(--p-l-regular-ls); }
	.section.intro-brand .intro-brand-wrapper .section-content p br {  display:none; }
}

@media (min-width: 841px) and (max-width: 1023px) {
	/* intro under kv */
	.section.intro-brand .intro-brand-wrapper { padding:calc(var(--box-padding) * 1.25) calc(var(--box-padding) * 1.5);  max-width:calc(var(--width-wrap-1400) - (2 * var(--wrapper-padding))); }

	.section.intro-brand .intro-brand-wrapper .section-content .article-content { gap:var(--elements-gap); }

	.section.intro-brand .intro-brand-wrapper .section-content h2,
	.section.intro-brand .intro-brand-wrapper .section-content p { width:100%; text-align:center;  }
	.section.intro-brand .intro-brand-wrapper .section-content p br {  display:none; }
	.section.intro-brand .intro-brand-wrapper .section-content h3 { font:var(--h7-light-font); letter-spacing: var(--h7-ls); }
}

@media (min-width: 1024px) and (max-width: 1199px) {
	/* intro under kv */
	.section.intro-brand .intro-brand-wrapper { padding:calc(var(--box-padding) * 1.25) calc(var(--box-padding) * 1.5);  max-width:calc(var(--width-wrap-1400) - (2 * var(--wrapper-padding))); }
	
	.section.intro-brand .intro-brand-wrapper .section-content .article-content { gap:var(--elements-gap); }

	.section.intro-brand .intro-brand-wrapper .section-content p { /* font:var(--h5-font); letter-spacing: var(--h5-ls); */ }
	.section.intro-brand .intro-brand-wrapper .section-content p br { display:none; }
	.section.intro-brand .intro-brand-wrapper .section-content h3 { font:var(--h7-light-font); letter-spacing: var(--h7-ls); }

	.section.intro-brand .intro-brand-wrapper .section-content h2,
	.intro-brand .intro-brand-wrapper p { width:100%; text-align:center; }

  .intro-brand .brands-container .brands-grid { grid-template-columns: repeat(4, 1fr); max-width:960px; margin:auto; }
}

@media (min-width: 1200px) {
	/* intro under kv */
	.section.intro-brand .intro-brand-wrapper { max-width:calc(var(--width-wrap-1400) - (2 * var(--wrapper-padding))); padding:var(--box-padding) calc(var(--box-padding) * 1.25); }

	.section.intro-brand .intro-brand-wrapper .section-content .article-content { gap:var(--elements-gap); }

	.section.intro-brand .intro-brand-wrapper .section-content { gap:var(--space-36); }
	.section.intro-brand .intro-brand-wrapper .section-content p {  /* font-size:calc(0.9 * var(--fs-h3));*/  line-height:var(--lh-135); }
	.section.intro-brand .intro-brand-wrapper .section-content p br { display:none;  }
	.section.intro-brand .intro-brand-wrapper .section-content h3 { font:var(--h6-light-font); letter-spacing: var(--h6-ls); }

	.section.intro-brand .intro-brand-wrapper .section-content h2,
	.intro-brand .intro-brand-wrapper p { width:100%; text-align:center; }

  .intro-brand .brands-container .brands-grid { grid-template-columns: repeat(4, 1fr); max-width:960px; margin:auto; }
}