.eye-care { padding: 116px 0; background: #fff; }

.eye-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(355px, .78fr);
  gap: 92px;
  align-items: center;
}

.eye-grid .kicker { margin-bottom: 14px; }
.eye-grid h2 { max-width: 600px; font-size: clamp(42px, 4.4vw, 64px); line-height: .98; }
.eye-grid h2 em { color: var(--p); font-weight: inherit; }
.eye-grid > div > p:not(.kicker) { max-width: 605px; margin: 27px 0 30px; color: var(--muted); line-height: 1.75; font-size: 16px; }

.eye-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; max-width: 610px; margin: 0 0 31px; }
.eye-reasons > div { min-height: 120px; padding: 17px 16px; border: 1px solid #ede6f4; border-radius: 15px; background: #fbf9fd; }
.eye-reasons span { display: grid; width: 29px; height: 29px; margin-bottom: 11px; place-content: center; border-radius: 50%; background: #eee3ff; color: var(--p); font-size: 13px; }
.eye-reasons p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.eye-reasons b { display: inline-block; margin-bottom: 3px; color: var(--ink); font-size: 14px; }

.eye-photo {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  justify-self: end;
  position: relative;
  overflow: visible;
}
.eye-photo::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 25px;
  right: -24px;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: #eadcff;
}
.eye-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; border-radius: 24px; box-shadow: 0 18px 40px rgba(62, 38, 88, .09); }
.eye-photo div { position: absolute; left: -26px; bottom: 28px; padding: 14px 17px; border-left: 3px solid var(--p); background: #fff; color: var(--d); font-size: 12px; font-weight: 700; line-height: 1.35; box-shadow: 0 10px 25px rgba(49, 28, 75, .12); }
.eye-photo span { margin-left: 7px; color: var(--p); }

@media (max-width: 850px) {
  .eye-care { padding: 75px 0; }
  .eye-grid { grid-template-columns: 1fr; gap: 50px; }
  .eye-photo { justify-self: center; margin-right: 22px; }
}

@media (max-width: 520px) {
  .eye-grid h2 { font-size: 42px; }
  .eye-reasons { grid-template-columns: 1fr; }
  .eye-photo { max-width: calc(100% - 24px); }
  .eye-photo div { left: -12px; bottom: 18px; }
}