/* Reference geometry; the media surface awaits an approved Dermobliss image. */
.home-laboratory { background: var(--dermobliss-background-primary); }

.home-laboratory__grid {
	display: grid;
	align-items: center;
	gap: 48px;
}

.home-laboratory__media,
.home-laboratory__content { min-inline-size: 0; }

.home-laboratory__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
	background: var(--dermobliss-background-secondary);
}
.home-laboratory__product { position: absolute; inset-block: 7%; inline-size: 62%; block-size: 86%; object-fit: contain; filter: drop-shadow(0 18px 16px rgb(28 27 26 / 12%)); }
.home-laboratory__product--0 { inset-inline-start: 2%; transform: rotate(-3deg); }
.home-laboratory__product--1 { inset-inline-end: 2%; transform: rotate(3deg); }

.home-laboratory__eyebrow {
	color: var(--dermobliss-accent-gold-dark);
	font-family: var(--dermobliss-font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.22em;
}

.home-laboratory__content h2 {
	margin-block-start: 16px;
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	letter-spacing: -0.025em;
}

.home-laboratory__description {
	margin-block-start: 16px;
	color: var(--dermobliss-text-secondary);
	font-size: 14px;
	font-weight: 300;
	line-height: 22.75px;
}

.home-laboratory__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-inline-size: 100%;
	min-block-size: 50px;
	margin-block-start: 32px;
	padding: 16px 32px;
	border: 1px solid rgb(28 27 26 / 15%);
	border-radius: 0;
	background: transparent;
	color: var(--dermobliss-text-primary);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.18em;
	white-space: nowrap;
	text-decoration: none;
	opacity: 1;
}

.home-laboratory__action:hover { color: var(--dermobliss-accent-gold-dark); }

.home-laboratory__action svg { flex: none; }

@media (min-width: 640px) {
	.home-laboratory__content h2 { font-size: 30px; line-height: 36px; }
}

@media (min-width: 1024px) {
	.home-laboratory__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-laboratory__content h2 { font-size: 36px; line-height: 40px; }
}