.sy-war {
  --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-war__eyebrow,
.sy-war__title,
.sy-war__point,
.sy-war__photo {
  position: absolute;
  margin: 0;
}

.sy-war__eyebrow {
  z-index: 1;
  left: calc(var(--sx) * 100 / 1920);
  top: calc(var(--sx) * 165 / 1920);
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 400;
  font-size: calc(var(--sx) * 36 / 1920);
  line-height: calc(var(--sx) * 38 / 1920);
  letter-spacing: -0.03em;
  color: #a28b7e;
}

.sy-war__title {
  z-index: 1;
  left: calc(var(--sx) * 100 / 1920);
  top: calc(var(--sx) * 266 / 1920);
  width: calc(var(--sx) * 700 / 1920);
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 500;
  font-size: calc(var(--sx) * 64 / 1920);
  line-height: calc(var(--sx) * 78 / 1920);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #2f2018;
}

.sy-war__point {
  z-index: 1;
  left: calc(var(--sx) * 100 / 1920);
  width: calc(var(--sx) * 640 / 1920);
}

.sy-war__point h3,
.sy-war__point p,
.sy-war__rule {
  position: absolute;
  left: 0;
  margin: 0;
}

.sy-war__point h3 {
  top: 0;
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 700;
  font-size: calc(var(--sx) * 24 / 1920);
  line-height: calc(var(--sx) * 25 / 1920);
  text-transform: uppercase;
  color: #2f2018;
  white-space: nowrap;
}

.sy-war__point p {
  width: calc(var(--sx) * 632 / 1920);
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 500;
  font-size: calc(var(--sx) * 20 / 1920);
  line-height: calc(var(--sx) * 34 / 1920);
  letter-spacing: -0.03em;
  color: rgba(47, 32, 24, 0.72);
}

.sy-war__rule {
  width: calc(var(--sx) * 615 / 1920);
  height: 1px;
  background: rgba(47, 32, 24, 0.12);
}

.sy-war__point:nth-of-type(1) { top: calc(var(--sx) * 656 / 1920); }
.sy-war__point:nth-of-type(2) { top: calc(var(--sx) * 800 / 1920); }
.sy-war__point:nth-of-type(3) { top: calc(var(--sx) * 944 / 1920); }

.sy-war__point p { top: calc(var(--sx) * 32 / 1920); }
.sy-war__point .sy-war__rule { top: calc(var(--sx) * 116 / 1920); }

.sy-war__photo {
  z-index: 0;
  object-fit: cover;
}

.sy-war__photo--side {
  left: calc(var(--sx) * 796 / 1920);
  top: calc(var(--sx) * 526 / 1920);
  width: calc(var(--sx) * 292 / 1920);
  height: calc(var(--sx) * 456 / 1920);
  border-radius: calc(var(--sx) * 20 / 1920);
}

.sy-war__photo--main {
  left: calc(var(--sx) * 1106 / 1920);
  top: calc(var(--sx) * 268 / 1920);
  width: calc(var(--sx) * 492 / 1920);
  height: calc(var(--sx) * 812 / 1920);
  border-radius: calc(var(--sx) * 20 / 1920) calc(var(--sx) * 20 / 1920) 0 0;
}

.sy-war__photo--top {
  left: calc(var(--sx) * 1616 / 1920);
  top: calc(var(--sx) * 268 / 1920);
  width: calc(var(--sx) * 343 / 1920);
  height: calc(var(--sx) * 308 / 1920);
  border-radius: calc(var(--sx) * 20 / 1920);
}

.sy-war__photo--low {
  left: calc(var(--sx) * 1617 / 1920);
  top: calc(var(--sx) * 596 / 1920);
  width: calc(var(--sx) * 386 / 1920);
  height: calc(var(--sx) * 257 / 1920);
  border-radius: calc(var(--sx) * 20 / 1920);
}