:root {
  --ak-shot-bg-c1: #ecccff;
  --ak-shot-bg-c2: #b5e9cb;
  --ak-shot-bg-c3: #add5ff;
  --ak-shot-bg-c4: #ffca8e;
  --ak-shot-bg-radius: 8px;
  --ak-shot-bg-padding: 0px;
  --ak-shot-img-radius-phone: 50px;
  --ak-shot-img-border-phone: 10px solid #000000;
}

.ak-shot {
  position: relative;
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  aspect-ratio: 578/385;
  border-radius: var(--ak-shot-bg-radius);
  border: 0.5px solid #ececec;
  padding: var(--ak-shot-bg-padding);
  justify-content: center;
  align-items: center;
}

.ak-shot--c1 {
  background-color: var(--ak-shot-bg-c1);
}

.ak-shot--c2 {
  background-color: var(--ak-shot-bg-c2);
}

.ak-shot--c3 {
  background-color: var(--ak-shot-bg-c3);
}

.ak-shot--c4 {
  background-color: var(--ak-shot-bg-c4);
}

.ak-shot-img {
  --ak-shot-img-x: 0%;
  --ak-shot-img-y: 0%;
  margin: 0;
}

.ak-shot-img img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

.ak-shot-img--phone {
  position: absolute;
  top: 14.29%;
  left: 50%;
  width: 62.63% !important;
  transform: translate(calc(-50% + var(--ak-shot-img-x)), var(--ak-shot-img-y));
}

.ak-shot-img--phone img {
  height: auto !important;
  border-radius: var(--ak-shot-img-radius-phone) !important;
  border: var(--ak-shot-img-border-phone) !important;
}

.ak-shot--pad-min {
  padding: 5.36%;
}

.ak-shot-img--h1 {
  position: absolute;
  top: 15.84%;
  left: 11.94%;
  width: 127.34% !important;
  transform: translate(var(--ak-shot-img-x), var(--ak-shot-img-y));
}

.ak-shot-img--h1 img {
  height: auto !important;
  border-radius: 8px !important;
  border: 0.5px solid #cbcbcb !important;
}

.ak-shot-img--center img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  border: 0.5px solid #cbcbcb !important;
}