/* Denser paired scenes and a realistic interactive ocular-surface view. */
@media (min-width: 761px) {
	.ee-dry__stage-layout .ee-dry__scenes {
		display: grid;
		grid-template-rows: 1.12fr .88fr;
		align-self: stretch;
	}

	.ee-dry__stage-layout .ee-dry__scene {
		display: flex;
		min-height: 0;
		flex-direction: column;
	}

	.ee-dry__stage-layout .ee-dry__photo-wrap,
	.ee-dry__stage-layout .ee-dry__scene--driving .ee-dry__photo-wrap,
	.ee-dry__stage-layout .ee-dry__scene--computer .ee-dry__photo-wrap {
		min-height: 250px;
		height: auto;
		flex: 1 1 auto;
	}
}

.ee-dry__eye-surface {
	overflow: hidden;
	aspect-ratio: 2.08 / 1;
	padding: 0 !important;
}

.ee-dry__eye-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ee-dry__eye-photo--inflamed {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: var(--inflamed-photo-opacity, 0);
	transition: opacity .16s ease;
}

.ee-dry__tear-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
}

.ee-dry__tear-layer rect {
	fill: #61e6ed;
}

.ee-dry__tear-layer path {
	stroke: #d8ffff;
	stroke-width: 10;
	filter: drop-shadow(0 0 4px rgba(64,224,231,.9));
}

.ee-dry__breakup path {
	fill: #ff746b;
	fill-opacity: .16;
	stroke: #ff594e;
	stroke-width: 5;
	stroke-dasharray: 10 5;
	filter: drop-shadow(0 0 5px rgba(255,62,53,.85));
}

.ee-dry__surface-copy {
	display: grid;
	grid-template-rows: auto minmax(2.4em, auto) minmax(3.2em, auto);
	align-content: start;
}

.ee-dry__surface-copy h3,
.ee-dry__surface-copy > p:last-child {
	align-self: start;
}

@media (min-width: 761px) {
	.ee-dry__surface-copy h3 {
		font-size: clamp(1.35rem, 2.1vw, 2rem);
		white-space: nowrap;
	}
}

.ee-dry__surface-label {
	z-index: 3;
}

.ee-dry__tear-profile {
	display: grid;
	grid-template-columns: minmax(120px, .65fr) minmax(220px, 1.35fr);
	align-items: center;
	width: 100%;
	padding: .45rem .7rem;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 14px;
	background: rgba(255,255,255,.07);
}

.ee-dry__tear-profile > div strong,
.ee-dry__tear-profile > div span {
	display: block;
}

.ee-dry__tear-profile > div strong {
	color: #fff;
	font-size: .95rem;
}

.ee-dry__tear-profile > div span {
	color: #cfe1e8;
	font-size: .72rem;
}

.ee-dry__tear-profile svg {
	display: block;
	width: 100%;
	height: 86px;
	overflow: visible;
}

.ee-dry__tear-profile text {
	fill: #eaf6f8;
	font-size: 13px;
	font-weight: 800;
}

.ee-dry__tear-profile .ee-dry__cornea-label {
	font-size: 12px;
}

.ee-dry__profile-cornea,
.ee-dry__profile-mucin,
.ee-dry__profile-aqueous,
.ee-dry__profile-lipid {
	fill: none;
	stroke-linecap: round;
}

.ee-dry__profile-cornea { stroke: #d7a08e; stroke-width: 17; }
.ee-dry__profile-mucin { stroke: #b8ece7; stroke-width: 8; }
.ee-dry__profile-aqueous { stroke: #63d8e4; stroke-width: 12; }
.ee-dry__profile-lipid { stroke: #f5c55f; stroke-width: 5; }
.ee-dry__leader { fill: none; stroke-width: 2; stroke-dasharray: 4 3; }
.ee-dry__leader--lipid { stroke: #f5c55f; }
.ee-dry__leader--aqueous { stroke: #63d8e4; }
.ee-dry__leader--mucin { stroke: #b8ece7; }

@media (max-width: 760px) {
	.ee-dry__stage-layout .ee-dry__scene--driving .ee-dry__photo-wrap { height: 190px; }
	.ee-dry__stage-layout .ee-dry__scene--computer .ee-dry__photo-wrap { height: 265px; }
	.ee-dry__tear-profile { grid-template-columns: 1fr; }
	.ee-dry__tear-profile > div { padding: .25rem .25rem 0; }
	.ee-dry__tear-profile svg { height: 82px; }
	.ee-dry__surface-copy { grid-template-rows: auto auto auto; }
}