#map {
  border-radius: var(--border-radius);
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: absolute !important;
  top: 0;
  left: 0; }

.map {
  position: relative;
  height: 0;
  width: 100%;
  padding-bottom: 48%; }
  .map__video {
    position: absolute;
    display: block;
    width: 450px;
    height: 257px;
    left: 120px;
    bottom: 120px;
    border-radius: 10px; }
    .map__video img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px; }
    .map__video:after {
      content: '';
      display: block;
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: url(../img/play.svg) center center no-repeat;
      background-size: contain;
      z-index: 1; }

@media (max-width: 1919px) {
  .map__video {
    left: 50px;
    bottom: 50px; } }

@media (max-width: 1199px) {
  .map__video {
    width: 209px;
    height: 124px; }
    .map__video:after {
      width: 46px;
      height: 46px; } }

@media (max-width: 767px) {
  .map {
    padding-bottom: 100%; } }

@media (max-width: 575px) {
  .map {
    height: 597px;
    padding: 0; }
    .map__video {
      left: 30px;
      bottom: 30px; } }