:root {
  --sapio-slider-height: clamp(280px, 44vw, 520px);
}

#post-2 {
  position: relative;
}

#sapiotopback {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sapio-slider-height);
  overflow: visible;
  pointer-events: none;
  z-index: 10;
}

#sapiotop {
  box-sizing: border-box;
  left: 50% !important;
  max-width: 1040px;
  border-radius: 8px;
  pointer-events: auto;
  z-index: 20 !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

#sapiotoptytle,
#sapiotopsubtytle {
  overflow-wrap: anywhere;
}

#n2-ss-2.sapio-static-slider {
  position: relative;
  overflow: hidden;
  background: #111827;
}

#n2-ss-2.sapio-static-slider .n2-ss-slider-1,
#n2-ss-2.sapio-static-slider .n2-ss-slider-2,
#n2-ss-2.sapio-static-slider .n2-ss-slider-3,
#n2-ss-2.sapio-static-slider .n2-ss-slider-4,
#n2-ss-2.sapio-static-slider .n2-ss-slider-wrapper-inside {
  min-height: var(--sapio-slider-height);
  height: var(--sapio-slider-height);
}

#n2-ss-2.sapio-static-slider .n2-ss-slider-3 {
  position: relative;
  display: block;
}

#n2-ss-2.sapio-static-slider .n2-ss-slide-backgrounds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

#n2-ss-2.sapio-static-slider .n2-ss-slide-background {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: none !important;
  transition: opacity 1200ms ease;
  z-index: 1;
}

#n2-ss-2.sapio-static-slider .n2-ss-slide-background.is-active {
  opacity: 1;
  z-index: 2;
}

#n2-ss-2.sapio-static-slider .n2-ss-slide-background-image,
#n2-ss-2.sapio-static-slider .n2-ss-slide-background-image picture,
#n2-ss-2.sapio-static-slider .n2-ss-slide-background-image img {
  display: block;
  width: 100%;
  height: 100%;
}

#n2-ss-2.sapio-static-slider .n2-ss-slide-background-image img {
  object-fit: cover;
  object-position: var(--ss-o-pos-x, 50%) var(--ss-o-pos-y, 50%);
  transform: scale(1);
  transition: transform 6200ms ease;
}

#n2-ss-2.sapio-static-slider .n2-ss-slide-background.is-active .n2-ss-slide-background-image img {
  transform: scale(1.055);
}

#n2-ss-2.sapio-static-slider .n2-ss-slider-4,
#n2-ss-2.sapio-static-slider .n2-ss-slide {
  position: absolute;
  inset: 0;
  transform: none !important;
  pointer-events: none;
}

#n2-ss-2.sapio-static-slider .n2-ss-slide {
  opacity: 0;
}

#n2-ss-2.sapio-static-slider .n2-ss-slide.is-active {
  opacity: 1;
}

#n2-ss-2.sapio-static-slider .n2-ss-slider-controls {
  z-index: 5;
}

#n2-ss-2.sapio-static-slider .nextend-arrow {
  position: relative;
  pointer-events: auto;
}

@media (max-width: 700px) {
  :root {
    --sapio-slider-height: clamp(300px, 76vw, 390px);
  }

  body {
    overflow-x: hidden;
  }

  #sapiotop {
    width: calc(100% - 28px) !important;
    top: 50% !important;
    padding: 10px 14px !important;
    border-radius: 10px;
  }

  #sapiotoptytle {
    font-size: clamp(25px, 8vw, 34px) !important;
    margin: 8px 0 6px !important;
    line-height: 1.08 !important;
  }

  #sapiotopsubtytle {
    font-size: clamp(12px, 3.8vw, 15px) !important;
    margin: 4px 0 8px !important;
    line-height: 1.45 !important;
  }

  #sapiotopback {
    height: var(--sapio-slider-height);
  }

  #n2-ss-2.sapio-static-slider .n2-ss-slider-controls {
    display: none;
  }
}

@media (max-width: 420px) {
  :root {
    --sapio-slider-height: 330px;
  }

  #sapiotop {
    width: calc(100% - 20px) !important;
    top: 50% !important;
    padding: 8px 10px !important;
  }

  #sapiotoptytle {
    font-size: clamp(22px, 7.4vw, 29px) !important;
  }

  #sapiotopsubtytle {
    font-size: 12px !important;
  }

  #sapiotopback {
    height: var(--sapio-slider-height);
  }
}

@media (prefers-reduced-motion: reduce) {
  #n2-ss-2.sapio-static-slider .n2-ss-slide-background,
  #n2-ss-2.sapio-static-slider .n2-ss-slide-background-image img {
    transition: none;
  }
}
