/* Before Slick load */
.app-screens-slider__slider:not(.slick-initialized) {
  display: flex;
  flex-wrap: nowrap;          /* keeps everything on one line */
  justify-content: flex-start;
  align-items: center;
  gap: 48px;                  /* same spacing as slick */
  overflow-x: auto;           /* allows scroll if too wide */
  scroll-behavior: smooth;
}

.app-screens-slider__slider:not(.slick-initialized) .app-screens-slider__slide {
  flex: 0 0 auto;             /* prevents shrinking */
  width: 181px;
  height: 392px;
}

/* --- Container --- */
.app-screens-slider-mod.app-screens-slider-mod--slider {
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
}

.app-screens-slider__slider.slick-initialized .slick-slide {
  margin: 0 12px;
  transition: all 0.3s ease;
}

/* --- Slick Track & Equal Height --- */
.app-screens-slider-mod--slider .slick-track {
  display: flex;
  align-items: center;
  padding: 40px 0;
}


/* --- Image Scaling --- */
.app-screens-slider__slide img {
  display: block;
  margin: 0 auto;
  width: 181px;
  height: 392px;
  aspect-ratio: 181/392;
  object-fit: cover;
  border-radius: 12px;
  background: var(--blue);
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.40), 0 2px 4px 0 rgba(0, 0, 0, 0.20);
  transition: transform 0.3s ease;
}

{#
.app-screens-slider__slider .app-screens-slider__slide img {
  transform-origin: right center;
}

.app-screens-slider__slider .slick-center ~ .slick-slide.slick-active .app-screens-slider__slide img {
  transform-origin: left center;
}

.app-screens-slider__slider[data-slidecount="5"] .app-screens-slider__slide img {
  transform-origin: left center;
}

.app-screens-slider__slider[data-slidecount="5"] 
.slick-center ~ .slick-slide.slick-active .app-screens-slider__slide img {
  transform-origin: right center;
}

#}

.app-screens-slider-mod--slider .slick-slide:not(.slick-center) img {
  transform: scale(0.85);
}

.app-screens-slider-mod--slider .slick-center img {
  transform: scale(1);
  opacity: 1;
}

/* --- Arrows --- */
.app-screens-slider__arrows > div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  cursor: pointer;
  z-index: 3;
}

.app-screens-slider__arrows .arrow-left {
  left: -80px;
}

.app-screens-slider__arrows .arrow-right {
  right: -80px;
}


/* --- Responsive Tweaks --- */

@media (max-width: 1248px) {
  .app-screens-slider__arrows .arrow-left {
    left: -40px;
  }

  .app-screens-slider__arrows .arrow-right {
    right: -40px;
  }
}



@media (max-width: 1120px) {
  .app-screens-slider-mod.app-screens-slider-mod--slider {
    max-width: 620px;
  }

  .app-screens-slider__arrows .arrow-left {
    left: -80px;
  }

  .app-screens-slider__arrows .arrow-right {
    right: -80px;
  }
}


@media (max-width: 850px) {

  .app-screens-slider-mod.app-screens-slider-mod--slider {
    max-width: 100%;
    overflow: hidden;
  }

  .app-screens-slider__slider .slick-list {
    overflow: visible;
  }

  .app-screens-slider__arrows .arrow-left {
    left: 40px;
  }

  .app-screens-slider__arrows .arrow-right {
    right: 40px;
  }
}