.sy-flow {
  --sx: 100cqw;
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  margin: -1px 0 0;
  overflow: hidden;
  background: #fff;
  color: #2f2018;
}

.sy-flow__bar {
  position: absolute;
  z-index: 3;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--sx) * 89 / 1920);
}

.sy-flow__bar--one {
  left: 0;
  width: calc(var(--sx) * 1082 / 1920);
  background: #291c1a;
}

.sy-flow__bar--two {
  left: calc(var(--sx) * 1082 / 1920);
  width: calc(var(--sx) * 838 / 1920);
  background: #825a22;
}

.sy-flow__bar h2 {
  margin: 0;
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 600;
  font-size: calc(var(--sx) * 32 / 1920);
  line-height: calc(var(--sx) * 33 / 1920);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.sy-flow__line {
  position: absolute;
  z-index: 3;
  top: calc(var(--sx) * 89 / 1920);
  width: 1px;
  height: calc(var(--sx) * 991 / 1920);
  background: #737373;
}

.sy-flow__line--1 { left: calc(var(--sx) * 344 / 1920); }
.sy-flow__line--2 { left: calc(var(--sx) * 589 / 1920); }
.sy-flow__line--3 { left: calc(var(--sx) * 835 / 1920); }
.sy-flow__line--4 { left: calc(var(--sx) * 1081 / 1920); }
.sy-flow__line--5 { left: calc(var(--sx) * 1327 / 1920); }
.sy-flow__line--6 { left: calc(var(--sx) * 1573 / 1920); }

.sy-flow__num,
.sy-flow__photo,
.sy-flow__step h3,
.sy-flow__step ul {
  position: absolute;
  z-index: 2;
  margin: 0;
}

.sy-flow__num {
  z-index: 4;
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 900;
  font-size: calc(var(--sx) * 32 / 1920);
  line-height: calc(var(--sx) * 33 / 1920);
  letter-spacing: -0.03em;
  color: #2f2018;
}

.sy-flow__step:nth-of-type(2) .sy-flow__num,
.sy-flow__step:nth-of-type(6) .sy-flow__num {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.55);
}

.sy-flow__step h3 {
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 600;
  font-size: calc(var(--sx) * 32 / 1920);
  line-height: calc(var(--sx) * 40 / 1920);
  letter-spacing: -0.03em;
  color: #2f2018;
}

.sy-flow__step ul {
  padding: 0;
  list-style: none;
}

.sy-flow__step li {
  position: relative;
  padding-left: calc(var(--sx) * 14 / 1920);
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 500;
  font-size: calc(var(--sx) * 16 / 1920);
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: #2f2018;
}

.sy-flow__step li + li {
  margin-top: calc(var(--sx) * 8 / 1920);
}

.sy-flow__step li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--sx) * 7 / 1920);
  width: calc(var(--sx) * 4 / 1920);
  height: calc(var(--sx) * 4 / 1920);
  border-radius: 50%;
  background: currentColor;
}

.sy-flow__step li.is-head {
  padding-left: 0;
  font-weight: 700;
  margin-top: calc(var(--sx) * 14 / 1920);
}

.sy-flow__step li.is-head:first-child {
  margin-top: 0;
}

.sy-flow__step li.is-head::before {
  content: none;
}

.sy-flow__photo {
  object-fit: cover;
}

.sy-flow__step:nth-of-type(1) .sy-flow__num { left: calc(var(--sx) * 141 / 1920); top: calc(var(--sx) * 129 / 1920); }
.sy-flow__step:nth-of-type(1) h3 { left: calc(var(--sx) * 141 / 1920); top: calc(var(--sx) * 358 / 1920); width: calc(var(--sx) * 155 / 1920); }
.sy-flow__step:nth-of-type(1) ul { left: calc(var(--sx) * 122 / 1920); top: calc(var(--sx) * 452 / 1920); width: calc(var(--sx) * 190 / 1920); }
.sy-flow__step:nth-of-type(1) .sy-flow__photo { left: calc(var(--sx) * 98 / 1920); top: calc(var(--sx) * 632 / 1920); width: calc(var(--sx) * 246 / 1920); height: calc(var(--sx) * 447 / 1920); }

.sy-flow__step:nth-of-type(2) .sy-flow__num { left: calc(var(--sx) * 375 / 1920); top: calc(var(--sx) * 129 / 1920); }
.sy-flow__step:nth-of-type(2) h3 { left: calc(var(--sx) * 375 / 1920); top: calc(var(--sx) * 552 / 1920); width: calc(var(--sx) * 169 / 1920); }
.sy-flow__step:nth-of-type(2) ul { left: calc(var(--sx) * 351 / 1920); top: calc(var(--sx) * 686 / 1920); width: calc(var(--sx) * 218 / 1920); }
.sy-flow__step:nth-of-type(2) .sy-flow__photo { left: calc(var(--sx) * 345 / 1920); top: calc(var(--sx) * 88 / 1920); width: calc(var(--sx) * 245 / 1920); height: calc(var(--sx) * 422 / 1920); }

.sy-flow__step:nth-of-type(3) .sy-flow__num { left: calc(var(--sx) * 620 / 1920); top: calc(var(--sx) * 129 / 1920); }
.sy-flow__step:nth-of-type(3) h3 { left: calc(var(--sx) * 614 / 1920); top: calc(var(--sx) * 358 / 1920); width: calc(var(--sx) * 169 / 1920); }
.sy-flow__step:nth-of-type(3) ul { left: calc(var(--sx) * 614 / 1920); top: calc(var(--sx) * 452 / 1920); width: calc(var(--sx) * 213 / 1920); }
.sy-flow__step:nth-of-type(3) .sy-flow__photo { left: calc(var(--sx) * 590 / 1920); top: calc(var(--sx) * 752 / 1920); width: calc(var(--sx) * 246 / 1920); height: calc(var(--sx) * 328 / 1920); }

.sy-flow__step:nth-of-type(4) .sy-flow__num { left: calc(var(--sx) * 863 / 1920); top: calc(var(--sx) * 129 / 1920); }
.sy-flow__step:nth-of-type(4) h3 { left: calc(var(--sx) * 871 / 1920); top: calc(var(--sx) * 578 / 1920); width: calc(var(--sx) * 169 / 1920); }
.sy-flow__step:nth-of-type(4) ul { left: calc(var(--sx) * 850 / 1920); top: calc(var(--sx) * 674 / 1920); width: calc(var(--sx) * 190 / 1920); }
.sy-flow__step:nth-of-type(4) .sy-flow__photo { left: calc(var(--sx) * 835 / 1920); top: calc(var(--sx) * 358 / 1920); width: calc(var(--sx) * 247 / 1920); height: calc(var(--sx) * 165 / 1920); }

.sy-flow__step:nth-of-type(5) .sy-flow__num { left: calc(var(--sx) * 1111 / 1920); top: calc(var(--sx) * 129 / 1920); }
.sy-flow__step:nth-of-type(5) h3 { left: calc(var(--sx) * 1111 / 1920); top: calc(var(--sx) * 358 / 1920); width: calc(var(--sx) * 180 / 1920); }
.sy-flow__step:nth-of-type(5) ul { left: calc(var(--sx) * 1111 / 1920); top: calc(var(--sx) * 405 / 1920); width: calc(var(--sx) * 200 / 1920); }
.sy-flow__step:nth-of-type(5) .sy-flow__photo { left: calc(var(--sx) * 1081 / 1920); top: calc(var(--sx) * 729 / 1920); width: calc(var(--sx) * 247 / 1920); height: calc(var(--sx) * 350 / 1920); }

.sy-flow__step:nth-of-type(6) .sy-flow__num { left: calc(var(--sx) * 1358 / 1920); top: calc(var(--sx) * 129 / 1920); }
.sy-flow__step:nth-of-type(6) h3 { left: calc(var(--sx) * 1363 / 1920); top: calc(var(--sx) * 571 / 1920); width: calc(var(--sx) * 160 / 1920); }
.sy-flow__step:nth-of-type(6) ul { left: calc(var(--sx) * 1341 / 1920); top: calc(var(--sx) * 620 / 1920); width: calc(var(--sx) * 200 / 1920); }
.sy-flow__step:nth-of-type(6) .sy-flow__photo { left: calc(var(--sx) * 1328 / 1920); top: calc(var(--sx) * 88 / 1920); width: calc(var(--sx) * 245 / 1920); height: calc(var(--sx) * 441 / 1920); }

.sy-flow__step:nth-of-type(7) .sy-flow__num { left: calc(var(--sx) * 1610 / 1920); top: calc(var(--sx) * 129 / 1920); }
.sy-flow__step:nth-of-type(7) h3 { left: calc(var(--sx) * 1614 / 1920); top: calc(var(--sx) * 801 / 1920); width: calc(var(--sx) * 169 / 1920); }
.sy-flow__step:nth-of-type(7) ul { left: calc(var(--sx) * 1590 / 1920); top: calc(var(--sx) * 896 / 1920); width: calc(var(--sx) * 200 / 1920); }
.sy-flow__step:nth-of-type(7) .sy-flow__photo { left: calc(var(--sx) * 1573 / 1920); top: calc(var(--sx) * 558 / 1920); width: calc(var(--sx) * 246 / 1920); height: calc(var(--sx) * 212 / 1920); }