Summary Block Navigation Arrows positioning

Hi there,

I am drafting a site with my portfolio and I would like to know if it would be possible to inject some CSS code onto the back-end to move the navigation arrows (< and >) below the image of my carousel here (carousel created with summary blocks). 
https://chicory-dodecahedron-3tgm.squarespace.com
Password: Square2024

Ideally I would also like to customise these arrows to the below:
Left  
Right 

See attached the mockup of the final design.

Hopefully someone might be able to help me here.
Thank you!

You can use this code to Website > Website Tools > Custom CSS
 

div.summary-v2-block .sqs-gallery-controls .next, div.summary-v2-block .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;
    background-color: transparent !important;
    width: 50px !important;
}
div.summary-v2-block .sqs-gallery-controls .previous {
    background-image: url(https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb8774815b7a1d7b677d/1602145159916/arrow-left-testimonials-6.png) !important;
}
div.summary-v2-block .sqs-gallery-controls .next:before, div.summary-v2-block .sqs-gallery-controls .previous:before {
    visibility: hidden;
}

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
    width: 200px !important;
}

To move position, use this CSS code

header.summary-block-header {
    position: absolute;
    bottom: 0;
    right: 0;
}

.summary-item-list {
    position: relative;
}

.sqs-gallery-design-carousel .sqs-gallery-container {
    position: relative;
}

@tuanphan

Thank you so much for your help that is perfect!!