Squarespace 7.0 Center text to match the others

Site URL: https://www.koshersprings.com/adventures

Hi! I can't get Yard Games title in the gallery to match the others (centered and white text)

 

Any ideas? See screenshot!

 

 

32 minutes ago, LindseyMexico14 said:

Site URL: https://www.koshersprings.com/adventures

Hi! I can't get Yard Games title in the gallery to match the others (centered and white text)

 

Any ideas? See screenshot!

 

 

 

 

<style>

.slide:hover img {

      transform:scale(1.05);

      -moz-transform:scale(1.05);

      -webkit-transform:scale(1.05);

    }

   .slide:hover .image-slide-title {

      background: rgba(0,0,0,0.4);

  }

.image-slide-title p {

    max-width: 90% !important;

  }

.image-slide-title {

  white-space: initial !important;

  text-overflow: initial !important;

transform: translateY(-0.5em);

-webkit-transform: translateY(-0.5em);

-moz-transform: translateY(-0.5em);

-ms-transform: translateY(-0.5em);

}

  .slide .margin-wrapper { overflow: hidden !important;

}

.slide img {

      -webkit-backface-visibility: hidden;

      -moz-backface-visibility: hidden;

      -ms-backface-visibility: hidden;

      -webkit-transition: all ease-in-out 200ms;

      -moz-transition: all ease-in-out 200ms;

      transition: all ease-in-out 200ms;

    }

    .image-slide-title {

      -webkit-transform-style: preserve-3d;

      -webkit-backface-visibility: hidden;

      -webkit-transition: all ease-in-out 200ms;

      -moz-transition: all ease-in-out 200ms;

      transition: all ease-in-out 200ms;

      height: 100%;

      box-sizing: border-box;

      -webkit-box-sizing: border-box;

      -moz-box-sizing: border-box;

      width: 100%;

      position: absolute;

      top: 0;

      left: 0;

      background: rgba(0,0,0,0.2);

      display: block !important;

    }

     .image-slide-title strong  {

            text-transform: uppercase;

            font-size: 26px!important;

            line-height: 28px;

        text-align: center;

            font-weight: 400;

            letter-spacing: 1px;

            color: #fff!important;

            position: absolute;

            top: 50% !important;

            left: 50% !important;

            -webkit-transform: translate(-50%, -50%);

            -ms-transform: translate(-50%, -50%);

            -moz-transform: translate(-50%, -50%);

            transform: translate(-50%, -50%);

      }

      .image-slide-title p {

            font-style: initial;

            color: #eee;

            font-size: 12px;

            font-weight: 100;

            position: absolute;

            bottom: 20px !important;

            left: 50% !important;

            -webkit-transform: translate(-50%, 0%);

            -ms-transform: translate(-50%, 0%);

            -moz-transform: translate(-50%, 0%);

            transform: translate(-50%, 0%);

      }

 

@media only screen and (max-width: 640px) {

.sqs-gallery-design-grid-slide {

  width: 100% !important;

}

}

@media ( max-width: 1024px ) {

  .slide .image-slide-title strong {

          font-size: 18px;

          line-height: 20px;

        }

   .slide .image-slide-title span {

          font-size: 11px;

          line-height: 12px;

  }

}

.sqs-lightbox-meta{display: none !important;}

</style>

 

 

Here is the code I found from a past developer but I cannot see how to apply it to the new photo I added yard games

I see you figured it out?