#preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: black;
  display: flex;
  justify-content: center;
}

.mask {
  position: absolute; /* Позиционируем относительно родителя */
  margin-left: auto;
  margin-right: auto;
  transform: translate(-50%, -50%); /* Центрируем элемент по центру экрана */
  width: 576px;
  height: 168px;
  -webkit-mask-image: url(https://dl.dropboxusercontent.com/scl/fi/zcsu2yclbdxb64ruigdtn/Logo.svg?rlkey=hg014yxro9gs3c373a64h45pu&st=yob9mpc9&dl=0);
  mask-image: url(https://dl.dropboxusercontent.com/scl/fi/zcsu2yclbdxb64ruigdtn/Logo.svg?rlkey=hg014yxro9gs3c373a64h45pu&st=yob9mpc9&dl=0);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center; /* Центрируем изображение в .mask */
}

.image {
  position: absolute;
  top: 0;  /* Убираем сдвиг по вертикали */
  left: 0; /* Убираем сдвиг по горизонтали */
  animation: rotate 3s infinite linear;
  width: 400px;
  height: 400px;
  transform-origin: center;
}

@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

/* Media Queries */
@media (max-width: 1200px) {
  .mask {
    width: 540px;
    height: 157px;
    mask-size: cover;
  }
}

@media (max-width: 960px) {
  .mask {
    width: 540px;
    height: 157px;
    mask-size: cover;
  }
}

@media (max-width: 640px) {
  .mask {
    width: 324px;
    height: 94px;
    mask-size: cover;
  }
}

@media (max-width: 480px) {
  .mask {
    width: 324px;
    height: 94px;
    mask-size: cover;
  }
}