@charset "UTF-8";
.video-wrapper {
  border-radius: 1.25rem;
  background-color: var(--gray-400);
  height: 20.0625rem;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.video-wrapper .start-video {
  height: 100%;
  object-fit: contain; /* показать видео целиком без обрезки */
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-43%, -50%);
}

@media screen and (min-width: 451px) {
  .barrier-configurator .video-wrapper {
    border-radius: 1.25rem;
    height: 14.5rem;
  }
  .barrier-configurator .video-wrapper .start-video {
    height: calc(100% + 9.375rem);
    transform: translate(-50%, -50%);
  }
}
@media screen and (min-width: 601px) {
  .barrier-configurator .video-wrapper {
    border-radius: 1.5625rem;
    height: 15.625rem;
  }
}
@media screen and (min-width: 713px) {
  .barrier-configurator .video-wrapper {
    border-radius: 1.5625rem;
    height: 19.875rem;
  }
  .barrier-configurator .video-wrapper .start-video {
    transform: translate(-50%, -50%);
  }
}
@media screen and (min-width: 901px) {
  .barrier-configurator .video-wrapper {
    border-radius: 2.5rem;
    height: 26.125rem;
  }
  .barrier-configurator .video-wrapper .start-video {
    height: calc(100% + 12.1875rem);
  }
}
@media screen and (min-width: 1201px) {
  .barrier-configurator .video-wrapper {
    height: 31.5rem;
  }
  .barrier-configurator .video-wrapper .start-video {
    height: calc(100% + 15rem);
  }
}
@media screen and (min-width: 1401px) {
  .barrier-configurator .video-wrapper {
    height: 33.75rem;
  }
}
@media screen and (min-width: 1401px) {
  .barrier-configurator .video-wrapper {
    height: 40rem;
  }
  .barrier-configurator .video-wrapper .start-video {
    height: calc(100% + 20.625rem);
  }
}