lightbox SqSp 7.1FE CSS control over Lightbox caption box desktop and smartphone

On June 15th, Member @Beyondspace was kind to help me resize my Lightbox images on the gallery block on my website. Works great. (Thank you.)

I have a related question(s) to the "Lightbox max size" provided. (Line 175 in my CSS):

Note: I edited this request to give priority to the items. It's the positioning of the caption box that is most important. (The thickness of the arrows and the position of the close button are secondary.)

Priority 1) Lightbox Caption position. I've identified the caption 'box' as .sqs-lightbox-meta and the title as 'H1' and the description text a 'p'. (Line 208 in my CSS)

Desktop: I'd like to make the white (#ffffff) caption box 80%-100% opaque; I'd like it always to be about 30px (or so) below the image. 

Smartphone: In SqSp, it's showing up on top of the image and I'd like it below with the same attributes as the desktop. On my actual iPhone the caption box is not visible at all. (Is it below and out of sight?) (Line 220 in my CSS) (I obviously don't need the arrows showing on the smartphone as they are on SqSp, but not my actual phone.)

Priority 2) Previous and Next arrows. I've identified them and positioned them just outside the 50% image which seems to be working although there's probably better CSS code.  I've added a round white background dot and made the arrows the color #e60000 (red). I'd like to make the arrows a bit larger and thicker. (Line 191 in my CSS)

Priority 3) Lightbox Close Button. I like the changes I made, however can it be moved to be closer to the image? About 20px above on upper-right? (Line 237 in my CSS)

I know this is a lot to ask. I've looked at all the SqSp Forum entries I could find.

I use the 'Jazzikology' image in the "Identity & Branding Design Systems" page (Small and Medium-Sized Business gallery at top of page) because it has both a Title and a Description. 

Thanks! My site is live and screenshots are below. www.taitdesign.com 

Thanks also to @tuanphan who responded to my initial request. Any ideas? 

#1. Add to Design > Custom CSS

.yui3-lightbox2 .sqs-lightbox-meta {
    background-color: rgba(255,255,255,0.8) !important;
}
@media screen and (min-width:901px) {
    .sqs-lightbox-slide img.thumb-image.loaded {
    width: 30% !important;
    top: 50px !important;
    transform: translateX(-50%) !important;
}
}
@media screen and (max-width:900px) {
.yui3-lightbox2 .sqs-lightbox-meta {
    left: 0 !important;
    right: 0 !important;
}
}

#2. Use this CSS

.yui3-lightbox2 .sqs-lightbox-next::before, .yui3-lightbox2 .sqs-lightbox-previous::before {
    font-size: 35px !Important;
}

#3. 

.yui3-lightbox2 .sqs-lightbox-close {
    top: 100px;
    right: 100px;
}

Thank you @tuanphan  I'll give this a try!

I got busy with other web work (on another platform) and haven't gone back to my site.