:root{
    /* можно легко перекрасить всё сразу */
    --arrow-active : #F37E6C;             /* насыщенный коралловый (как на скрине слева) */
    --arrow-size   : 48px;                /* Ø кружка */
  }


.splide__slide {
  width: 360px !important;
  flex-shrink: 0;
  padding: 0 0.10rem;
}

.splide__track {
  overflow: hidden !important;
}

.splide__slide figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.splide__slide img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  border-radius: 1rem;
}

.splide__arrows {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.splide__arrow {
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-radius: 50%;
  background: var(--arrow-active);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s ease, opacity .25s ease;
}

/* сама стрелка-иконка */
.splide__arrow i{
  font-size: 1.35rem;   /* ≈22 px */
  color: #fff;
  line-height: 1;
}

/* “приглушённая” (неактивная) кнопка — Splide вешает атрибут disabled, когда
   переход невозможен.  При loop:true это случается редко, но стиль пригодится. */
.splide__arrow[disabled]{
  cursor: default;
  opacity: .35;                       /* даёт тот самый бледно-розовый круг */
}

/* лёгкий hover-эффект, если нужно */
.splide__arrow:not([disabled]):hover{
  background: #f05f4f;                /* чуть темнее активного */
}

/* Позиционирование кружков снизу по центру — как на скрине */
.splide__arrow--prev{
  left: 50%;
  transform: translateX(calc(-100% - 6px));   /* 6 px — расстояние между кружками */
  bottom: -40px;  /* подвиньте по вкусу */
  top: auto;
}
.splide__arrow--next{
  left: 50%;
  transform: translateX(6px);
  bottom: -40px;
  top: auto;
}


@media (max-width: 767.98px) {
  .splide__slide {
    width: 240px !important;
  }
  .splide__slide img {
    height: 300px;
  }
}

.splide__slide img:hover {
  transform: scale(1.04);
}