.sy-dbkit {
  --sx: 100cqw;
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  margin: 0;
  overflow: hidden;
  background: #fff;
  color: #2f2018;
  font-family: "SVN-Gilroy", Manrope, sans-serif;
}

.sy-dbkit__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
}

.sy-dbkit__shade {
  display: none;
}

.sy-dbkit__brand,
.sy-dbkit__title,
.sy-dbkit__step {
  position: absolute;
  margin: 0;
  z-index: 1;
}

.sy-dbkit__brand {
  left: calc(var(--sx) * 100 / 1920);
  top: calc(var(--sx) * 156 / 1920);
  font-weight: 500;
  font-size: calc(var(--sx) * 81.8706 / 1920);
  line-height: calc(var(--sx) * 84 / 1920);
  letter-spacing: -0.03em;
  text-transform: capitalize;
  color: #a28b7e;
  white-space: nowrap;
}

.sy-dbkit__title {
  left: calc(var(--sx) * 346.6 / 1920);
  top: calc(var(--sx) * 156 / 1920);
  font-weight: 500;
  font-size: calc(var(--sx) * 81.8706 / 1920);
  line-height: calc(var(--sx) * 84 / 1920);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #2f2018;
}

.sy-dbkit__line1,
.sy-dbkit__line2 {
  display: block;
  white-space: nowrap;
}

.sy-dbkit__line2 {
  margin-top: calc(var(--sx) * 4 / 1920);
}

.sy-dbkit__before {
  white-space: pre;
}

.sy-dbkit__line2 .sy-dbkit__before {
  visibility: hidden;
}

.sy-dbkit__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--sx) * 444.87 / 1920);
  border-top: 1px solid rgba(162, 139, 126, 0.34);
  z-index: 1;
}

.sy-dbkit__step {
  top: calc(var(--sx) * 436.87 / 1920);
}

.sy-dbkit__step:nth-of-type(1) { left: calc(var(--sx) * 263 / 1920); width: calc(var(--sx) * 380 / 1920); }
.sy-dbkit__step:nth-of-type(2) { left: calc(var(--sx) * 682 / 1920); width: calc(var(--sx) * 360 / 1920); }
.sy-dbkit__step:nth-of-type(3) { left: calc(var(--sx) * 1078 / 1920); width: calc(var(--sx) * 380 / 1920); }
.sy-dbkit__step:nth-of-type(4) { left: calc(var(--sx) * 1493 / 1920); width: calc(var(--sx) * 360 / 1920); }

.sy-dbkit__dot {
  display: block;
  width: calc(var(--sx) * 16 / 1920);
  height: calc(var(--sx) * 16 / 1920);
  border-radius: 50%;
  background: #ded5cf;
  position: relative;
}

.sy-dbkit__dot::after {
  content: "";
  position: absolute;
  left: calc(var(--sx) * 4 / 1920);
  top: calc(var(--sx) * 4 / 1920);
  width: calc(var(--sx) * 8 / 1920);
  height: calc(var(--sx) * 8 / 1920);
  border-radius: 50%;
  background: #2f2018;
}

.sy-dbkit__num,
.sy-dbkit__step-title,
.sy-dbkit__desc {
  margin: 0;
  letter-spacing: -0.03em;
}

.sy-dbkit__num {
  margin-top: calc(var(--sx) * 21 / 1920);
  font-weight: 400;
  font-size: calc(var(--sx) * 16 / 1920);
  line-height: calc(var(--sx) * 17 / 1920);
  text-transform: uppercase;
  color: #2f2018;
}

.sy-dbkit__step-title {
  margin-top: calc(var(--sx) * 8 / 1920);
  font-weight: 400;
  font-size: calc(var(--sx) * 32 / 1920);
  line-height: 1.15;
  text-transform: uppercase;
  color: #2f2018;
  white-space: nowrap;
}

.sy-dbkit__desc {
  margin-top: calc(var(--sx) * 10 / 1920);
  max-width: calc(var(--sx) * 220 / 1920);
  font-weight: 600;
  font-size: calc(var(--sx) * 18 / 1920);
  line-height: 1.35;
  color: #a28b7e;
}