:root {
  color-scheme: light;
  background: #f8f5ff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, #f7f0fb 0%, #ffffff 20%, #ffffff 80%, #eef8ff 100%);
}

.design {
  position: relative;
  width: min(100vw, calc(100dvh * 941 / 1672));
  aspect-ratio: 941 / 1672;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 48px rgba(69, 50, 115, 0.12);
}

.design__image {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.design__button {
  position: absolute;
  left: 11.9%;
  width: 75.45%;
  border-radius: 8%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.design__button::after {
  content: "";
  position: absolute;
  inset: 1.5%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0);
  transition: background-color 150ms ease;
}

.design__button:hover::after {
  background: rgba(255, 255, 255, 0.1);
}

.design__button:active::after {
  background: rgba(72, 26, 130, 0.06);
}

.design__button:focus-visible {
  outline: 5px solid #ff2e9e;
  outline-offset: -5px;
}

.design__button--wb {
  top: 52.63%;
  height: 14.54%;
}

.design__button--video {
  top: 68.42%;
  height: 15.07%;
}