:root {
  --container-width: 3840;

  --white: white;
  --black: #131f30;
  --green: #00946e;
  --border: calc(1 var(--calc-cqi)) solid black;
  --border-radius-full: 1000px;

  --calc-cqi: /var(--container-width) * 100cqi;

  --modal-padding: calc(40 var(--calc-cqi));
  --modal-border--radius: calc(15 var(--calc-cqi));
  --modal-border: calc(1.5 var(--calc-cqi)) solid black;

  ---p-font-size: calc(16 / var(--container-width) * 100cqi);
  --p-margin-bottom: calc(30 / var(--container-width) * 100cqi);
}

body {
  max-height: 100vh;
  overflow: hidden;
}

button {
  font-size: calc(16 var(--calc-cqi));
}

.master__wrap-all {
  margin-top: -0.6cqi;

  overflow: hidden;

  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mother__container {
  /*
  background: linear-gradient(166deg, #ff9567 -5.29%, #ffe2b8 81.56%);*/
  background-image: url("/img/BG.webp");
  background-repeat: repeat-x;
  overflow: hidden;

  width: 100%;
  container-type: inline-size;
  position: relative;
  aspect-ratio: 1920/1080;

  max-width: 100%;
}

.bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  width: calc(3840 / var(--container-width) * 100cqi);
  height: calc(2160 / var(--container-width) * 100cqi);
  object-fit: cover;
  object-position: center;
}

.bg-video.visible {
}

.hide-bg-img {
  display: none;
}