Change Caption Design on 3 images only

Site URL: https://www.casegoods.in/

Hi, 

Password of the website : CaseGoods_C3

I've made a custom design for all the captions of my images with this bit of code :
 

/* caption design*/
.sqs-block.image-block .image-caption-wrapper p { 
  font-size: 16px !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
  font-family: "Asul" !important;
  text-align: left;
  padding-top: 0px !important;
  margin-top: -5px;
  a {color: #05424d !important;}
  a:hover{color: #ffffff !important;}
}

I'm very happy about it but I then added 3 Images on my landing page and I would like for these 3 images only a different design for the caption, mainly to have the text-align:center and I'll probably increase the font-size as well. I tried finding out myself looking into the code of the page but was not able to figure out on my own.

Any thoughts ? 

Attached image of the 3 captions I would like to center on the landing page.

Hey @Paul_in took a look at the site and it looks like you got it figured out. Are you happy with the font size?

@ryandejaegherHehe yes I was still trying and here is the final code I found that made it possible :

 

/*main page phone: drawings center caption*/
@media screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1591978977963_25330, #block-yui_3_17_2_1_1591978977963_20185, #block-yui_3_17_2_1_1591978977963_21157{
  .image-caption {
    text-align: center !important;
	margin-top:0px;
  }}}

/*main page screen: drawings center caption*/
@media screen and (min-width: 640px) {
  #block-yui_3_17_2_1_1591978977963_25330, #block-yui_3_17_2_1_1591978977963_20185, #block-yui_3_17_2_1_1591978977963_21157{
  .image-caption {
    text-align: center !important;
	margin-top:20px;
  }}}

I used separates codes for the Desktop and Phone version because I also used some code to resize the drawings and wanted to adjust the margin according to the screen it will be seen. 

In order for this to work, I had to remove the code line on text alignement in my custom caption design :
 

/* caption design*/
.sqs-block.image-block .image-caption-wrapper p { 
  font-size: 18px !important;
  letter-spacing: 0.015em !important;
  line-height: 1.3 !important;
  font-family: "Asul" !important;
  padding-top: 0px !important;
  margin-top: -8px;
  a {color: #05424d !important;}
  a:hover{color: #ffffff !important;}
}

So it's all "solved" but yes indeed to answer your point, I don't have a choice on the font-size with this tweak. I have to setup the font-size in my custom caption design settings and was not able to change this size for the 3 images on the main page. 
 

Ideally I would have had control over the size as well but I'm quite happy I went that far already.