Arrow slider code adjustment is being applied on the whole website

Hello experts!

I am humbly seeking for you expertise to fix this error.

Originally I made a landing page, and I wanted the gallery arrow sliders to be bigger. So I added this code specifically for this landing page link: https://lifelab.world/workshop-location-buchen

/* Landing page spaces photo preview summary arrows */
div#block-yui_3_17_2_1_1648549152222_22108 {
.sqs-gallery-controls .next {
    position: absolute !important;
    top: 35% !important;
    transform: translateY(100%);
    font-size: 30px !important;
    right: -100px !important;
  overflow: visible;
}
  
  .sqs-gallery-controls .previous {
    position: absolute !important;
    top: 35% !important;
    transform: translateY(100%);
    font-size: 30px !important;
    left: -100px !important;
  overflow: visible;
}
  
  
 .summary-carousel-pager .sqs-gallery-controls {
    overflow: visible;
}

}
.sqs-gallery-controls .previous {
    right: unset !important;
    left: 20px !important;
  color: white;
  background-color: rgba(255, 255, 255,.5)
}

.sqs-gallery-controls .next {
    right: 10px !important;
  color: #fff;
  background-color: rgba(255, 255, 255,.5)
}
.sqs-gallery-controls .next:before {
    font-size: 100px;
  color: #fff;
}
.sqs-gallery-controls .previous:before {
    font-size: 100px;
  color: #fff;
}

  .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    font-size: 50px;
    width: 50px;
    height: 5px;
    line-height: 5px;
    color: #fff;
}

.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    font-family: 'squarespace-ui-font';
    font-style: normal;
    speak: none;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    content: "\E02C";
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    color: #fff!important;
}

 .sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    font-size: 50px;
    width: 50px;
    height: 5px;
    line-height: 5px;
   color: #fff;
}

.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    font-family: 'squarespace-ui-font';
    font-style: normal;
    speak: none;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    content: "\E02D";
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

/* Landing page setiing summary arrows */
div#block-yui_3_17_2_1_1649142326010_3915 {
.sqs-gallery-controls .next {
    position: absolute !important;
    top: 45%!important;
    transform: translateY(-50%);
    font-size: 30px !important;
    right: 100px !important;
  color: white;
}

  .sqs-gallery-controls .previous {
    position: absolute !important;
    top: 45%!important;
    transform: translateY(-50%);
    font-size: 30px !important;
    right: 100px !important;
  color: white;
}

  //left arrow//
  .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    font-family: 'squarespace-ui-font';
    font-style: normal;
    speak: none;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    content: "\E02C";
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
}

 //right arrow//
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    font-family: 'squarespace-ui-font';
    font-style: normal;
    speak: none;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    content: "\E02D";
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

.sqs-gallery-controls .previous {
    right: unset !important;
    left: 20px !important;
  color:#fff;
}

 .sqs-gallery-controls .next {
    right: 50px !important;
  color: #fff;
} 

.sqs-gallery-controls .next:before {
    font-size: 80px;
   color:#fff;
}

.sqs-gallery-controls .previous:before {
    font-size: 80px;
}
}

The problem I am currently facing it is being applied all throughout the website.  This is what it looks like on a normal page (not landing page)

What can I do to have the arrows sizing codes be applied only on the landing page? 

I am not an expert and I am just learning along the way, I do appreciate anyone's help in advance for this. 

22 minutes ago, Ziggy said:

It looks like you have a closing } too early, try this as a replacement for all that code:

/* Landing page spaces photo preview summary arrows */
div#block-yui_3_17_2_1_1648549152222_22108 {
.sqs-gallery-controls .next {
    position: absolute !important;
    top: 35% !important;
    transform: translateY(100%);
    font-size: 30px !important;
    right: -100px !important;
  overflow: visible;
}
  
  .sqs-gallery-controls .previous {
    position: absolute !important;
    top: 35% !important;
    transform: translateY(100%);
    font-size: 30px !important;
    left: -100px !important;
  overflow: visible;
}
  
  
 .summary-carousel-pager .sqs-gallery-controls {
    overflow: visible;
}

.sqs-gallery-controls .previous {
    right: unset !important;
    left: 20px !important;
  color: white;
  background-color: rgba(255, 255, 255,.5)
}

.sqs-gallery-controls .next {
    right: 10px !important;
  color: #fff;
  background-color: rgba(255, 255, 255,.5)
}
.sqs-gallery-controls .next:before {
    font-size: 100px;
  color: #fff;
}
.sqs-gallery-controls .previous:before {
    font-size: 100px;
  color: #fff;
}

  .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    font-size: 50px;
    width: 50px;
    height: 5px;
    line-height: 5px;
    color: #fff;
}

.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    font-family: 'squarespace-ui-font';
    font-style: normal;
    speak: none;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    content: "\E02C";
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    color: #fff!important;
}

 .sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    font-size: 50px;
    width: 50px;
    height: 5px;
    line-height: 5px;
   color: #fff;
}

.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    font-family: 'squarespace-ui-font';
    font-style: normal;
    speak: none;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    content: "\E02D";
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

}
  
  
/* Landing page setiing summary arrows */
div#block-yui_3_17_2_1_1649142326010_3915 {
.sqs-gallery-controls .next {
    position: absolute !important;
    top: 45%!important;
    transform: translateY(-50%);
    font-size: 30px !important;
    right: 100px !important;
  color: white;
}

  .sqs-gallery-controls .previous {
    position: absolute !important;
    top: 45%!important;
    transform: translateY(-50%);
    font-size: 30px !important;
    right: 100px !important;
  color: white;
}

  //left arrow//
  .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    font-family: 'squarespace-ui-font';
    font-style: normal;
    speak: none;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    content: "\E02C";
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
}

 //right arrow//
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    font-family: 'squarespace-ui-font';
    font-style: normal;
    speak: none;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    content: "\E02D";
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

.sqs-gallery-controls .previous {
    right: unset !important;
    left: 20px !important;
  color:#fff;
}

 .sqs-gallery-controls .next {
    right: 50px !important;
  color: #fff;
} 

.sqs-gallery-controls .next:before {
    font-size: 80px;
   color:#fff;
}

.sqs-gallery-controls .previous:before {
    font-size: 80px;
}
}

Let me know if that worked.

It worked! Thank you so much @Ziggy! Such a life saver! 🙏

No problem, glad I spotted that, can be tricky to find coding "errors" (not really an error , just a misplaced bracket). Can you mark my post as the solution to your question and give it a thumbs up? Thanks!