.slider {
      position: relative;
      width: 640px;
      height: 426px;
      overflow: hidden;
    }

    .slides {
      display: flex;
      transition: transform 1s;
      width: 100%;
      height: 100%;
    }

    .slides img {
      width: 100%;
      height: 100%;
    }

    .arrow {
      position: absolute;
      top: 50%;
      font-size: 36px;
      cursor: pointer;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 16px;
      border-radius: 50%;
      transition: background-color 0.3s;
    }

    .left-arrow {
      left: 0;
    }

    .right-arrow {
      right: 0;
    }

    .arrow:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }