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

.sy-gal__bg {
  position: absolute;
  left: -4%;
  top: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  filter: blur(6px);
}

.sy-gal__shade {
  position: absolute;
  inset: 0;
  background: rgba(41, 27, 14, 0.48);
  pointer-events: none;
}

.sy-gal__tabs,
.sy-gal__plan,
.sy-gal__stage {
  position: absolute;
  z-index: 1;
  margin: 0;
}

.sy-gal__tabs {
  left: 0;
  top: calc(var(--sx) * 280 / 1920);
  width: 100%;
  height: calc(var(--sx) * 31 / 1920);
}

.sy-gal__tab:nth-child(1) { left: calc(var(--sx) * 102 / 1920); }
.sy-gal__tab:nth-child(2) {
  left: calc(var(--sx) * 246 / 1920);
  width: calc(var(--sx) * 187 / 1920);
  text-align: center;
}
.sy-gal__tab:nth-child(3) { left: calc(var(--sx) * 471 / 1920); }

.sy-gal__tab {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: "UTM Caviar", "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 300;
  font-size: calc(var(--sx) * 19 / 1920);
  line-height: calc(var(--sx) * 25 / 1920);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  cursor: pointer;
}

.sy-gal__tab.is-active {
  color: #fff;
}

.sy-gal__plan {
  left: calc(var(--sx) * 88 / 1920);
  top: calc(var(--sx) * 416 / 1920);
  width: calc(var(--sx) * 459 / 1920);
  height: calc(var(--sx) * 469 / 1920);
}

.sy-gal__plan-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
}

.sy-gal__plan-img.is-active {
  display: block;
}

.sy-gal__plan-img--empty.is-active {
  display: block;
}

.sy-gal__stage {
  left: calc(var(--sx) * 626 / 1920);
  top: calc(var(--sx) * 187 / 1920);
  width: calc(var(--sx) * 1198 / 1920);
  height: calc(var(--sx) * 751 / 1920);
  border: 1px solid #b19494;
  border-radius: calc(var(--sx) * 37 / 1920);
  overflow: hidden;
  background: #1c140e;
}

.sy-gal__slide {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sy-gal__slide.is-active {
  display: block;
}

.sy-gal__fade {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.sy-gal__fade--left {
  left: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.79) 100%);
}

.sy-gal__fade--right {
  right: 0;
  top: 0;
  width: 31%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.22) 100%);
}

.sy-gal__fade--bottom {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 26%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.28) 100%);
}

.sy-gal__arrow {
  position: absolute;
  z-index: 2;
  top: calc(var(--sx) * 327 / 1920);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--sx) * 64 / 1920);
  height: calc(var(--sx) * 64 / 1920);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(20, 16, 14, 0.28);
  color: #fff;
  cursor: pointer;
}

.sy-gal__arrow--prev { left: calc(var(--sx) * 30 / 1920); }
.sy-gal__arrow--next { left: calc(var(--sx) * 1093 / 1920); }

.sy-gal__arrow svg {
  width: 46%;
  height: 46%;
}