Arrow styling

grid width for mobile
  @media (min-width: 320px) and (max-width: 480px) {

    .regular-collection .grid__item {
      padding-left: 0px;
      margin-right: 0;
    }
    .slick-slide {
      width:320px;
    }

  }

with media  query

/*custom css  */
  .slide-arrow {
    position: absolute;
    display: block;
    height: 48px;
    width: 48px;
    line-height: 0;
    font-size:  25px;
    cursor: pointer;
    background-color: #f6f6f6;
    opacity:1;
    top: 35%;
    transform: translate(-50%);
    margin-top: -0px;
    border-radius: 100px;
    padding: 0;
    border: none;
    outline: none;
  }
  i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
  }

  .right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  .left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }
  .prev-arrow {
    z-index: 999;
    left: 51px;
    @media screen and (max-width: 1025px){
      left: 45px;
    }
     @media screen and (max-width: 768px){
      left: 49px;
    }
    @media screen and (max-width: 425px){
      left: 28px;
    }
  }
  .next-arrow {
    right: -27px;
    z-index: 999;


     @media screen and (max-width: 1025px){
      right: -32px;
    }
      @media screen and (max-width: 768px){
      right: -28px;
    }
    @media screen and (max-width: 425px){
      right: -38px;
    }
  }