:root {
  --screen-loader-z-index: 1500;
  --screen-loader-color: #009fd5;
  --screen-loader-background-color: #edeff5;
  --screen-loader-container-background-color: white;
}

.ScreenLoader__root {
  color: var(--screen-loader-color);
  background-color: var(--screen-loader-background-color);
  padding: 80px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--screen-loader-z-index);
}

.ScreenLoader__container {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

.ScreenLoader__inner {
  position: relative;
  display: grid;
  grid-template-columns: 532px;
  grid-template-rows: max-content;
  justify-content: space-between;
  row-gap: 32px;
  height: 100%;
  background-color: var(--screen-loader-container-background-color);
  padding: 32px;
  border-radius: 4px;
  overflow: hidden;
}

.ScreenLoader__icon {
  width: 160px;
  height: 28px;
  z-index: 1;
  margin-left: -13px;
}

.ScreenLoader__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.ScreenLoader__heding {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-end;
  height: max-content;
  overflow-y: scroll;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;

&::-webkit-scrollbar {
   display: none;
 }
}

.ScreenLoader__title {
  font-size: 32px;
  line-height: 36px;
  display: block;
  width: 75%;
  text-wrap: balance;
}

.ScreenLoader__subtitle {
  font-size: 20px;
  line-height: 26px;
  padding-top: 24px;
  width: 90%;
}

.ScreenLoader__title,
.ScreenLoader__subtitle {
  font-family: "Golos UI", sans-serif;
  margin: 0;
  color: var(--screen-loader-container-background-color);
  z-index: 1;
}

@media (width <= 1200px) {
  .ScreenLoader__root {
    padding: 32px 32px 64px;
  }
}

@media (width <= 960px) {
  .ScreenLoader__inner {
    grid-template-columns: 468px;
    overflow: hidden;
  }
}

@media (width <= 798px) {
  .ScreenLoader__inner {
    grid-template-columns: 393px;
  }
}

@media (width <= 420px) {
  .ScreenLoader__inner {
    grid-template-columns: 1fr;
  }

  .ScreenLoader__title,
  .ScreenLoader__subtitle {
    width: 100%;
  }
}

@media (max-width: 1439px) or (min-width: 481px) {
  .Container__root {
    --container-padding-x: 32px;
  }
}