Customise Summary Block Carousel Arrow

Hi there, I'm reaching out for your assistance! I'm currently working on a summary block and need help with a code to modify the arrow style and reposition them up and down instead of side by side. I'm having difficulty putting together the code, and any help would be greatly appreciated. Can anyone assist me in tackling this challenge? Thank you!

page be found: Home

url: https://puma-paddlefish-k7zy.squarespace.com/

Password: Love365

This is what it currently looks like: 

And this is what i am trying to achieve: 

Code i have : 

/* Summary block custom arrows */
.sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous {
    background-image: url(https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb98f9dae72f09a0ad46/1602145176384/arrow-right-testimonials-6.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
   
  float: none;   
  width: 90px;   
  position: absolute;   
  bottom: -12%;   
  left: 50%;   
  -webkit-transform: translate(-50%);       -ms-transform: translate(-50%);           transform: translate(-50%);   
  -webkit-box-pack: center;       
  -ms-flex-pack: center;           justify-content: center;   z-index: 9; } 

.sqs-gallery-design-carousel .sqs-gallery-controls .next::before {  color: #000;   padding: 12px; } 

.sqs-gallery-design-carousel .sqs-gallery-controls .previous::before {   color: #000;   padding: 12px; } 

.sqs-gallery-design-carousel .sqs-gallery-controls .next::before {  color: #000;   padding: 0px; } 

.sqs-gallery-design-carousel .sqs-gallery-controls .previous::before {   color: #000;   padding: 0px;
  
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
    background-image: url(https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb8774815b7a1d7b677d/1602145159916/arrow-left-testimonials-6.png) !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before, .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    visibility: hidden;
}

Try add this CSS under

.sqs-gallery-design-carousel .sqs-gallery-container {
    position: relative;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
    position: absolute;
    top: 0;
    left: -50px;
    transform: rotate(90deg);
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next {
    position: absolute;
    top: 0;
    left: -50px;
    transform: rotate(90deg);
}