.drifty-demo-frame {
  box-sizing: border-box;
  --drifty-demo-frame-bg: transparent;
  --drifty-demo-aspect: 1398 / 804;
  --drifty-demo-logical-width: 1398px;
  --drifty-demo-logical-height: 804px;
  --drifty-demo-desktop-width: 1328px;
  --drifty-demo-width: min(var(--drifty-demo-desktop-width), calc(100vw - 32px));
  --drifty-demo-scale: calc(var(--drifty-demo-width) / var(--drifty-demo-logical-width));
  width: var(--drifty-demo-width);
  max-width: none;
  aspect-ratio: var(--drifty-demo-aspect);
  margin-inline: calc((100% - var(--drifty-demo-width)) / 2);
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--drifty-demo-frame-bg);
  backdrop-filter: blur(18px) saturate(115%);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.drifty-demo {
  width: var(--drifty-demo-logical-width);
  height: var(--drifty-demo-logical-height);
  display: block;
  border: 0;
  background: transparent;
  pointer-events: auto;
  max-width: none;
  transform: scale(var(--drifty-demo-scale));
  transform-origin: top left;
}

@media (min-width: 1101px) and (max-height: 900px) {
  .drifty-demo-frame {
    --drifty-demo-width: min(var(--drifty-demo-desktop-width), calc(100vw - 32px));
    aspect-ratio: var(--drifty-demo-aspect);
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .drifty-demo-frame {
    --drifty-demo-width: calc(100vw - 32px);
    aspect-ratio: var(--drifty-demo-aspect);
  }
}


@media (max-width: 760px) {
  .drifty-demo-frame {
    aspect-ratio: 4 / 3.712;
  }

  .drifty-demo {
    width: 100%;
    height: 100%;
    transform: none;
  }
}

@media (max-width: 520px) {
  .drifty-demo-frame {
    aspect-ratio: 1 / 1.237;
  }
}