.image-slider .image-slider-container {
  display: flex;
  flex-direction: column;
}
.image-slider .slider-box {
  position: relative;
  width: 95%;
}
.image-slider .slider-box .slider {
  width: 100%;
}
.image-slider .slider-box .img-container {
  aspect-ratio: 7/4;
  margin-left: 0;
  margin-right: auto;
}
.image-slider .slider-box .img-container img {
  width: 100%;
  height: 100%;
}

@media (max-width: 1200px) {
  .image-slider .slider-button {
    width: 9em;
  }
  .image-slider .slider-button .btn-left {
    padding-block: 1em;
    width: 40%;
    position: relative;
  }
  .image-slider .slider-button .btn-left .left-container {
    width: 70%;
  }
  .image-slider .slider-button .btn-left:hover .left-container {
    width: 85%;
  }
  .image-slider .slider-button .btn-left:hover .counter {
    bottom: -1em;
    right: -4.3em;
  }
  .image-slider .slider-button .btn-left .btn-right {
    padding-block: 1em;
    width: 40%;
  }
  .image-slider .slider-button .btn-left .btn-right .right-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 70%;
    height: 2px;
    background-color: #000;
    transition: width 0.4s ease;
  }
  .image-slider .slider-button .btn-left .btn-right:hover .right-container {
    width: 95%;
  }
}
@media (max-width: 768px) {
  .image-slider .slider-button {
    transform: translate(20%, -150%);
  }
  .image-slider .slider-button .btn-left .counter {
    bottom: 0;
    right: -4.3em;
  }
}
@media (max-width: 500px) {
  .image-slider .container-medium {
    width: 100%;
  }
  .image-slider .slider-box {
    width: 100%;
  }
  .image-slider .slider-button {
    margin-inline: auto;
    width: 95%;
    transform: translate(0, -30%);
  }
  .image-slider .slider-button .btn-left {
    width: 50%;
    padding-block: 0.8em;
  }
  .image-slider .slider-button .btn-left .left-container {
    width: 60%;
  }
  .image-slider .slider-button .btn-left:hover .left-container {
    width: 90%;
  }
  .image-slider .slider-button .btn-left .counter {
    bottom: -0.3em;
    right: -7.5em;
  }
  .image-slider .slider-button .btn-right {
    padding-block: 0.8em;
    width: 60%;
  }
  .image-slider .slider-button .btn-right .right-container {
    width: 50%;
  }
  .image-slider .slider-button .btn-right:hover .right-container {
    width: 90%;
  }
}