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

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

.sy-core__eyebrow,
.sy-core__title,
.sy-core__card {
  position: absolute;
  z-index: 1;
  margin: 0;
  font-family: "SVN-Gilroy", Manrope, sans-serif;
}

.sy-core__eyebrow {
  left: calc(var(--sx) * 101 / 1920);
  top: calc(var(--sx) * 127 / 1920);
  font-weight: 400;
  font-size: calc(var(--sx) * 36 / 1920);
  line-height: calc(var(--sx) * 38 / 1920);
  letter-spacing: -0.03em;
  color: #a28b7e;
  white-space: nowrap;
}

.sy-core__title {
  left: calc(var(--sx) * 101 / 1920);
  top: calc(var(--sx) * 187 / 1920);
  font-weight: 500;
  font-size: calc(var(--sx) * 64 / 1920);
  line-height: calc(var(--sx) * 69 / 1920);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #2f2018;
  white-space: nowrap;
}

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

.sy-core__card:nth-of-type(1) { left: calc(var(--sx) * 101 / 1920); }
.sy-core__card:nth-of-type(2) { left: calc(var(--sx) * 572 / 1920); }
.sy-core__card:nth-of-type(3) { left: calc(var(--sx) * 1043 / 1920); }
.sy-core__card:nth-of-type(4) { left: calc(var(--sx) * 1514 / 1920); }

.sy-core__card-title {
  margin: 0;
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 600;
  font-size: calc(var(--sx) * 24 / 1920);
  line-height: calc(var(--sx) * 36 / 1920);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #2f2018;
}

.sy-core__card:nth-of-type(1) .sy-core__card-title { max-width: calc(var(--sx) * 172 / 1920); }
.sy-core__card:nth-of-type(2) .sy-core__card-title { max-width: calc(var(--sx) * 228 / 1920); }
.sy-core__card:nth-of-type(3) .sy-core__card-title { max-width: calc(var(--sx) * 301 / 1920); }
.sy-core__card:nth-of-type(4) .sy-core__card-title {
  max-width: calc(var(--sx) * 259 / 1920);
}

.sy-core__photo {
  position: absolute;
  left: 0;
  top: calc(var(--sx) * 99 / 1920);
  width: calc(var(--sx) * 314.6 / 1920);
  height: calc(var(--sx) * 485.53 / 1920);
  overflow: hidden;
  background: #d9d9d9;
}

.sy-core__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}