Slider height adjustment for mobile view NOT on home page

Sure..again im just trying to make the same mobile view adjustments that I have on the home page slider but on another page on the site (with a few tweaks in size px) so I thought it was a matter of adding the code- .page-id-861 somewhere in the same CSS code that worked for the home page slider.on mobile view.
Please see below the 2 paqes in question.

Thank you!!

Thank you Ismael, unfortunately that code I have for the second slider (labeled below ‘Cohort I….’) is overriding the landing home page’s CSS (labeled ‘Home…’)

/******************
Home page-title, caption, and slider size when minimized
****************/
@media only screen and (max-width: 425px) {
.avia-slideshow-inner, .avia-slideshow-inner img {
height: 200px !important;
}
}

@media only screen and (max-width: 886px) {
.avia-caption-content {
font-size: 11px !important;
}

.responsive #top .slideshow_caption h2 {
font-size: 17px !important;
}
}

/******************
Cohort I page-title, caption, and slider size when minimized
****************/
@media only screen and (max-width: 886px) {
.page-id-861 .avia-caption-content {
font-size: 11px !important;
}

.page-id-861 .responsive #top .slideshow_caption h2 {
font-size: 17px !important;
}
}

@media only screen and (max-width: 425px) {
.page-id-861 .avia-slideshow-inner, .avia-slideshow-inner img {
height: 100px !important;
}
}e is overriding the Landing home page’s css for the slider. This is what I have however the second code for

Thanks for the reply, it works now =)