.slider-container {
      overflow: hidden;
      position: relative;
      padding: 2rem 0;
  }

  .slider {
      display: flex;
      transition: transform 0.5s ease;
      will-change: transform;
  }

  .slide {
      min-width: 240px;
      margin: 0 10px;
      text-align: center;
      flex-shrink: 0;
  }

  .slide img {
      width: 200px;
      height: auto;
  }

  .slider-controls {
      width: 40px;
      height: 40px;
      background: #000;
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      z-index: 2;
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
  }

  @media (max-width: 768px) {
      .slide {
          min-width: 150px;
      }
  }