Не могу сделать адаптивный блок

На примере ниже реализация слайдера. Хочу сделать его адаптивным (чтобы увеличивалась высота картинки), но не знаю как

.slider__container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    height: 900px;
  }
  
.slider__container .slider-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: all ease 1s;
}
  
.slider__control {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slider__control-item {
    border: solid #fff;
    border-width: 0 5px 5px 0;
    padding: 15px;
}
  
.slider__control-item:hover {
    opacity: .7;
    cursor: pointer;
}
  
.next {
    margin-right: 25px;
    transform: rotate(-45deg);
}
  
.prev {
    margin-left: 25px;
    transform: rotate(135deg);
}
  
.slider__dots {
    width: 100%;
    position: absolute;
    align-self: flex-end;
    display: inline-flex;
    justify-content: center;
    bottom: 0;
}
  
.slider__dots-item {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #fff;
    margin: 25px 10px;
}

.slider__dots-item:hover {
    opacity: .7;
    cursor: pointer;
}

<div class="slider__container">
                <div class="content">
                  <img class="slider-item" src="https://oboi.ws/wallpapers/17_12338_oboi_firewatch_1920x1080.jpg" alt="image">
                  <img class="slider-item" src="img/4.jpg"
                    alt="image">
                  <img class="slider-item" src="https://i.pinimg.com/originals/83/7f/9f/837f9f1f2e4d15c7e6d0d6c109ab9a0a.jpg"
                    alt="image">
                </div>
                <div class="slider__control">
                  <div class="slider__control-item prev"></div>
                  <div class="slider__control-item next"></div>
                </div>
                <div class="slider__dots"></div>
            </div>