Adding text which scales with the size of the display on top of picture gallery

Hey, I have struggled for some hours ending up nowhere. 

I want to add text on top of pictures in a gallery with the text being exclusive to each picture. I'm now stuck not knowing what to do as it seems there isn't a block ID for each gallery picture either. 

this is some code that gives a weird syntax error not the problem but it related to the problem I'm currently having, 

/* Hiding and showing sections */
@media screen and (max-width: 768px) {
  section[data-section-id="6411cdffbd74502790226619"] {
    display:none !important;
    z-index: 1;
  }
}

@media screen and (min-width: 768px) {
  section[data-section-id="6411c4789d3008700b6ec5d7"] {
    display:none !important;
    z-index: 1;
  }
}

@media screen and (max-width: 768px) {
  section[data-section-id="6411e6d5a9685f7a2a843623"] {
    display:none !important;
    z-index: 1;
  }
}
@media screen and (min-width: 768px) {
  section[data-section-id="6411e96822ca1855d4eceef5"] {
    display:none !important;
    z-index: 1;
  }
}

this is the actual problem code: 

/* Gallery block */
#block-<6411cdffbd74502790226619> .gallery-reel-item {
  position: relative;
}

#block-<6411cdffbd74502790226619> .gallery-reel-item img {
  display: block;
  width: 100%;
  height: auto;
}

#block-<6411cdffbd74502790226619> .gallery-reel-item::before {
  content: attr(data-title);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  text-align: center;
  width: 100%;
  z-index: 999;
}

@media only screen and (max-width: 768px) {
  #block-<6411cdffbd74502790226619> .gallery-reel-item::before {
    font-size: 6vw;
  }
}

as you can see I've tried to use the z-index to prioritize the text higher than the pictures in the gallery but it seems to not work at all. 

I hope someone who has more knowledge than me can help.

thank you. 

The password for the site is password 

23 minutes ago, LasseLundhaug said:

I fixed the code that wasn't the main issiue atleast, here is the code if anyone wants to see: 

/* Hiding and showing sections */
@media screen and (max-width: 768px) {
  section[data-section-id="6411cdffbd74502790226619"] {
    display:none !important;
    z-index: 1;
  }
}

@media screen and (min-width: 768px) {
  section[data-section-id="6411c4789d3008700b6ec5d7"] {
    display:none !important;
    z-index: 1;
  }
}

@media screen and (max-width: 768px) {
  section[data-section-id="6411e6d5a9685f7a2a843623"] {
    display:none !important;
    z-index: 1;
  }
}

@media screen and (min-width: 768px) {
  section[data-section-id="6411e96822ca1855d4eceef5"] {
    display:none !important;
    z-index: 1;
  }
}