Custom CSS not loading

My custom CSS is not working properly. When I am in edit mode, the CSS works. However, when I leave it and log into the website not logged in, the CSS does not work anymore.

For my page, I have an text overlay with a grey background and centered text over the image that is hidden over the image.
When the user hovers over the image, the text overlay appears. This is only on desktop size screens. On mobile size screens,
the overlay is hidden completely. The hidden overlay works on mobile size. However the hover effect does not work on desktop size. I removed all comments in my code and have removed most of the elements from the code snippet below:

/* On desktop size screen make text overlay transparent*/
@media only screen and (min-width: 768px) {
  #block-35f9b9b2a05d03b910bd,
  #block-e382993ec5272d55f805,
  /* removed rest of ids */  
  {
    opacity: 0;
    transition: opacity 1s;
  }
 
 /* Show overlay on on user hover over image*/
  #block-35f9b9b2a05d03b910bd:hover,
  #block-e382993ec5272d55f805:hover,
 /* removed rest of ids */
 {
    opacity: 1;
    transition: opacity 1s;
  }
}

/* On mobile hide text overlay */
@media only screen and (max-width: 767px) {
  #block-35f9b9b2a05d03b910bd,
  #block-e382993ec5272d55f80,
  /* removed rest of ids */
  {
    display: none;
  }
}

I can show my full code for more context, but the desired effect works in edit mode.

You have unnecessary commas after the last block IDs, might not make a difference but worth fixing:

/* On desktop size screen make text overlay transparent*/
@media only screen and (min-width: 768px) {
  #block-35f9b9b2a05d03b910bd,
  #block-e382993ec5272d55f805
  /* removed rest of ids */  
  {
    opacity: 0;
    transition: opacity 1s;
  }
 
 /* Show overlay on on user hover over image*/
  #block-35f9b9b2a05d03b910bd:hover,
  #block-e382993ec5272d55f805:hover
 /* removed rest of ids */
 {
    opacity: 1;
    transition: opacity 1s;
  }
}

/* On mobile hide text overlay */
@media only screen and (max-width: 767px) {
  #block-35f9b9b2a05d03b910bd,
  #block-e382993ec5272d55f80
  /* removed rest of ids */
  {
    display: none;
  }
}

Thanks, this is corrected on the actual CSS I am running on the site. However, still not running outside of edit mode. When I check the css on the dev console, there is strikethrough on the css rules I applied. This might be specificity issue that is occuring.

I fixed it, just had to put !important at the end of my rules.